Gameboy Programming: Sprites

In this tutorial I am going to look at one of the most important aspects of creating a game. Sprites! Here we will show the tools to create and animate a simple sprite on the Gameboy. With this in your toolset you will be well on your way to making some great games!

Using the Gameboy Tile Designer

I’ve been creating sprites by using a handy utility called The Gameboy Tile Designer. It’s fairly simple and allows you to choose a colour for your left mouse button and right button to begin paining to the screen.

You can download this utility here.

When you unzip it and open it you will see the following screen

To assign a colour to a mouse button, have a look at the bottom of the screen. L stands for your left mouse button and R is your right mouse button. Click either and a colour and you can begin to create a design. For this tutorials purposes I have created a basic face.

In fact to show some animation. I have created two faces. On the right of the screen, indicated with the red circle you can see numbers. These numbers indicate the different sprites you can create – similar to a Sprite Sheet idea. So in the Second column I have created a slightly different sprite.

These are basic designs but with some work you can do so much more with this utility!

Exporting our Sprite

After creating our artistic masterpiece we need to export this in a format that the Gameboy Development Kit understands. Go to File->Export To

Choose your Filename and path that you want to save your sprite to. Ensure that you save it as type GBDK. The label is important as this is what the code will use to reference the sprite. As we are exporting two images we need to set the From 0 to 1.

One you click the OK button, you should see a header file and a code file in your chosen folder.

Creating the Code

Make sure that the two Sprite files are in the same folder that you are going to save your code in. I have called my .c file Main and have created a Make file accordingly.

Contents of the Make file
Contents of the Main file

We use the includes that you should be familiar with at the top of the screen as well as including the sprite code file – here called SmilerSprite.c. Within this file contains the graphical data in the form of an array and also the label – Smiler.

In our main function we call a method from the Gameboy development kit to load our data from smiler – our variable in the array. Load from the start of the array 0 and load two tiles – 0-1.

Next we load the first Sprite into memory, remember we have two sprites in the array so we want the first sprite contained in it (arrays are zero based).

We then Move the Sprite to a location on the screen.

Finally we make a call to show the sprites on the screen.

This is the code we need to show our first sprite on the screen. Run your make file and place the appropriate gameboy file in your emulator and run and you should see :

Congratulations this is a major step forward in your game development career.

Animating the Sprites

Let’s take this one step further and begin to animate the two sprites we exported into the array.

I have highlighted the changes to our code that we need to make.

Firstly we need a variable to hold which sprite we are currently looking at – this is currentspriteindex

We then create a game loop – which is simply an infinite loop that never ends. The while loop will always run because it is always true (1 = true).

Within our if / else statement we switch between the numbers 0 and 1, these relate to our two sprites in the array. 0 = Happy face, 1 = Frowning face.

We then make another call to the set_sprite_tile and pass in the current sprite

We then use a built in function to delay this transition each time by 1000 milliseconds.

When you run the make file again and load the file into the Gameboy emulator you should see the transition animation.

Leave a Reply

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

You are commenting using your 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