Skip to main content

Displaying a single background tile

WORK IN PROGRESS!

This page is not quite ready for visitors yet. Please check again another time.

  1. First we are going to design some graphics. Open your favourite graphics tool (e.g. Aseprite) and create a bitmap of 16 pixels wide by 8 pixels high. Select an indexed palette - this is important. Select a black background, or once your bitmap is created, fill the whole area with black. It might be easier if you enable gridlines at 8x8 spacing. In Aseprite you can do this from the “View/Grid/Grid Settings” menu. Aseprite can load the Sega Master System palette, if you click the presets button near the top left of the screen: Just type "Master" in the search box and you'll find it.

  2. Now just in the right-hand half of the bitmap we are going to draw a graphic to display in our game. Make sure you keep your graphic inside the second 8x8 set of pixels - leave the first 8x8 half totally black. Here’s an example graphic I drew — a coin.

  3. Before saving the file, you need to reduce the palette down to 16 colours or fewer. Here’s one way to do it in Asesprite:

  4. Click the palette Options button, which is near the top left of the window and has three horizontal lines on it

  5. Choose “New Palette from Sprite” which should be the last option on the menu.

  6. Select “Create new palette” and set the colour count limit to 16

  7. Make sure “Create entries with alpha component is unchecked, now click “OK”

  8. After this, you might find your image has disappeared or looks strange. Click the “Remap Palette” button to fix it.

  9. Now make sure that the first colour is black. In Asesprite, you can fix this by clicking the black colour, and then dragging it by its border. Drag it so that it’s the first colour, and then press “Remap Palette” again.

  10. When you've drawn your symbol, save the asesprite file and give it the name background.asespite into the assets folder inside your game project folder. You may need to navigate around to find your game folder the first time you save, but after that Asesprite should remember where you are.

  11. After saving the .aseprite file, now also export the file to a .bmp by going to the "File/Export..." menu option, or pressing Option-Shift-Cmd-S. Use all the default settings, but make sure you change the file type to .bmp and that your file has a .bmp, and then save it into the same assets folder as before.

  12. Back in VS Code we are going to turn the artwork into code. In the terminal panel, run: sms make assets This should create some new files, something like src/assets.generated.h and src/bank1.generated.c. Take a look at them if you like, they contain the data for your image in a format that the c programming language can understand!

  13. Now to actually write some code! Open the src/main.c file, then locate the comment that says // game initialization here: it should be on around line 13.

  14. You can delete that comment if you like, and then in its place type the following code:

      // load the background tiles & palette
    SMS_loadBGPalette(background_palette);
    SMS_loadTiles(background_tiles, 0, background_tiles_size);

    // clear the screen by writing the blank tile to all 768 tiles in the screen map
    SMS_setNextTileatLoc(0);
    for (int i = 0; i < 768; i++)
    {
    SMS_setTile(0);
    }

    // display a token tile near the bottom of the screen
    SMS_setTileatXY(15, 18, 1);

    // turn the display on
    SMS_displayOn();

    Try to keep the formatting nice and neat by matching the indentation of the code above and below it. It should be two space characters, except inside the for loop, when SMS_setTile(0); is indented by four space characters.

    The indentation doesn't matter, but it makes it more readable.

    Also try to match all the other spacing that I use, and remember to end your lines with semicolons!

  15. Build the game again by running sms make from the terminal. If you see any errors at this stage, you make have mistyped something. Look carefully again. If you undo all your changes and sms make starts working again, then it must be something you typed. Try adding one line at a time and rebuild between each change to pin down where you might have gone wrong. If you still can't figure it out, ask for help.

  16. The game should automatically reload in Emulicious. If not, make sure that you enabled the "File/Reload ROM on Change" menu option and reload the ROM manually if necessary. Do you see your artwork displayed on the screen?

    If not, something has gone wrong – ask for help!