Flash Games in Flex Part 2 – World Builder

Posted on September 21, 2009 by Tony Fendall.
Categories: AIR, Adobe, Flex, Gaming.

Since my last post I have continued working on little ‘cat herding’ game as a way of learning about how a simple 2D game engine works.  It quickly became apparent to me however that I was going to need a tool to help me define levels for the game as manually typing out the level definition (several large int arrays) was becoming very tedious.

A ‘World Builder’ application is quite a different puzzle to building a game, because the world builder not only needs to be able to render the level to the screen, but it also needs to be able to update the level in a fast and elegant way.  These constraints are directly contradictory when you are trying to decide on the data structure to represent your world, and it took me several different attempts to get it right.  What I eventually settled on can be seen above, and you can download the source here.  Read on for an explanation of how it works.

Note: All of the tile assets used in this demo (and my previous one) have been borrowed from the application RPG Maker XP. It’s an awesome piece of software!

It’s All Just Grass and Sand

A grass and sand auto tile assetI spent most of a day brooding over this problem before I came up with a solution that worked.  I tried slicing the original assets (example shown on the right) up into 16×16 pixel slices rather than the original 32×32 pixels.  That only served to blow out the complexity of the problem. I tried having the application generate every possible combination of 16×16 slices during the application start up, which worked, but made the process of defining maps by dragging a mouse too hard.

Then suddenly it hit me and it was all too simple:

  • It’s all just grass or sand
  • Grass encroaches into sand

The fact that all tiles were either grass or sand meant I could stop storing the tile number for each cell and instead just store the texture for that cell (e.g. 0 = grass, 1 = sand).  This made updating the map using the mouse really simple. All I needed to do was update the target cell to either 1 or 0.

The fact that grass encroaches into sand meant that I now had a rule which I could use at runtime to determine how to draw each cell based on the value of that cell and the value of all of its immediate neighbours.  Armed with this knowledge I rebuilt by tiling system once more.

I needed one last bit of trickery to make the system work perfectly. This trickery was that even though I was now defining the map by storing one value for each 32×32 pixel cell, I needed to draw that cell using a 16×16 resolution.  This allowed me to slice my original asset up into 16×16 pixel slices (giving me every possible combination) but still have an elegant way to select each slice (because each slice could only fit in one of the four corners of a cell).  Each corner of a 32×32 pixel cell is defined by the value of the current cell, and the cells which border that corner.  With this knowledge I was able to define a set of rules for selecting the right tiles to draw a cell and everything else came out in the wash :)

If you want to know more about how things were done then feel free to grab the source from the link included above.  You are free to reuse this code in any way which you find helpful. I’ve tried to keep it clean and readable, but I make no promises.

Check back soon to follow me as I adventure further into trying to build a simple game engine from the ground up :)

Comment on September 22nd, 2009.

That’s a pretty neat little demo. Generating the borders at runtime definitely makes level creation much simpler. One issue I see that might complicate it further…what if you want ‘rock’ directly into ‘water’, without any ‘grass’ inbetween? Or sand->rock, or rock->dirt etc etc. This would complicate the logic a bit.

Comment on September 22nd, 2009.

@David R
In the above example all tiles are based on the grass texture. It would be possible to extend the engine to handle multiple base textures, but I would need to add more assets to handle each new transition.

Comment on October 14th, 2009.

This is pretty intriguing as I am doing some similar work (though no results worthy of sharing, at least not yet). I would like to point out one thing though- ‘view source’ doesn’t work…

Comment on October 14th, 2009.

Sorry. I didn’t realize that View Source wouldn’t work with my current system of embedding. I have included a link to the application source in the text of the post however, so you can still get it that way :)