Create a Flash game like Rebuild Chile

May 10, 2010 • Actionscript 3, Flash, Game design by Emanuele Feronato • 18 Comments

You have three reasons to play Rebuild Chile:

1) It’s a good puzzle game

2) You will help the children from Chile affected by the earthquake/tsunami because all income will be donated to rebuild Chile

3) You are going to know how to create a game like it

The game is a Sokoban-like game, with fixed and movable items. So, you must be able to create a working prototype in a day. With your bulldozer, you can only push movable items, and only if they aren’t blocked by other movable items, and must push them out of the stage.

In this first part, we’ll cover map creation and basic player movement.

I am going to replicate level three. Here it is:

Since it’s a tile based game, it’s easy to build a level once you determine every tile’s content.

Each tile is represented by an unique coordinate.

In my case, 0 means the tile is empty, 1 means there is an unmovable item (a tree) and 2 means there is a movable item (a boulder).

And with a simple array you can build the entire map.

The bulldozer isn’t part of the map but it’s added later. As a general rule, the player and moving enemies shouldn’t be part of the map.

Here it is the script:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

package {
	import flash.display.Sprite;
	import flash.events.KeyboardEvent;
	import flash.events.Event;
	public class rebuild extends Sprite {
		// declaring the map
		public var map:Array=new Array();
		// bulldozer position
		public var bulldozer_pos:Array= new Array();
		// tree movieclip
		public var tree:tree_mc;
		// debris movieclip
		public var debris:debris_mc;
		// bulldozer movieclip
		public var bulldozer:bulldozer_mc;
		// variable to store the last key pressed by the player
		public var key_pressed:int=0;
		public function rebuild():void {
			// creating the map
			// 0: empty space
			// 1: tree
			// 2: debris
			map=[[0,0,2,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0],[1,1,1,1,1,0,1,0,0],[1,0,0,2,0,0,1,0,0],[1,0,0,0,0,0,1,0,0],[1,1,1,1,1,1,1,0,0],[0,0,0,0,2,0,0,0,0],[0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0]];
			// bulldozer position
			bulldozer_pos=[6,2];
			draw_map();
			place_bulldozer();
			stage.addEventListener(KeyboardEvent.KEY_DOWN, on_key_down);
			stage.addEventListener(KeyboardEvent.KEY_UP, on_key_up);
			stage.addEventListener(Event.ENTER_FRAME,on_enter_frame);
		}
		public function draw_map():void {
			for (var i:int=0; i<9; i++) {
				for (var j:int=0; j<9; j++) {
					switch (map[j][i]) {
						case 1 :
							// I found a tree
							tree = new tree_mc();
							tree.x=i*50;
							tree.y=j*50;
							addChild(tree);
							break;
						case 2 :
							// I found a debris
							debris=new debris_mc();
							debris.x=i*50;
							debris.y=j*50;
							addChild(debris);
							break;
					}
				}
			}
		}
		public function place_bulldozer():void {
			bulldozer = new bulldozer_mc();
			bulldozer.x=50*bulldozer_pos[1];
			bulldozer.y=50*bulldozer_pos[0];
			addChild(bulldozer);
		}
		public function on_key_down(e:KeyboardEvent):void {
			key_pressed=e.keyCode;
		}
		public function on_key_up(e:KeyboardEvent):void {
			if (e.keyCode==key_pressed) {
				key_pressed=0;
			}
		}
		public function on_enter_frame(e:Event):void {
			switch (key_pressed) {
				case 37 :
					if (bulldozer_pos[1]>0&&map[bulldozer_pos[0]][bulldozer_pos[1]-1]==0) {
						bulldozer_pos[1]--;
						bulldozer.x-=50;
					}
					break;
				case 38 :
					if (bulldozer_pos[0]>0&&map[bulldozer_pos[0]-1][bulldozer_pos[1]]==0) {
						bulldozer_pos[0]--;
						bulldozer.y-=50;
					}
					break;
				case 39 :
					if (bulldozer_pos[1]<8&&map[bulldozer_pos[0]][bulldozer_pos[1]+1]==0) {
						bulldozer_pos[1]++;
						bulldozer.x+=50;
					}
					break;
				case 40 :
					if (bulldozer_pos[0]<8&&map[bulldozer_pos[0]+1][bulldozer_pos[1]]==0) {
						bulldozer_pos[0]++;
						bulldozer.y+=50;
					}
					break;
			}
		}
	}
}

Let’s see the main functions:

draw_map: phyisically draws the level, placing movieclips in proper positions according to map array. In this case, tile size is 50×50.

place_bulldozer: places the bulldozer in the level

on_key_down and on_key_up manage in the simplest way possible player’s keyboard input. The first one just stores the last key pressed, and the second one resets last key pressed value if the player releases it.

on_enter_frame just checks if the player is pressing an arrow key, and moves the bulldozer in that way, if there is room to move (map value is equal to zero) and if it won’t leave the 9×9 grid.

And that’s it…

Use arrow keys to move the bulldozer.

This is just the beginning… the bulldozer cannot move the debris and there is no place to discard them. But we’ll see how to do it during next step.

