Lights Out – DMG Custom Color Palettes Tutorial

Editor’s Note: This article contains flashing images for those who are sensitive to them.

This tutorial is built heavily on a plug-in created by NalaFala (Yousurname) and would not be as easy to implement without its help.

We will be focusing exclusively on the DMG Palette for this tutorial.

With the horror themed homebrew games filling a void in the Game Boy’s library, let’s explore and implement a classic horror trope: lights out. Deliberate manipulation of the light and shadow can be used to heighten tension, obscure paths, cloak sinister beings lurking in the darkness, or even the tried and true jump scare.

Source Code

https://github.com/phinioxGlade/gbstudio-dmg-custom-color-palettes

Playable In-Browser, or Download the ROM

https://phinioxglade.itch.io/gbstudio-3-custom-dmg-color-palette-tutorial

Key Concepts

  • Using the set palette colors plugin
  • How DMG color palettes work
  • Setting the color palette of background layer
  • Setting the color palette of sprite layer
  • Arthoring art to work to leverage non standard palette
  • Color palette cycling
  • Custom fade in and out effect

Set Palette Colors Plug-in

You’re probably already aware of the built-in events for [Set Background Palettes] and [Set Sprite Palettes], unfortunately these only apply to GBC palettes, but luckily a plugin made by NalaFala (Yousurname) called Set Palette Colors is here to help those making DMG games.

DMG Graphics Refresher

The Gameboy has a 4-bit color palette which can render sprite, background and overlay window layers. The sprite layer (OBJ0) supports 3 color channels with an additional transparent channel. The background and overlay window are both tile layers (BGP) and can be either 4 color channels, or 3 color channels plus 1 transparent channel. The BGP transparent channel only applies to sprites that “display behind background layer” are checked in the sprite editor.

The color palette for the sprite and background are independent but apply to the entire layer. The [Set Palette Colors] plugin allows us to reassign the color that each channel is using, i.e. swap white to black and vice versa.

1. Swapping Black for White

We will start with the simplest demonstration, setting a single background color channel from black to white:

  1. Create a new project called LightsOut using the built-in Sample Project (GBS V3+) you will be using these assets.
  2. Install the setPaletteColorsPlugin:
    1. Close GB Studio.
    2. Navigate to your project’s root folder and add a new folder called plugins.
    3. Inside the plugins folder add a new folder called setPaletteColorsPlugin.
    4. Inside setPaletteColorsPlugin copy of the contents https://github.com/Y0UR-U5ERNAME/gbs-plugin-collection/tree/main/plugins/setPaletteColorsPlugin.
    5. Reopen GB Studio and the project.
  3. Delete all the scenes.
  4. Add a new empty scene called “1. Black for white on INIT” and select the black background.
  5. Add set palette color event to Scene OnInit and set Color 4 to a value of 0.
  6. Run and you will see the background is white instead of black.

2. Light Switch

Let’s build a simple light switch. The Player will interact with the switch, allowing them to toggle the room’s lights on and off:

  1. Add a new scene called “2. Light Switch”.
  2. Set the background as the house.
  3. Create a global variable called LightSwitchOn.
  4. Add a [Set Variable To True] for the LightSwitchOn variable on Scene On Init.
  5. Add a new sprite, rename it to LightSwitch and set to the Machine sprite sheet.
  6. Add a trigger over and in front of the LightSwitch sprite.
  7. Add “Attach Button Script” event to the LightSwitch’s OnEnter.

Inside the Button script code needed to toggle the lights:

  1. Add If variable is true to evaluate LightSwitchOn:
    1. Inside If True:
      1. Add “Set Palette Color” event with the values 3,2,3,3, this will most of the room black.
      2. Set LightSwitchOn variable to False. 
    2. Inside Else:
      1. Add “Set Palette Color” event with the values 0,1,2,3, this will restore the palette to its default.
      2. Set LightSwitchOn variable to True.

3. Light Switch – Include Sprites

Now that we have the lights affecting the background, the sprites look out of place in the darkness. To solve this, we are going to set the sprite palette:

  1. Duplicate the “2. Light Switch” scene and rename the new scene “3. Light Switch – Include Sprites”.
  2. In the “Attach Button Script” If True clause:
    1. Add “Set Palette Color” event, set to OBP0 and the Color channels to [2, 2, 3] – this makes the sprites dark but not invisible.
  3. In the “Attach Button Script” If False clause:
    1. Add “Set Palette Color” event, set to OBP0 and the Color channels to [0, 1, 2].
    2. This restores the sprites to the default palette.

4. Lightning and Ghosts

We will finish this simple tutorial by implementing a gameplay gimmick, randomly lightning will illuminate the room revealing ghastly ghosts floating around the room:

During the darkness only the ghost’s eyes will be visible. This will require the creation of a sprite sheet that takes into account how we are altering the color channels.

  1. Create a new scene:
    1. Set the background to house.
    2. Rename the to “4. Lightning and Ghosts”.
    3. Scene On Init set LightSwitchOn to False.
  2. Create a new global script called “LightSwitch – Toggle”:
    1. Copy the contents of the “3. Light Switch – Include Sprites”’s “Attach Button Script” If True clause in the into “LightSwitch – Toggle”.
  3. Create a new global script called “Lightning Effect”.
  4. Create a new global script called “Ghost Patrol”. Randomly calculates how many tiles it will move and what direction.
  5. Build the Ghost sprite with its animation.
  6. Add a new actor to the scene:
    1. Set the sprite sheet to Ghost.
    2. Rename “Ghost 1”.
    3. On Update call the Ghost Patrol global script.
       
  7. Duplicate the Ghost 1 and rename Ghost 2.

Effects

To close the tutorial we will demonstrate some of the effects you can achieve.

Cycling Color Channels

By cycling the colors you can recreate the star powerup effect from Super Mario.

Background OnlySprites OnlyBackground and Sprites

Custom Fade In/Out

The inbuilt Fade In and Out effect applies to the entire screen equality. Using the plugin we can fade in/out each layer and out independently.

Background OnlySprites OnlyBackground and Sprites

Using the Set Palette Colors plugin is another way you can add visual flare to your games and help convey information to your player. Give it a try and explore what you can do with it!

Liked it? Take a second to support GB Studio Central on Patreon!
Become a patron at Patreon!