Creating Tiles from Images

It’s impossible to make a game by creating tiles by hand. What we really want to do is use our knowledge of the Video Display Unit to bring in some pixel art and display it on the screen. This is the art of creating tiles from images.

First thing we need to do is grab an image – I have a picture of our wonderful moon below. Simply Right-Click and choose Save As. Place this image in a folder in your project called res. Call it moon.png.

[This image was kindly provided by Danibus]

The Code

In our new C project file, we begin with our usual import to the Genesis Development Kit and we also need to add a new include statement to a resources header file. We will be creating this file later.

The #includeresources.h” line will for the SDGK to find the .res file (which we shall create) and generate the header file referencing it (if it does not exist). The SDGK will process this image to create tiles from it.

Lets go through this code line by line.

u16 ind; This creates a variable called ind which is short for index. This variable will keep track of what is in the first free tile of VRAM. Each time we load an image, we increase this by as many tiles as we need to load the image into memory.

By doing this we do not destroy the tiles of other images that we have loaded previously. These tiles are loaded consecutively into VRAM.

The SGDK keeps a count of how many tiles each image occupies. If an image occupies ‘x’ tiles then the index will be incremented: ind = ind+’x’

The ind does not have to be 0 (this is important to note for experienced C coders with knowledge of garbage collection). The first thing we need to do is initialise this index. Sometimes you may see code like ind=0; or ind=1; This code will make us start to insert the tiles of the image into VRAM starting from either the first or second position (remember arrays are 0 based in C) of the VRAM.

In this code I use – ind=TILE_USERINDEX;

This reserves the first 16 tiles of the VRAM and places the tiles colour palette in these positions.

We then load the image into VRAM and show it onto the screen. This is done :

  • In Plane A
  • With Palette 0
  • No Inversion (horizontally or vertically)
  • In position 3,3 – remember this is in tiles not pixels
  • We increase the index (ind)

The Resources File

Before we can run this program we need to create a resources file. As mentioned above this is where the program knows what images to use. In your project folder, create a text file called resources.res. Open this file and type:

This defines the moon variable, which we use in the main program. We also tell the SGDK what the resource is called and where it is within the project. In this case its within a folder called res. The zero indicates that we will not use data compression.

When you begin to compile this code several things will not happen in regard to the resources file.

  • A ‘resources.h‘ file will appear in the RES folder.
  • In the OUT folder (which will be created when compiling the project). A folder called Res will appear. Inside this we shall find a file called ‘resources.o‘ which is the bitmap processed by the SGDK
  • Of course the ROM file will also be generated by the SGDK as well and placed in the OUT folder.

Now lets compile and run our code to generate the ROM. When you run it on your emulator you should see the following:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s