Download the source code

** edit **: if you liked the game, consider visiting the official site

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (17 votes, average: 4.59 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 18 comments

  1. Alvaro Quezada

    on May 10, 2010 at 10:44 pm

    Hi Emmanuel, thanks for you review, I’m one of the creators of the game.

    Please spread the word, we need help to solve our children trauma.

    I sent you the URL of the main site.

    Best Regards.

  2. Bindiry

    on May 11, 2010 at 4:30 am

    I have spread the game.

    http://chafanhou.com/?q=rebuild-chile

    God bless the children.

  3. Jerry

    on May 11, 2010 at 8:25 pm

    I added the game as soon as it came out to helpout.

    http://www.thepixelcastle.com/Arcade/101543/Rebuild-Chile.html

  4. Ryan

    on May 11, 2010 at 10:54 pm

    Just a suggestion, maybe have a way so the bulldozer doesn’t move so quickly? I don’t know if you plan to do so later, but it’s a little irritating.

    But good code otherwise.

  5. Emanuele Feronato

    on May 11, 2010 at 11:44 pm

    Sure Ryan, it’s planned

  6. Emanuele Feronato - italian geek and PROgrammer

    on May 12, 2010 at 12:16 am

    [...] Create a Flash game like Rebuild Chile [...]

  7. Create a Flash game like Talesworth Adventure - Emanuele Feronato

    on May 27, 2010 at 11:56 pm

    [...] Create a Flash game like Rebuild Chile [...]

  8. Wouter

    on June 4, 2010 at 5:51 pm

    hey Emanuele,

    Thanks for this great tutorial,

    but I am confused about one thing:

    the bulldozer pos is [6,2] which I thought would be x:6 and y:2 but it appears to be the other way around. Do you have a specific reason to do this?

    Wouter

  9. Emanuele Feronato

    on June 4, 2010 at 5:59 pm

    Hello Wouter,

    If you look at the second picture, the one with the map, you will notice the first row is (0,0),(0,1),(0,2) and so on, the second row is (1,0),(1,1),(1,2)…

    So (6,2) means 6th row, 2nd column

  10. Wouter

    on June 4, 2010 at 8:44 pm

    oops….

    that’s not so smart of me…

    thanx for your answer!

    Wouter

  11. Alexandre Colella

    on June 11, 2010 at 3:14 am

    Great way to make colision.
    This way is more quickly than hitObjectTest with bulldozer x tree’s x debris.
    Thanks!!!

  12. Create a Flash game like Blockage - Emanuele Feronato

    on August 11, 2010 at 6:24 pm

    [...] 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. [...]

  13. anushi

    on September 29, 2010 at 5:54 pm

    I cannot open this fla file. please can someone tell me the way to open it.

  14. ????

    on November 1, 2010 at 9:13 am

    flash cs3 or later version

  15. somebody

    on January 30, 2011 at 10:08 am

    var map0:Array = new Array();
    map0[0] = [1, 1, 1, 2, 1, 2];
    map0[1] = [1, 0, 0, 0, 0, 1];
    Maybe this is not the best way to do it in AS2, but this code works (tested):

    map0[2] = [1, 3, 3, 3, 3, 3];
    map0[3] = [1, 0, 0, 0, 0, 2];
    map0[4] = [1, 0, 0, 0, 0, 2];
    map0[5] = [2, 1, 1, 1, 2, 1];
    bulldozer_pos = [2, 1];
    draw_map = function () {
    for (i=0; i<6; i++) {
    for (j=0; j0 and map0[bulldozer_pos[0]][bulldozer_pos[1]-1]>2) {
    bulldozer_pos[1]–;
    bulldozer._x -= 80;
    break;
    }
    }
    if (Key.isDown(38)) {
    if (bulldozer_pos[0]>0 and map0[bulldozer_pos[0]-1][bulldozer_pos[1]]>2) {
    bulldozer_pos[0]–;
    bulldozer._y -= 80;
    break;
    }
    }
    if (Key.isDown(39)) {
    if (bulldozer_pos[1]2) {
    bulldozer_pos[1]++;
    bulldozer._x += 80;
    break;
    }
    }
    if (Key.isDown(40)) {
    if (bulldozer_pos[0]2) {
    bulldozer_pos[0]++;
    bulldozer._y += 80;
    break;
    }
    }
    };

  16. Tim

    on May 10, 2011 at 9:41 am

    Hey, I’m making this, but I’m doing it with a 3D array.
    Here’s a download of what I’ve got:
    http://www.megaupload.com/?d=ZAWRIPMU
    The code has no errors, but upon testing the FLA I get a blank screen. Any ideas?

  17. Ben Reynolds

    on September 3, 2011 at 6:24 am

    Just a heads-up that the “official site” link is dead. Great tutorial anyways, I love how this dev is using games to help out in the real world!

  18. Second post: Following a tutorial « projectcreateagame

    on October 29, 2011 at 4:00 pm

    [...] would have to explain these things. I managed to find one tutorial which seemed like what I needed here and followed that [...]

< >