Creating a Custom Title Screen for Yoshi's Island

Hey everyone! I decided to make this tutorial because the one currently linked in the FAQ is very outdated, and full of broken images which make it difficult to follow. This guide will show you how to create a custom title screen, convert it into tilemap and graphics data using SuperFamiconv, and insert it into the SMW2 ROM.

What you'll need
Image editing software
SuperFamiconv
ycompress
YY-CHR
HxD (or another hex editor)
A text editor
ASAR

Editing the Title Screen

First, you will need an image of the title screen tilemap to edit. To make things as simple as possible for this guide, I've provided a PNG of the fully constructed title screen tilemap below.


You may notice that the above image has a reduced colour palette compared to the title screen as it appears in-game. This is because the title graphics in Yoshi's Island are in a 2BPP (2 bits per pixel) format, meaning there can only be 4 colours per tile. The colour palette of the image is restricted in order to allow it to be easily converted to a 2BPP tilemap and graphics later on.

The colours in the tilemap image correspond to the colours in the title screen palettes as follows:
Grey is colour 00 (reserved for transparency)
Black is colour 01
Blue is colour 02
Yellow is colour 03

You may edit the image in full colour if you wish. Just make sure to keep the tile colour limitations and 8x8 tile grid in mind while working, and reduce the colour palette again before converting your image into a tilemap. Here are the colours that are available for each palette (not including transparency):


If you want to change the copyright text, you can use this font by Mattrizzle. The borders of each character should overlap by one pixel when assembled.

Lastly, there are some special regions of this tilemap that you should be aware of when editing.

The region highlighted in red is where the title screen's HDMA effect takes place. Any tiles placed here will wave periodically. In addition, colour 02 in palette 01 is replaced with orange exclusively in this region.

The region highlighted in blue is where the game masks out/draws the 100% bonus stars. Any tiles placed here will be overwritten when the title screen is loaded in-game. When creating your title screen, keep in mind that each star consists of the same 4 tiles, and that up to 6 of them are drawn in a row. Even if you don't use all 6, the locations for the remaining stars will still be masked out.

If you move the star graphics on your title screen somewhere else, you will need to change where this region is. More on how to do that later in the guide.

When you are satisfied with your title screen, save it as a PNG file.

Creating the Tilemap and Tiles

Now that we've created our title screen image, we'll be converting it into tile graphics and tilemap data. Here's a title screen that I've created as an example:


First, we'll be generating the tile graphics. Place your image in the same folder as superfamiconv.exe and enter the following line into the command prompt. (You can name the files however you like)

NOTE: If you get an error running this command, it means that your title screen contains too many unique tiles. One probable cause for this is that your tiles aren't correctly aligned with the 8x8 grid, causing a large number of extra tiles to be generated. You will need to adjust and/or redesign your title screen until the tiles are created successfully.

Next, we'll generate the tilemap data. Enter the following line into the command prompt.


Now we have our tiles and tilemap! But, there's still a little bit of work we have to do before we can insert them into the ROM.

Inserting the Graphics

Now we'll begin the process of inserting our tile graphics into the ROM. Open up MyTiles.bin using YY-CHR and set the format to 2BPP GB. Since we didn't specify a palette mapping when generating our tiles, the colours may have been set in the incorrect order. To check, load this palette file into YY-CHR and see if the colours match your original image. If they don't, we can easily fix them! Set the edit size to 128x128 and press CTRL+R to open the Replace Color menu.

That looks right!

Next, we'll extract the graphics data from our ROM. Place your ROM and ycompress.exe in the same folder and enter the following line into the command prompt.


Now open gfx.bin in a new YY-CHR window and set the format to 2BPP GB. Scroll down to CHR address 06A400 to find the title screen graphics. Set the edit size to 64x64 in both windows, copy & paste the graphics from MyTiles.bin into gfx.bin and press save.

Now we'll reinsert our graphics into the ROM. Enter the following line into the command prompt.

NOTE: I am using an unheadered ROM. If your ROM is headered, use 120200 instead.

Inserting the Tilemap

Before we can insert our tilemap into the ROM, we'll need to make some edits to it. This is because, while SuperFamiconv has set up the tiles in the tilemap for us, it hasn't set up the property bytes for the tiles.

The bits in the property byte are defined as follows:
vhop ppcc
Where v is the vertical flip but, h is horizontal flip bit, o is the priority bit, p is the palette number, and c is part of the tile ID. In the case of YI's title screen, the priority bit is always set, only the latter 2 palette bits are used, and the last two bits are always set, so the property byte looks more like this:
vh10 pp11

This means that we can simply break the property byte into its first and second digits. The first digit determines how the tile is flipped:

And the second digit determines the palette the tile uses:


Now open MyTilemap.bin using HxD (make a backup of it first, just in case). In the top toolbar, select View>Bytes per row... and set the number of bytes per row to 64.


You should see something like this:


Every first (even) byte is a tile, and every second (odd) byte is a property byte. We'll be going through the tilemap to set the property bytes manually. You may notice that some of the property bytes have values other than 00. This is because SuperFamiconv has set the flip bits for us. We can convert these as follows (where X is your desired palette digit):

Once you are done, make sure to save your edited tilemap.

Now open your text editor and paste the following code into a new file.

Save this as a .asm file. I'll call it title.asm.

Now place ASAR.exe, your ROM, title.asm and MyTilemap.bin into the same folder. Patch title.asm to your ROM using ASAR. You have now inserted your custom tilemap into the ROM.

Let's check out how it looks in-game!


If you want to change the colour palette a tile uses, or if you made a mistake and need to fix it, simply edit MyTilemap.bin and then re-apply title.asm.

Fixing the Bonus Stars

You're probably wondering what those weird junk tiles in the previous screenshot are. Simply put, this has to do with the way the game draws the bonus stars that appear here when you 100% a given world. The game masks these out using tile $22 of the title screen graphics, which is normally used as the blank tile. However, SuperFamiconv has made $00 the blank tile instead.

Likewise, if we load a 100% save file, we can see that the stars themselves are also using the wrong graphics.


To fix this, we'll be adding some additional lines to title.asm.

First, let's change the tile used to mask out the stars.


Next, let's fix the star graphics. We'll need the tiles for the upper left and lower left corners of the star. We can find this easily by checking our tilemap. For my title screen, $07 is the upper left tile and $0F is the lower left tile, respectively. Let's change the values at these addresses: (the low byte is the property byte to use and the high byte is the tile)


Finally, as I mentioned earlier, if you've moved the location of the stars on the title screen (like I have in this example) you'll need to change the region of the screen that gets masked out. (If you didn't move the stars, you can skip this step) The first value determines the tile in VRAM where masking begins for the top row of the stars, and the second is where masking begins for the bottom row. By default, these are $3E9A and $3EBA, respectively. To move right or left by one tile, add/subtract 0x0001 from these values. To move down or up by one tile, add/subtract 0x0020. In my case, I've moved the stars one tile to the left.


Here is the final result:


If you have any questions, feel free to ask them below.