Actionscript Tutorial: Add a Scrolling Tiled Background

In part 9 of the series we added the ability to define a level structure using a series of timed function calls. This works well for placing enemies on the screen, but is not so useful for drawing the background level. In this article we will add the ability to render a predefined tiled background.

Tiled backgrounds are made up of a handful of smaller repeated tiles arranged, in this case, in a grid. This approach has a number of advantages, but the biggest is that it reduces the memory requirements of the game. Using one single prerendered background image could conceivably take up several megabytes of memory per level. Of course using a prerendered background would give you the highest level of detail, but all the detail in the world doesn’t matter if the player clicks off the page because they are sick of waiting for the game to load. By contrast a tiled background will take up a fraction of the memory used by a prerendered background, and a good artist can still make some nice looking tiled backgrounds.

The first step in making a tiled background are the tiles themselves. I found a nice set of free tiled wilderness graphics from http://lostgarden.com/labels/free%20game%20graphics.html. The site also has another of other tiled resources sets which you may find interesting.

The next step is finding a level editor that will allows us to draw the levels through a graphical interface. Of course you could write your own (that’s another article series in itself), but luckily someone has already done the hard work for us. The TaT tile map editor from http://kotisivu.dnainternet.net/ttilli/tilemapeditor/download.htm will do the job nicely. It has a few nice features like layers and XML exporting that we will make use of.

And of course we need to add some code to render the tiled background within the game. First we need some way to hold the tiles background data. The TiledBackgroundDefinition class takes care of that for us. Lets look at the Actionscript code for that class now.

package

{

public class TiledBackgroundDefinition

{

public var tiles:Array = null;

public var tileScrollRate:Number = 0;

public var tileWidth:int = 0;

public var tileHeight:int = 0;

}

}

The tiles property is a multidimensional array that will contain references to the GraphicsResources that will be used to draw the background. When populated the tiles array will contain a dimension for the layers, then the rows and then finally the columns. For example tiles[1][4][5] would point to the GraphicsResource for the sixth column (tiles[1][4][5]) of the fifth row (tiles[1][4][5]) of the second layer (tiles[1][4][5]) – remember that arrays have zero based indexers. The tileWidth and tileHeight properties define the size in pixels of the tiles that make up the level. And tileScrollRate defines the speed at which the tiled level scrolls underneath the player to give the illusion of movement.

Now that we have a way to define a tiled background we need a place to store the definitions. The LevelDefinitions class will be used to store these definitions. Lets take a look at the new Actionscript code for the LevelDefinitions class now.