Flash game development with flex and ActionScript (No. 10)

In Part 10 of the series we add the ability to display 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 CILS. 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 has CES the memory requirements of the game. using one single prerendered background image cocould conceivably take up several megabytes of memory per level. of course using a prerendered background wocould 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 cocould 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.

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.

 

 

 

Tiledbackgrounddefinition.

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 in references to the graphicsresources that will be used to draw the background. when populated the tiles array will contain in a dimension for the layers, then the rows and then finally the columns. for example tiles [1] [4] [5] wocould point to the graphicsresource for the sixth column (tiles [1] [4][5]) Of the th 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 entire sion 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.

 

Leveldefinitions.

Package

{

Import flash. Geom .*;

Import flash. utils .*;

Public class leveldefinitions

{

Protected Static Var instance: leveldefinitions = NULL;

Protected var leveldefinitions: dictionary = New Dictionary ();

Public var leveltilemaps: dictionary = New Dictionary ();

Static public function get instance (): leveldefinitions

{

If (instance = NULL)

Instance = new leveldefinitions ();

Return instance;

}

Public Function leveldefinitions ()

{

}

Public Function addleveldefinition (levelid: int, element: leveldefinitionelement): void

{

If (leveldefinitions [levelid] = NULL)

Leveldefinitions [levelid] = new array ();

(Leveldefinitions [levelid] AS array). Push (element );

Leveldefinitions [levelid]. Sort (leveldefinitionelement. Sort );

}

Public Function getnextleveldefinitionelements (levelid: int, lasttime: Number): Array

{

VaR returnarray: array = new array ();

VaR nexttime: Number =-1;

If (leveldefinitions [levelid]! = NULL)

{

For each (VAR leveldefelement: leveldefinitionelement in leveldefinitions [levelid])

{

If (leveldefelement. Time> lasttime & nexttime =-1)

{

Returnarray. Push (leveldefelement );

Nexttime = leveldefelement. time;

}

Else if (leveldefelement. Time = nexttime)

{

Returnarray. Push (leveldefelement );

}

Else if (leveldefelement. Time> nexttime & nexttime! =-1)

Break;

}

}

Return returnarray. Length = 0? Null: returnarray;

}

Public Function getnextlevelid (levelid: INT): int

{

If (leveldefinitions [levelid + 1] = NULL) return 0;

Return levelid + 1;

}

Public Function startup (): void

{

Gameobjectmanager. instance. addcolpolicingpair (collisionidentifiers. Player, collisionidentifiers. Enemy );

Gameobjectmanager. instance. addcolpolicingpair (collisionidentifiers. Enemy, collisionidentifiers. playerweapon );

Gameobjectmanager. instance. addcolpolicingpair (collisionidentifiers. Player, collisionidentifiers. enemyweapon );

Definelevel1 ();

Definelevel2 ();

}

Public Function Shutdown (): void

{

}

Protected function definelevel1 (): void

{

VaR level1tiles: tiledbackgrounddefinition = new tiledbackgrounddefinition ();

Leveltilemaps [1] = level1tiles;

Level1tiles. tilescrollrate = 25;

Level1tiles. tileheight = 40;

Level1tiles. tilewidth = 40;

Level1tiles. Tiles =

[

[

[ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1]

...

, [ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1, ResourceManager. greengraphicsid1]

]

,[

[Null, null]

...

, [Null, ResourceManager. greengraphicsid62, ResourceManager. greengraphicsid63, ResourceManager. greengraphicsid64, null, ResourceManager. greengraphicsid48, ResourceManager. greengraphicsid49, null, null]

]

];

Leveldefinitions. instance. addleveldefinition (

1,

New leveldefinitionelement (

4,

Function (): void

{

For each (VAR xpos: int in [1, 150,350])

{

(Enemy. Pool. itemfrompool as enemy). startupbasicenemy (

ResourceManager. smallblueplanegraphics,

New Point (xpos,-ResourceManager. smallblueplanegraphics. bitmap. Height ),

55 );

}

}

));

...

}

Protected function definelevel2 (): void

{

...

}

}

}

 

We have added one new property, leveltilemaps, which is a dictionary used to map tiledbackgrounddefinitions to levelid's (much like the leveldefinitions property we added in Part 9 ).

In addition we have also added two new functions: definelevel1 and definelevel2. these functions exist as a way of separating out the code used to define separate levels, which as you can see gets quite verbose with the new tiled background definitions. inside these functions we create one tiledbackgrounddefinition object, initialise its properties and then assign it to the leveltilemaps property.

When you create a level with tat you get two files that are important for each level: the tileset. XML (which defines the individual tiles that make up a level) file and the yourlevelname. XML file (which defines how the tiles have been laid out to make a level ). it's the data from the yourlevelname. XML file that we put inside the tiles array.

 

You may be wondering how we went from the XML file created by the tat editor to a multidimensional array. the short answer is that I cheated and wrote another application that takes the XML from tat and converts it into the ActionScript code that creates the array you see here. the reason why I didn't just parse the XML inside the application directly is much the same reason as why I choose not to define the level structure in XML: because parsing XML and converting string references to object references is a tedious process, and in this case writing an application to convert the XML to ActionScript was easier. while I won't go into the code for the conversion application (it was a very quick and dirty program) you can download it from the SourceForge SVN.

The second XML file created by the tat editor defines the individual tiles that make up a level. using the same application I mentioned abve we have converted that XML data into the matching ActionScript code that embeds the images and then creates the matching graphicsresource objects in the ResourceManager class. this new code is vert repetious, so I will only show a fraction of the new resource definitions here.

 

ResourceManager. As (sample of New Code)

[Embed (Source = "../Media/green26.png")]

Public Static Var greenid65: class;

Public Static Var greengraphicsid65: graphicsresource = new graphicsresource (New greenid65 ());

 

[Embed (Source = "../Media/green5.png")]

Public Static Var greenid11: class;

Public Static Var greengraphicsid11: graphicsresource = new graphicsresource (New greenid11 (), 1, 1, new rectangle (0, 0, 40, 40 ));

Public Static Var greengraphicsid12: graphicsresource = new graphicsresource (New greenid11 (), 1, 1, new rectangle (40, 0, 40, 40 ));

Public Static Var greengraphicsid17: graphicsresource = new graphicsresource (New greenid11 (), 1, 1, new rectangle (0, 40, 40, 40 ));

Public Static Var greengraphicsid18: graphicsresource = new graphicsresource (New greenid11 (), 1, 1, new rectangle (40, 40, 40, 40 ));

 

This code is the same as other resource definitions, with the exception of a new parameter passed to the ResourceManager in some cases. this is to accommodate what tat refers to as "structures"-pictures that have been added to the level that are larger than the tile size. so for example a tile may be 40x40 pixels, but a tree image might be 40x80 pixels. in this case the tree image wocould be referenced as two separate images by the tile definition, one tile being the top of the tree and the second being the bottom. by allowing the graphicsresource to reference the same area we can easily reference the same tile areas.

Now that we have a way to define and store the tiled background definitions it's time to create a class that can read that data and actually draw the level to the screen. for that we create the tiledbackground class. lets look at that ActionScript code now.