A Guide to SGB Mode

When the Super Game Boy was released in 1994, pretty much every Game Boy fan was ecstatic to try out their favorite handheld games on their big screen TV via the Super Nintendo peripheral. Fast forward a whopping twenty eight years and the SGB has been offered a new lease on life with the release of GB Studio 3.0 and the newly added SGB mode feature. During my time developing In The Dark, I made it my goal to figure out precisely how this admittedly strange yet wonderful mode worked.

In The Dark (2022) as seen in SGB Mode

In this detailed guide, we will explore how the Super Game Boy functions and how to implement its many features in your own GBS3.0 projects. Right, let’s SGBegin! 

The SGB Border

One of the more exciting features the SGB offers is the full color border. Many Game Boy games back in the day used this border to great effect. Some used it as a simple aesthetic upgrade while others offered something more immersive, such as displaying the game within a simulated arcade machine. 

Donkey Kong Land 1995 (left) and Donkey Kong (1994) as seen when using the SGB

Implementing a border in GBS3.0 is the easiest aspect of using SGB mode. Simply open a new project, go to Settings and click on the checkbox next to Enable Super GB Mode. Now make a build of your project and GBS3.0 will automatically create a 256 x 224 pixel PNG file. You can find this file (border.png) within the newly created sgb folder in your projects assets directory. The SGB will render this PNG file as is, so editing your border is as simple as opening it in your favorite image editing software and you’re on your way!

The border.png file. Edit the graphics around the fluorescent pink area. The pink area itself represents the game play area.

For the purposes of this article, I have edited the default border PNG to create a GB Studio Central themed border. It’s best to NOT test the border using the inbuilt GBS emulator as the colors are very desaturated and do not represent what is seen when using an actual SGB. Instead, I recommend exporting a ROM and using the emulator ‘BGB’, going to options > system and selecting Super Gameboy. Resetting the game will enable this mode.

The edited border.png (left) and a screenshot of it running in BGB (right).

Let’s play a game of spot the difference with the two borders above. You will notice the red light on the Game Boy of the GBSC logo has not been accurately displayed in BGB. Developing games for the Game Boy always has its limitations so it should come as no surprise that creating a border for the SGB comes with its own considerations.

Graphical glitch owing to SGB hardware limitations (right). The large amount of anti-aliasing in border.png (especially the text) has pushed the unique colors well beyond what the SGB can manage.

Specifically, there are two hardware limitations to keep in mind when editing your border.png file:

  • The border cannot utilize more than 16 colors.
  • The border cannot contain more than 256 unique 8×8 pixel tiles.

To be clear, the SGB itself actually allows for 4 palettes of 16 colors each when rendering the border (just count the DK’94 border colors and you will find there is well over 16 there), but we are restricted to using only one of those palettes in GB Studio – hence the 16 maximum colors.

Now that we have our own SGB border, we can move onto the more complex features: coloring your game! But before I get into the “how to”, let’s first discuss what is happening technically when the SGB displays color in-game. 

How Color in SGB Mode Works

While the SGB does offer color options, it’s not at all similar to the options provided when developing a Game Boy Color game. Instead, SGB color mode displays color over the top of a game running in DMG mode. You can think of it like this:

Color is displayed over the DMG Game Boy scene as if we were to cover the TV screen with colored cellophane. 

Because of this, we must understand that a scrolling scene in a platformer or shmup for example, will have unintended effects when played on the SGB. It is for this reason that games with a static screen are best suited for SGB mode as zones of color are not attached to the scene itself but zones within the display of the TV screen.

By default, background palette 5 of each scene is displayed as the color palette when played on the SGB. It is this palette that acts as the “cellophane” wrapped over the TV screen image. Furthermore, it doesn’t matter what art element is beneath the cellophane so to speak, whether it’s a background tile or a sprite, all visual elements will be rendered with this palette on the SGB

Returning to our screenshot in BGB (and with much of the anti-aliasing removed to bring us down to 16 unique colors), we can see that the placeholder scene in GBS3.0 has been colored with default palette 5 (the fifth background palette in GBS3.0’s default placeholder scene). If we were to set the player actor’s palette to something different, it would not make a difference. 

The placeholder scene as seen in BGB. The fifth background palette of this scene acts as the “cellophane cover” over the game view.

Coloring a Scene in SGB Mode

To start, let’s enable color mode in our project, create a new scene, set a newly created palette to the scenes palette number 5 slot and see what happens. 

Here is our newly created palette:

And a scene with the above palette set to palette number 5’s slot within it:

The raw PNG background (left) inserted into our scene and shown in BGB (right).

