Building A Generalized Flex Game Control Part 4 – TileSheet class

In part 1, I discussed and mused over what parts of the MVC pattern (if
any) to implement in my Flex game control.

In part 2, I dug down into my thoughts on the rendering engine and how I
was unable to get anything displayed on the screen before the pipes
burst at my house and I was forced to continue writing this from a
Hotel (now still).

In part 3, I finally got the code of the rendering engine working (not
completely by any means, but working satisfactorily.

In this forth part we will dissect the TileSheet class. This class is the
basic building block for any game made with this engine. It is used to describe
the tile sheet attributes for a particular png file that can be used to fuel the
blitting engine. It takes a BitmapData object as its first parameter, as well as
the width and height of the entire tile sheet and the width and height of a
single til

Before we go any further, why don’t we look at my progress so far with the
reference app that I am using to help test and create the general engine. We’ll
then show the entire class code and finally discuss how the reference app makes
use of the TileSheet class.

Reference application so far (not much, but I’ll explain what we are seeing
later)

/downloads/blog/2009_flex_game_control/part4/Microrobotmaze.swf

The code for the TileSheet Class

[cc lang=”javascript” width=”550″]
package com.bitrocket8.display{
import flash.display.BitmapData;

/**
* …
* @author Jeff Fulton
*/
public class TileSheet{
private var _sourcebitmap:BitmapData;
private var _width:int;
private var _height:int;
private var _tilewidth:int;
private var _tileheight:int;
private var _framesperrow:int;

public function TileSheet(sourcebitmap:BitmapData,width:int, height:int, tilewidth:int, tileheight:int ){
_sourcebitmap = sourcebitmap;
_width = width;
_height = height;
_tileheight = tileheight;
_tilewidth = tilewidth;
_framesperrow = int(_width / _tilewidth);
}

public function getsourcebitmap():BitmapData {
return _sourcebitmap;
}

public function setsourcebitmap(val:BitmapData):void {
_sourcebitmap = val;
}

public function getframesperrow():int {
return _framesperrow;
}

public function getwidth():Number {
return _width;
}

public function setwidth(val:Number):void {
_width = val;
}

public function getheight():Number {
return _height;
}

public function setheight(val:Number):void {
_height = val;
}

public function gettilewidth():Number {
return _tilewidth;
}

public function settilewidth(val:Number):void {
_tilewidth = val;
}

public function gettileheight():Number {
return _tileheight;
}

public function settileheight(val:Number):void {
_tileheight = val;
}
}
}
[/cc]

This is a pretty simple class. It is basically a holder for information about
a BitmapData object plus the information needed to use it as a Tile Sheet for
blitting from. Also, we have some access methods for getting and setting the
attributes. After
completing quite a few games using blitting and tile sheets in AS3, I always
found myself painted into a corner when it came to the tiles the represent the
objects in the game. Too often I needed to change the look of the player for
a few seconds or add an overlay on top. These operations always necessitated custom code that
needed to be shoe-horned inline into the render method of my player object based
on some sort of switch or combination of switches.

To combat that problem I started this Generalized Flex Game Control with the
sole purpose of making it much easier to change the state of an object’s look
with out a huge set of in-line game specific code. So, for the above reference
app, I first defined the states for the button GO button in a png.

I decided that the first two frames would alternate when the mouse is “off”
of the button. The 3rd, yellow is the “over” state and the 4th, white is the
“click” state.

This TileSheet is embedded into a Main game control view state called
ScreenTitle. (I will delve into this and all of the other classes in detail in
future installments).   In Flex, the embed looks like this:

[cc lang=”javascript” width=”550″]
[Embed(source = “../assets/titlescreen.png”)]
private var titlescreenPNG:Class;
[/cc]

Later in the ScreenTitle class, we instantiate the TileSheet with this code:

[cc lang=”javascript” width=”550″]
private var _gobuttonBitmapSource:Bitmap;
private var _gobuttonTS:TileSheet;
_gobuttonBitmapSource = new gobuttonPNG();
_gobuttonTS = new TileSheet(_gobuttonBitmapSource.bitmapData, 400, 50, 100, 50);
[/cc]

Now our TileSheet is ready for use. In the next part of this series we will
explain the BlitContainer class as it currently stands and go into detail on how
the 3 button states are created, updated and rendered.

When you click the [Go] button in the above reference application, you will
be taken to the first game screen in Micro Robot Maze. All of the squares in
this grid are blitted from a single TileSheet also. This grid makes use of some
sub classes of my BlitCanvas class that add in the ability for them to pass
their ID back in a custom click event. In that way, we can easily tell which
square was clicked. Anyway, that is getting ahead of the current lesson. This
was a the direst short tutorial in a series of digestible bites that we will
take while developing this engine over time.