Create a Flash game like Blockage

August 11, 2010 • Actionscript 3, Flash, Game design by Emanuele Feronato • 10 Comments

Did you play Blockage?

It’s a perfect game to make a tutorial series because at every level it introduces a new feature, so level after level you will see something new both in the game and in the prototype.

Other than that, it’s a tile based puzzle.

This first part will focus on level data. Since it’s a tile based game, you know we should create a bidimensional array, map all levels assigning each tile type a value such as zero for the empty space and one for the walls, and start creating the array tile after tile, just like in Create a Flash game like Rebuild Chile.

In this prototype I will try to “compress” the level packing it in a string containing comma separated values.

Let me explain the idea: count, from left to right, from upper to bottom corners, the number of contiguous walls.

There are 49 walls. Then, 14 empty spaces. Then, two walls. And so on. Exluding the actors (the square and the goal), create a string like this one:

49,1,14,0,2,1,14,0,2,1,14,0,8,1,1,0,56,1

That means the level has 49 walls (marked with 1), 14 empty spaces (marked with 0), then 2 walls, 14 spaces and so on.

So this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

package {
	import flash.display.Sprite;
	public class blockage extends Sprite {
		private const LEVEL_WIDTH:int=16;
		private const LEVEL_HEIGHT:int=10;
		private var leveldata:String="49,1,14,0,2,1,14,0,2,1,14,0,8,1,1,0,56,1";
		private var tmp_level:Array=new Array();
		private var level:Array=new Array();
		private var wall:wall_mc;
		public function blockage() {
			tmp_level=leveldata.split(",");
			for (var i:int=0; i<tmp_level.length; i+=2) {
				for (var j=1; j<=tmp_level[i]; j++) {
					level.push(tmp_level[i+1]);
					if (tmp_level[i+1]==1) {
						wall = new wall_mc();
						addChild(wall);
						wall.x=32*((level.length-1)%LEVEL_WIDTH);
						wall.y=32*Math.floor((level.length-1)/LEVEL_WIDTH);
					}
				}
			}
		}
	}
}

Draws the level and stores it in level array, starting from leveldata that is the “compressed” level data.

Line 11: splits leveldata into tmp_level array. It’s just as if I did

tmp_level = [49,1,14,0,2,1,14,0,2,1,14,0,8,1,1,0,56,1];

But starting with a string I can easily import levels from an external editor.

Line 12: loops through all tmp_level even elements.

Lines 13-21: creating the level itself in level array pushing i times i+1 value, and if such value is a wall (1), then adding the wall movieclip.

This is the result:

The same old thing made in a different way. Does it make any sense to you?

Download the source code.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (14 votes, average: 4.93 out of 5)
Loading ... Loading ...
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 10 comments

  1. Monkios

    on August 11, 2010 at 7:32 pm

    Nice trick ! Some algorithms in image compression use it.

    I like the way you used it to make your level but why do you end your compressed string with “56,1″ ?

  2. McRage

    on August 11, 2010 at 10:56 pm

    Monkios: Each row is 16 characters wide and you have 10 rows =160 squares to fill. 49+14+2+14+2+14+8+1+56=160 So, you need 56 wall objects to make the black walls at the lower part of the map.

  3. loop

    on August 12, 2010 at 10:37 am

    I really dont know kinda anything at all about as3, so Im asking…

    could you use negative values in that array, to save the 0s and 1s?
    so you could compress it even more without making it THAT complicated:
    tmp_level = [49,-14,2,-14,2,-14,8,-1,56];
    ?

  4. McRage

    on August 12, 2010 at 10:56 am

    loop: Sure you could, if you are only making simple maps like these. Just add a check to determine flortype depending on if the value is higher or lower than 0.
    But if you want to introduce a new floor type in some game like mud, grass, jello… or whatever… you could easily add just a new floortype by just changing the 0 or 1 to a 2 or 3 or whatever. You could get really confusing arrays that way… :)

  5. AnotherGuest

    on August 12, 2010 at 11:42 am

    What could be done is directly filling an array instead of using a string and then splitting it when building the level.

    But with about 20 elements, it doesn’t change much and is not really a worthwhile optimisation I guess :)

  6. Nick Girardo

    on August 13, 2010 at 7:56 pm

    I prefer 2D Arrays. I have a thing where I first declare the tilesize, width, and height of the map, and then loop through to get their tiles. Anything after that are what I call “special tiles” which aren’t constrained to having a tile size or having to be in the center of the tile. If you want I can try to explain more.

  7. Colin Diam

    on August 14, 2010 at 7:33 am

    Took me ages of looking blankly at the code but I finally understand

  8. Create a Flash game like Blockage – Movement prototype - Emanuele Feronato

    on August 21, 2010 at 7:55 pm

    [...] Create a Flash game like Blockage [...]

  9. Dude11

    on March 23, 2011 at 9:57 am

    can anyone send the pdf to my id kingyamabazger@live.com
    i will really appreciate

  10. Oxana

    on June 15, 2011 at 11:18 pm

    Tell my, please, whose this music (in the game)?

< >