Tutorial 3: Gamepad Controls and Sprite Manipulation

This tutorial will cover interpreting input from a gamepad and movement of graphics on the screen. This is where our game becomes more of a game than just a picture on the screen.

Fix Your Map

You should have noticed the white border on the right and bottom of the screen. White is the first tile in your tilesheet and that is used as the default tile to draw when the screen is cleared. The white is there because the map is not large enough to completely fill in the screen. We will need to modify the image and convert it again. We will also need to modify the convert.xml (gconvert).

First, let's fix the convert.xml file. look for this line:

<map var-name="screen1" left="0" top="5" width="28" height="26"/>

It should look like this instead:

<map var-name="screen1" left="0" top="6" width="30" height="28"/>

We changed the dimensions of the map and changed the 'top' part because we will be adding a row.

Now we need to adjust the image. You will need to add another 16x16 row of black squares and add another 16x16 column of width. Here is how I do it:

1. Open your image in MS Paint.
2. Add another 16 pixels of height and width. Press CTRL+E and add 16 to both the width and height.
   1. Now you have extra white space.
3. Now, directly below the sprite tiles move the stuff on the bottom down into the new white space.
4. The new row created will be white. Make it black.
5. Now, copy exactly 16 pixels of width and the full height of the map. Paste into the white space on the right.
6. Your image should be 240x272 pixels. Save the image and close MS Paint.
7. Open up The GIMP and drag the file in. It should open right away.
   1. You will need to apply the Uzebox color palette again.
   2. Click Image > Mode > Indexed.
   3. Choose "Use custom palette"
   4. Uncheck the checkbox for "Remove unused colors from colormap".
   5. and then click "Convert".
   6. Now click File>Overwrite untitled.png.
   7. Close the GIMP and choose "Discard Changes". Close the GIMP.

Basic Binary and Bitwise Math

Representing numbers differently

When you request the current state of the controller, a value is returned. If you were to display this value on the screen you may see a decimal representation of the number. For example, if you are holding buttons B and Y then you would get a response of 3. However, 3 can be represented in binary as 00000011. Both binary 00000011 and decimal 3 have the same value. They are just represented differently.

The concepts that are about to be covered make more sense in binary than in hexadecimal or decimal. Bitwise math often uses Logic Gates.

Logic Gates

Bitwise NOT

A bitwise NOT will flip the state of a bit. If the value was a 0 then it becomes a 1. If it was a 1 then it becomes a 0. This is the most simple logic gate. There is only one input and one output.

Bitwise AND

There are two inputs in one output. Both inputs must be a 1 for the output to have a 1. Any other combination of inputs will result in a 0 out. All 1's in give a 1 out.

Bitwise OR

There are two inputs in one output. Either input must be a 1 for the output to have a 1. Both inputs can be a 1 and the output would be a one. Any 1 in gives a 1 out.

Bitwise XOR

There are two inputs in one output. ONLY ONE input can be a 1 for the output to have a one. This gate is very much like an OR gate but the output is only a 1 if only one of the inputs are a 1.

Basic Character Movement

• • How to read from the gamepad?

http://uzebox.org/wiki/index.php?title=Tips:Controller_Event_Handling

• • Do something based on gamepad input.
    • Adjust the graphics
  • Make it so the Link image can move around.

Animated Character Movement

• Walking frames
• Changing direction

Collisions

• Link can walk through walls. To the Uzebox, the walls are just graphics. You have to instruct the Uzebox to prevent Link from walking into the wall graphics.

References / Links: • Uzebox Wiki: http://uzebox.org/wiki/ o The Uzebox wiki is the official source of documentation. The section • Uzebox download: https://code.google.com/p/uzebox/downloads/list o The official location to find Uzebox sources and the emulator. Also can find the development download that also includes sourcecode to many games. • Uzebox Forums: http://uzebox.org/forums/ o Updated more often that the Wiki. Discussions of many Uzebox aspects can be found here. • Hello World: http://uzebox.org/wiki/index.php?title=Hello_World o The basics of a new user’s first program. • GIMP Palette for the Uzebox: http://uzebox.org/forums/viewtopic.php?f=6&t=396 o This forum post describes the Uzebox color palette. • Tile Studio Tutorial: o Part 1: http://www.uzebox.org/forums/viewtopic.php?f=6&t=109 o Part 2: http://www.uzebox.org/forums/viewtopic.php?f=6&t=110 • Fuzebox-Hello Tile: http://www.ladyada.net/make/fuzebox/hellotile.html o Explains what a tile is and why they are used. Most-Common APIs for Uzebox: • Function SetTileTable: http://uzebox.org/wiki/index.php?title=Function_SetTileTable o void SetTileTable(const char *data); o Defines the tile set to use for rendering the background. • Function SetSpritesTileTable: http://uzebox.org/wiki/index.php?title=Function_SetSpritesTileTable o void SetSpritesTileTable(const char *data); o Defines the tile set to use for rendering sprites. • Function InitMusicPlayer: http://uzebox.org/wiki/index.php?title=Function_InitMusicPlayer o void InitMusicPlayer(const struct PatchStruct *patchPointersParam); o Initializes the music engine and defines the patch set to use to play song and sound effects. This function must be called before playing songs or effects. • Function DrawMap2: http://uzebox.org/wiki/index.php?title=Function_DrawMap2 o void DrawMap2(unsigned char x,unsigned char y,const char *map); o Draws a rectangular map pointed to by *map at the specified coordinates. Maps are char arrays in which the two first bytes respectively specifies the width and height of the map. These function expects the data to be located in flash (PROGMEM). • Function SetTile: http://uzebox.org/wiki/index.php?title=Function_SetTile o void SetTile(char x,char y, unsigned int tileId); o Draws a tile in vram at the specified location. You need to first set the tile set to use with SetTileTable(). • Function Fill: http://uzebox.org/wiki/index.php?title=Function_Fill o void Fill(int x,int y,int width,int height,int tile); o Fill an arbitrary sized, rectangular region using the specified tile index. • Function MapSprite: http://uzebox.org/wiki/index.php?title=Function_MapSprite o void MapSprite(unsigned char startSprite, const char *map); o Convenience function that uses a map to draw big sprites (composed of multiple 8x8 sprites). It assigns map indexes to sprites indexes and re-positions the sprites to tile them using the width and height specified in the map. o NOTE: Drawing a 2x2 mega-sprite will take up 4 sprites. If this is sprite 0 then it would take up sprite 0, 1, 2, 3. • Function MoveSprite: http://uzebox.org/wiki/index.php?title=Function_MoveSprite o void MoveSprite(unsigned char startSprite,unsigned char x,unsigned char y,unsigned char width,unsigned char height); o Convenience function to move a group of aggregated sprites. The position of all sprites are updated relative to the x and y parameters and the specified width and height. o NOTE: MoveSprite has pixel precision and thus can position sprites with much finer granularity than SetTile positions tiles. • • ClearVram uses the first tile to fill the entire screen.