Create a Flash game like Blockage

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:


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:

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.

  • 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” ?

  • McRage

    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.

  • loop

    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];

  • McRage

    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… :)

  • AnotherGuest

    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 :)

  • 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.

  • Colin Diam

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

  • Pingback: Create a Flash game like Blockage – Movement prototype - Emanuele Feronato()

  • Dude11

    can anyone send the pdf to my id
    i will really appreciate

  • Oxana

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