Note

• This tutorial will not teach you how to design. That's your job buddy-o! :)
• It's recommended to edit the title screen last, since your main priority in creating a big hack is changing gameplay. If you aren't making a big hack, ignore this.

List of files and folders used:

• TitleScreen contains main folders.
• Background has the background frame and palette frames.
• Chars are the letter sprites and palettes that slide into frame.

Title Screen

The title says it all...

(By BigSharkZ)

(By Crafty++)

(By Gabbi)

Getting started

Open your preferred sprite/image editing software (in this tutorial, it's GraphicsGale) and open the "Reference.png" file inside the "background" folder. This is the only frame you should care about when first making changes. Since ver 4.1, more VRAM space is available for unique tiles.

(8x8 grid for mini tile reference.)

---

Background

1. Once you have the Reference.png open, you can start designing and changing its colors. (Just don't make any letters or characters yet.) Whatever you wanna do.
2. When you're satisfied with your result, ask yourself:

• Do I want my title screen to flash?
• Do I want my title screen to have sliding letters?
• Do I want my title screen to be skippable?

These are all important questions to ask because they all affect how your title screen will present itself.

TODO: explain more clearly how all the other background images will only be used for their palettes / that everything that displays in-game is a palette swap of Reference.png (no individual graphics edits to them are necessary/are reflected in-game, only palette edits). This will also involve explaining CoilSnake's "Frame doesn't match reference" warnings

Chars

• Open the "Chars" folder and "Initial.png." In vanilla EarthBound, each letter fits into a 24x48 pixel bounding box in a grid. You can either remove all the letters by drawing over every pixel in 00.png with the first color in the palette (making the letter sprites completely transparent, so you can have all your letters on the background instead), or you can change the letters in that image to your liking.

TODO: similar to the backgrounds and Reference.png, explain how all Chars images are treated as simple palette swaps of 00.png

Positions of the Letters within the PNG

A 24x48 pixel box for each sprite is a bit of a problem if you want to recreate the title screen from Mother 2, with its square letters, big earth, and wider-than-it-is-tall "Gyiyg Strikes Back" subtitle. What can be done?

In the "Chars" folder, you may have noticed a file called "positions.yml." This file describes to CoilSnake how to cut up the PNG files into rectangles to create a "sprite" that can be moved around and positioned in-game.

Let's take a look at the definition for the 5th letter in the vanilla game, the "H":

4:
  height: 48
  top_left_offset:
    x: -12
    y: -24
  unknown: 12
  width: 24
  x: 96
  y: 0

• x and y refer to the position, in pixels, of the top left corner of the letter's graphics within the PNG. For the H, it's (96, 0).
• width and height describe how wide and tall the rectangle of the letters' graphics are. All of the letters in vanilla EarthBound have a width of 24 and height of 48. Together with x and y, this tells you everything about the bounding rectangle of the sprite that you need.
• top_left_offset: This describes the "anchor position" of the sprite, which decides what happens when you try to set its position from within a movement script. Imagine that you want to put a letter right in the middle of the screen. In a movement script, you'd probably do that with m_set_xpos(128) and m_set_ypos(112), because those coordinates are half of the SNES's resolution (256x224). top_left_offset describes how much to move the top left corner of the letter down and right from the specified movement script coordinates to properly position the sprite. (If you get rid of the negative signs, then you can think of (12, 24) as a position within the letter's bounding rectangle. That position will have the pixel that gets put at (128, 112) on screen.) All of vanilla EarthBound's letters are set up to anchor letters' positions to the center of their respective bounding rectangle.
• unknown: Controls other aspects of the sprite, like palette ID/priority/flipping setting, most likely. (TODO: confirm this)

CoilSnake currently doesn't allow adding more than 9 sprites to positions.yml, but this may change in the near future.

Movement of the sprites

If you want to change how/where all of these sprites appear in the actual rendered title screen, and how/when they flash and change colors, that's handled by movement scripts. For most simple title screen edits in EarthBound's style, you can use JTolmar and SupremeKirb's Edit the EarthBound logo's letters' movement script on the CCScript Library and just mess with the positions and speeds until you get a good result. (You can also use that script to just write completely custom movement scripts to animate the letters and palettes of the title screen however you want.) This tutorial doesn't include any advice for using those right now; see the instructions in the script itself and in the CCScript Library listing for more information.

Patches

Add these to a .ccs file in your ccscript folder, with an import asm65816 at the top of the file. They'll be applied automatically when compiling your ROM. (You can download asm65816.ccs on the CCScript Library.)

• Gas Station Skip (Disables Letter Slide Animation) - ROM[0xC4DB33] = JMP (0xDBF9)
• To keep the Letter Slide Animation, add this - ROM[0xc3f3d0] = STZ_a (0x9F75)
• Attract Mode Skip - ROM[0xC422E4] = "[09]"