If you look carefully, you can see that something is wrong with the color display in the image on the right. I have set the lightest tone in my palette to white, something BGB would have no trouble rendering correctly, and yet we have a very light green displayed in SGB mode in its place… something rather odd is happening here.

The answer to this riddle is a strange quirk in how the SGB handles the first color slot when displaying colors. In fact, it’s pulling the color in slot one of palette 7 in the scene! If you want an answer to why this happens, it’s best you get in contact with the developers of the Super Game Boy itself but fact is fact – and it’s something we must work with. Here is the same scene but I have set our logo palette to palette 7 in addition to palette 5:

Our GBSC logo scene as seen in BGB. This time with our logo palette set to palette 7 too. It now displays white, the intended color.

We have figured out the why and how’s of the SGB, but our journey into SGB mode doesn’t end here. Next, let’s take an in depth look into how we can color a scene with more than one palette!

Color Zones within Color Zones

To achieve more than one palette displayed at any one time in a scene, we are going to have to download the GB Studio Transfer SGB Packet Plugin by NalaFala (Yousurname). To set it up, create a folder titled “plugins” in the root of your project directory and drag and drop the “events” folder found in the downloaded plugin inside. You can now click the “+ Add Event” button and search for “Transfer SGB Packet” to use this new script (close GB Studio and re-open it if required). 

Let’s take a look at it’s parameters:

The Transfer SGB Packet parameters

Currently, this plugin only supports implementing a zone of color shaped like a rectangle but you can still achieve much with this. As the descriptions imply, clicking on any one or more of the checkboxes will enable you to color an area of the scene with a palette of your choice. It is important to note that the palettes available to us with this feature are limited to palette 5 to 8.

The parameters below set the area of the rectangle using the x and y coordinates of the tiles within the scene and will NOT go beyond the maximum length and height of the Game Boy screen. In other words, the maximum value of x and y is 19 and 17 respectively (the width and height of the Game Boy screen itself when split into 8 x 8 pixel tiles). 

Let’s create a new palette and set it to the 6th palette slot within our scene. In this way we can begin coloring the scene in more detail. In particular, we will color the Game Boy screen in the GBSC logo so it looks like the classic DMG colors, similar to the following:

The GBSC logo scene as seen in GBS3.0

Here is the palette I have created in order to accomplish the above when in SGB mode:

An approximation of the colors displayed on the DMG screen

Setting this palette to the 6th slot in our scene, our Background Palette set now looks like this:

Palette 5 set to the logo palette, palette 7 set to the same palette to make sure the SGB renders the white color correctly and Palette 6 for our additional “Game Boy screen” color

Now we can add a Transfer SGB Packet script in the ON INIT of our scene, making sure to create a rectangle that is colored using palette 6. In this case I have elected to color the rectangle inclusive of the x and y coordinate outlines by ticking the surrounding character line in addition to Inside surrounding area.

The Transfer SGB Packet script

Having exported a ROM and tested it in BGB, the outcome is as follows:

The outcome as seen in BGB

Hmm… again, we have a strange anomaly! While some of our green colors are now colored as intended, the yellow color of our dot matrix screen is a stark white. That’s right, the first color of palette 7 is being called to color palette 6’s first color too. This is the case for all palettes used in SGB mode and something that will need to be carefully considered during your planning phase.

Knowing this, we can now redesign our background PNG to suit all these limitations. The end result is this:

The final scene with multiple color palettes displayed, all within the limitations encapsulated in SGB mode. I wonder what happens when you press ‘A’…

To summarize:

  • SGB mode lays color over the Game Boy view, it does not technically color a GB Studio scene
  • The SGB Border must use a maximum of 16 colors
  • The SGB Border must contain a maximum of 256 unique tiles
  • By default, the palette 5 slot in any one scene is used to color that scene
  • Palettes 1 to 4 in any one scene cannot be used when in SGB mode
  • Palette 7’s first color slot will always render over any other palettes first color slot
  • All visual elements will be rendered with palettes 5 to 8 on the SGB, irregardless of actor palette settings

Having read this rather long guide on how SGB mode works, you might be thinking that there are a lot of weird quirks to consider when creating scenes for the Super Game Boy. And you’re not wrong. But at the same time, exploring this niche aspect of Game Boy development can be a rewarding experience for anyone who cares to walk this rarely trekked road. I certainly enjoyed implementing this feature when creating In The Dark, despite all the limitations.

Ultimately, SGB Mode is a wonderful extension to the already heavily limited process of Game Boy game development, and a road well worth traveling! If you want to check out the final build of the project described in this article, see how I got around the palette 7 issue (and find out what happens when you press A), the source code and ROM can be found here.

Thanks to NalaFala (Yousurname) for their help in the creation of this article.

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