website statistics

Frogger Tutorial part 1

This tutorial will show you how to create a clone of the old “Frogger” game for the Gameduino. Here is the what the finished product looks like - a playable version of the arcade classic, running on the Gameduino:

It assumes you have an Arduino and Gameduino, with the Arduino “Sketch” development library loaded, as well as the Gameduino library The GD library.

Starting with the graphics, we are lucky that GaryCXJk has made a sprite sheet of all the original Frogger game graphics for us to use:

../../_images/everything.png

There is even a complete background screen for the game.

To get the graphics into the Gameduino, we’ll need to slice it up into parts for all the different animated elements in the game.

I do graphics preparation working on .png images using Gimp, because .png is lossless and handles transparency, and because Gimp is open source and has good features for pixel editing.

Converting the graphics

Gameduino has two types of graphics: background and sprites. The background is good for static things, sprites for the animated stuff. So with Frogger, the natural split is to put the road and river in the background, and all the moving gameplay things as sprites. Spending a little time in Gimp moving things around gives a background image, which is 224 pixels wide by 256 pixels high:

../../_images/froggerbg.png

and a sprite sheet, with all the sprites as 16x16 pixel images, arranged on a grid:

../../_images/sprites.png

Feeding these through the online conversion tools at http://gameduino.com/tools gives two sketches, the background:

http://gameduino.com/results/5f30d40b/

Which loaded on the Gameduino gives this screen:

../../_images/frogger0.png

and the sprites:

http://gameduino.com/results/ceb9b4e1/

which gives this screen when run on the Gameduino:

../../_images/frogger1.png

Creating the game sketch

The next step is to merge these sketches into one, which will be the beginning of the actual Frogger game.

To merge the two sketches:
  1. open the two sketches side-by side
  2. use the tab menu to add a new tab to the background sketch, call it sprites.h
  3. copy all the code from the old sprites.h tab and paste it into the new one
  4. take the display code from the sprite’s setup and add it at the end of background setup

The merged sketch code should look like this:

#include <SPI.h>
#include <GD.h>

#include "froggerbg.h"
#include "sprite.h"

void setup()
{
  GD.begin();
  for (byte y = 0; y < 32; y++)
    GD.copy(RAM_PIC + y * 64, froggerbg_pic + y * 28, 28);
  GD.copy(RAM_CHR, froggerbg_chr, sizeof(froggerbg_chr));
  GD.copy(RAM_PAL, froggerbg_pal, sizeof(froggerbg_pal));

  GD.copy(PALETTE16A, sprite_sprpal, sizeof(sprite_sprpal));
  GD.uncompress(RAM_SPRIMG, sprite_sprimg);

  // For show, randomly scatter the frames on the screen
  GD.__wstartspr(0);
  for (byte anim = 0; anim < SPRITE_FRAMES; anim++)
    draw_sprite(random(400), random(300), anim, 0);
  GD.__end();
}

void loop()
{
}

Compiling and running this sketch gives the background, with the sprites randomly placed.

../../_images/frogger1.png

Now the gameplay coding can begin... in Frogger Tutorial part 2.