From zero to Bombuzal – step 3

February 26, 2008 by Emanuele Feronato
Filed Under Flash, Game design, Users contributions • 17 Comments 

In the previous step we had the problem of the level panning away if the mouse is outside the movie.

The first solution come from souled that created a button in the entire stage to manage the panning

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

//create an invisible movie clip across the entire stage using API
_root.createEmptyMovieClip("base", 1);
with (base) {
	lineStyle(2, 0x0000000, 0);
	beginFill(0x00000000, 0);
	lineTo(Stage.width, 0);
	lineTo(Stage.width, Stage.height);
	lineTo(0, Stage.height);
	lineTo(0, 0);
}
//whether to pan or not
level_pan = false;
//tile size
tile_size = 50;
// pan variables
pan_dist = 50;
pan_speed = 5;
// tiles array generation
tiles = [[0, 1, 0, 0], [1, 1, 2, 1], [1, 2, 1, 2], [0, 0, 1, 0]];
// bombs array generation
bombs = [[0, 1, 0, 0], [0, 1, 0, 1], [1, 0, 1, 0], [0, 0, 1, 0]];
// creating the level movieclip
_root.createEmptyMovieClip("level", _root.getNextHighestDepth());
// placing tiles
for (x=0; x<tiles.length; x++) {
	for (y=0; y<tiles[x].length; y++) {
		if (tiles[y][x]) {
			placed = level.attachMovie("tile", "tile"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
			placed.gotoAndStop(tiles[y][x]);
		}
	}
}
// placing bombs
for (x=0; x<bombs.length; x++) {
	for (y=0; y<bombs[x].length; y++) {
		if (bombs[y][x]) {
			level.attachMovie("bomb", "bomb"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
		}
	}
}
// centering level
level._x = (Stage.width-tiles.length*tile_size)/2;
level._y = (Stage.height-tiles[0].length*tile_size)/2;
level.onEnterFrame = function() {
	//if mouse is on stage
	if (level_pan) {
		//stopping level leaving screen
		//too high
		if (level._y<=0) {
			level._y = 0;
		}
		//too low 
		if (level._y>=Stage.height-level._height) {
			level._y = Stage.height-level._height;
		}
		//too far to the left 
		if (level._x<=0) {
			level._x = 0;
		}
		//too far to the right 
		if (level._x>=Stage.width-level._width) {
			level._x = Stage.width-level._width;
		}
		// panning level 
		// pan right
		if (_root._xmouse<pan_dist) {
			level._x += pan_speed;
		}
		// pan left 
		if (_root._xmouse>Stage.width-pan_dist) {
			level._x -= pan_speed;
		}
		// pan down 
		if (_root._ymouse<pan_dist) {
			level._y += pan_speed;
		}
		// pan up 
		if (_root._ymouse>Stage.height-pan_dist) {
			level._y -= pan_speed;
		}
	}
};
//when mouse is on stage pan
base.onRollOver = function() {
	level_pan = true;
};
//when mouse leaves stage stop panning
base.onRollOut = function() {
	level_pan = false;
};

Maybe it’s not the best solution ever, because it may require you to redesign mouse pointer, but at the moment it works.

Now it’s time to add the main sprite, Bombuzal itself! I’ll create an object to store all its information. If you have troubles with objects, refer to Understanding Flash Objects tutorial.

At the moment the only information about Bombuzal I need are its x and y position

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

//create an invisible movie clip across the entire stage using API
_root.createEmptyMovieClip("base", 1);
with (base) {
	lineStyle(2, 0x0000000, 0);
	beginFill(0x00000000, 0);
	lineTo(Stage.width, 0);
	lineTo(Stage.width, Stage.height);
	lineTo(0, Stage.height);
	lineTo(0, 0);
}
//whether to pan or not
level_pan = false;
//tile size
tile_size = 50;
// pan variables
pan_dist = 50;
pan_speed = 5;
// tiles array generation
tiles = [[0, 1, 0, 0], [1, 1, 2, 1], [1, 2, 1, 2], [0, 0, 1, 0]];
// bombs array generation
bombs = [[0, 1, 0, 0], [0, 1, 0, 1], [1, 0, 1, 0], [0, 0, 1, 0]];
// main sprite
bombuzal_obj = {xpos:0, ypos:1};
// creating the level movieclip
_root.createEmptyMovieClip("level", _root.getNextHighestDepth());
// placing tiles
for (x=0; x<tiles.length; x++) {
	for (y=0; y<tiles[x].length; y++) {
		if (tiles[y][x]) {
			placed = level.attachMovie("tile", "tile"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
			placed.gotoAndStop(tiles[y][x]);
		}
	}
}
// placing bombs
for (x=0; x<bombs.length; x++) {
	for (y=0; y<bombs[x].length; y++) {
		if (bombs[y][x]) {
			level.attachMovie("bomb", "bomb"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
		}
	}
}
// placing bombuzal
level.attachMovie("bombuzal", "bombuzal", level.getNextHighestDepth(), {_x:bombuzal_obj.xpos*tile_size, _y:bombuzal_obj.ypos*tile_size});
// centering level
level._x = (Stage.width-tiles.length*tile_size)/2;
level._y = (Stage.height-tiles[0].length*tile_size)/2;
level.onEnterFrame = function() {
	//if mouse is on stage
	if (level_pan) {
		//stopping level leaving screen
		//too high
		if (level._y<=0) {
			level._y = 0;
		}
		//too low    
		if (level._y>=Stage.height-level._height) {
			level._y = Stage.height-level._height;
		}
		//too far to the left    
		if (level._x<=0) {
			level._x = 0;
		}
		//too far to the right    
		if (level._x>=Stage.width-level._width) {
			level._x = Stage.width-level._width;
		}
		// panning level    
		// pan right
		if (_root._xmouse<pan_dist) {
			level._x += pan_speed;
		}
		// pan left    
		if (_root._xmouse>Stage.width-pan_dist) {
			level._x -= pan_speed;
		}
		// pan down    
		if (_root._ymouse<pan_dist) {
			level._y += pan_speed;
		}
		// pan up    
		if (_root._ymouse>Stage.height-pan_dist) {
			level._y -= pan_speed;
		}
	}
};
//when mouse is on stage pan
base.onRollOver = function() {
	level_pan = true;
};
//when mouse leaves stage stop panning
base.onRollOut = function() {
	level_pan = false;
};

And here it is!

I know, Bombuzal sprite sucks, but I’ll fix it later. Now, I want it to move using arrow keys. If Bombuzal steps off the floor, then he dies and at the moment I want it to be redrawn at its starting position.

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

//create an invisible movie clip across the entire stage using API
_root.createEmptyMovieClip("base", 1);
with (base) {
	lineStyle(2, 0x0000000, 0);
	beginFill(0x00000000, 0);
	lineTo(Stage.width, 0);
	lineTo(Stage.width, Stage.height);
	lineTo(0, Stage.height);
	lineTo(0, 0);
}
//whether to pan or not
level_pan = false;
//tile size
tile_size = 50;
// pan variables
pan_dist = 50;
pan_speed = 5;
// tiles array generation
tiles = [[0, 1, 0, 0], [1, 1, 2, 1], [1, 2, 1, 2], [0, 0, 1, 0]];
// bombs array generation
bombs = [[0, 1, 0, 0], [0, 1, 0, 1], [1, 0, 1, 0], [0, 0, 1, 0]];
// main sprite
bombuzal_obj = {xpos:0, ypos:1};
// creating the level movieclip
_root.createEmptyMovieClip("level", _root.getNextHighestDepth());
// placing tiles
for (x=0; x<tiles.length; x++) {
	for (y=0; y<tiles[x].length; y++) {
		if (tiles[y][x]) {
			placed = level.attachMovie("tile", "tile"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
			placed.gotoAndStop(tiles[y][x]);
		}
	}
}
// placing bombs
for (x=0; x<bombs.length; x++) {
	for (y=0; y<bombs[x].length; y++) {
		if (bombs[y][x]) {
			level.attachMovie("bomb", "bomb"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
		}
	}
}
// placing bombuzal
level.attachMovie("bombuzal", "bombuzal", level.getNextHighestDepth(), {_x:bombuzal_obj.xpos*tile_size, _y:bombuzal_obj.ypos*tile_size});
level.bombuzal.onEnterFrame = function() {
	// moving left
	if (Key.isDown(Key.LEFT)) {
		bombuzal_obj.xpos--;
	}
	// moving right 
	if (Key.isDown(Key.RIGHT)) {
		bombuzal_obj.xpos++;
	}
	// moving down 
	if (Key.isDown(Key.DOWN)) {
		bombuzal_obj.ypos++;
	}
	// moving up 
	if (Key.isDown(Key.UP)) {
		bombuzal_obj.ypos--;
	}
	update_bombuzal_position();
};
// centering level
level._x = (Stage.width-tiles.length*tile_size)/2;
level._y = (Stage.height-tiles[0].length*tile_size)/2;
level.onEnterFrame = function() {
	//if mouse is on stage
	if (level_pan) {
		//stopping level leaving screen
		//too high
		if (level._y<=0) {
			level._y = 0;
		}
		//too low          
		if (level._y>=Stage.height-level._height) {
			level._y = Stage.height-level._height;
		}
		//too far to the left          
		if (level._x<=0) {
			level._x = 0;
		}
		//too far to the right          
		if (level._x>=Stage.width-level._width) {
			level._x = Stage.width-level._width;
		}
		// panning level          
		// pan right
		if (_root._xmouse<pan_dist) {
			level._x += pan_speed;
		}
		// pan left          
		if (_root._xmouse>Stage.width-pan_dist) {
			level._x -= pan_speed;
		}
		// pan down          
		if (_root._ymouse<pan_dist) {
			level._y += pan_speed;
		}
		// pan up          
		if (_root._ymouse>Stage.height-pan_dist) {
			level._y -= pan_speed;
		}
	}
};
//when mouse is on stage pan
base.onRollOver = function() {
	level_pan = true;
};
//when mouse leaves stage stop panning
base.onRollOut = function() {
	level_pan = false;
};
// update bombuzal position
function update_bombuzal_position() {
	level.bombuzal._x = bombuzal_obj.xpos*tile_size;
	level.bombuzal._y = bombuzal_obj.ypos*tile_size;
	if ((tiles[bombuzal_obj.xpos][bombuzal_obj.ypos] == undefined) or (tiles[bombuzal_obj.xpos][bombuzal_obj.ypos]<1)) {
		bombuzal_obj.xpos = 0;
		bombuzal_obj.ypos = 1;
	}
}

And now the game looks very bad… first you can walk in diagonal while in the original you can’t… then the sprite moves too fast… and there is a tiles bug.

In the original game, the sprite moves slowly and he can’t stop between a tile and another. This means when you press, in example, the right arrow, Bombuzal will slowly walk until the rightmost tile, even if you release right arrow while it’s walking. That’s a very tile based concept indeed.

I must reproduce this kind of movement, and not allow the player to walk diagonally. This is the correct actionscript, read all comments because I changed various things.

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173

//create an invisible movie clip across the entire stage using API
_root.createEmptyMovieClip("base", 1);
with (base) {
	lineStyle(2, 0x0000000, 0);
	beginFill(0x00000000, 0);
	lineTo(Stage.width, 0);
	lineTo(Stage.width, Stage.height);
	lineTo(0, Stage.height);
	lineTo(0, 0);
}
//whether to pan or not
level_pan = false;
//tile size
tile_size = 50;
// pan variables
pan_dist = 50;
pan_speed = 5;
// tiles array generation
tiles = [[0, 1, 0, 0], [1, 1, 2, 1], [1, 2, 1, 2], [0, 0, 1, 0]];
// bombs array generation
bombs = [[0, 1, 0, 0], [0, 1, 0, 1], [1, 0, 1, 0], [0, 0, 1, 0]];
// main sprite
// xpos: bombuzal x position
// ypos: y position
// moving: bombuzal is moving or not
// facing: the side bombuzal is facing on
bombuzal_obj = {xpos:0, ypos:1, moving:false, facing:"right"};
// creating the level movieclip
_root.createEmptyMovieClip("level", _root.getNextHighestDepth());
// placing tiles
for (x=0; x<tiles.length; x++) {
	for (y=0; y<tiles[x].length; y++) {
		// notice as it's not [x][y] but [y][x]
		if (tiles[y][x]) {
			placed = level.attachMovie("tile", "tile"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
			placed.gotoAndStop(tiles[y][x]);
		}
	}
}
// placing bombs
for (x=0; x<bombs.length; x++) {
	for (y=0; y<bombs[x].length; y++) {
		if (bombs[y][x]) {
			level.attachMovie("bomb", "bomb"+level.getNextHighestDepth(), level.getNextHighestDepth(), {_x:x*tile_size, _y:y*tile_size});
		}
	}
}
// placing bombuzal
level.attachMovie("bombuzal", "bombuzal", level.getNextHighestDepth(), {_x:bombuzal_obj.xpos*tile_size, _y:bombuzal_obj.ypos*tile_size});
level.bombuzal.onEnterFrame = function() {
	// if bombuzal is not alread moving...
	if (!bombuzal_obj.moving) {
		// moving left
		if (Key.isDown(Key.LEFT)) {
			bombuzal_obj.moving = true;
			bombuzal_obj.facing = "left";
		}
		// moving right              
		if (Key.isDown(Key.RIGHT)) {
			bombuzal_obj.moving = true;
			bombuzal_obj.facing = "right";
		}
		// moving down              
		if (Key.isDown(Key.DOWN)) {
			bombuzal_obj.moving = true;
			bombuzal_obj.facing = "down";
		}
		// moving up              
		if (Key.isDown(Key.UP)) {
			bombuzal_obj.moving = true;
			bombuzal_obj.facing = "up";
		}
		// else, if its' moving...  
	} else {
		switch (bombuzal_obj.facing) {
			// moving left
		case "left" :
			dx = -1;
			dy = 0;
			this._x--;
			break;
			// moving right
		case "right" :
			dx = 1;
			dy = 0;
			this._x++;
			break;
			// moving up
		case "up" :
			dx = 0;
			dy = -1;
			this._y--;
			break;
			// moving down
		case "down" :
			dx = 0;
			dy = 1;
			this._y++;
			break;
		}
		// if bombuzal walked for an entire tile...
		if ((this._x%tile_size == 0) and (this._y%tile_size == 0)) {
			// stop moving bombuzal
			bombuzal_obj.moving = false;
			// increase bombuzal x and y position according to its direction
			bombuzal_obj.xpos += dx;
			bombuzal_obj.ypos += dy;
			update_bombuzal_position();
		}
	}
};
// centering level
level._x = (Stage.width-tiles.length*tile_size)/2;
level._y = (Stage.height-tiles[0].length*tile_size)/2;
level.onEnterFrame = function() {
	//if mouse is on stage
	if (level_pan) {
		//stopping level leaving screen
		//too high
		if (level._y<=0) {
			level._y = 0;
		}
		//too low                               
		if (level._y>=Stage.height-level._height) {
			level._y = Stage.height-level._height;
		}
		//too far to the left                               
		if (level._x<=0) {
			level._x = 0;
		}
		//too far to the right                               
		if (level._x>=Stage.width-level._width) {
			level._x = Stage.width-level._width;
		}
		// panning level                               
		// pan right
		if (_root._xmouse<pan_dist) {
			level._x += pan_speed;
		}
		// pan left                               
		if (_root._xmouse>Stage.width-pan_dist) {
			level._x -= pan_speed;
		}
		// pan down                               
		if (_root._ymouse<pan_dist) {
			level._y += pan_speed;
		}
		// pan up                               
		if (_root._ymouse>Stage.height-pan_dist) {
			level._y -= pan_speed;
		}
	}
};
//when mouse is on stage pan
base.onRollOver = function() {
	level_pan = true;
};
//when mouse leaves stage stop panning
base.onRollOut = function() {
	level_pan = false;
};
// update bombuzal position
function update_bombuzal_position() {
	// if bombuzal falls off the stage...
	if ((tiles[bombuzal_obj.ypos][bombuzal_obj.xpos] == undefined) or (tiles[bombuzal_obj.ypos][bombuzal_obj.xpos]<1)) {
		// reset bombuzal to its starting position
		bombuzal_obj.xpos = 0;
		bombuzal_obj.ypos = 1;
		level.bombuzal._x = bombuzal_obj.xpos*tile_size;
		level.bombuzal._y = bombuzal_obj.ypos*tile_size;
		update_bombuzal_position();
	}
}

And now we have a walking Bombuzal as in the original game.

The winner of this step is souled. Now, I would like to have a better Bombuzal… that silly blue circle does not look very professional… can you draw one for me?

Download source codes meanwhile…

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» 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.

17 Responses to “From zero to Bombuzal – step 3”

  1. Grifo on February 26th, 2008 6:43 pm

    No one did the drawing yet? I can do it if so… just let me know what it should be like. In details.

  2. Emanuele Feronato on February 26th, 2008 6:57 pm

    something cute…

  3. souled on February 26th, 2008 8:06 pm

    Yay thanks, I’ll help more if you need it. :)

  4. styxtwo on February 26th, 2008 8:56 pm

    its walking waaaaay to slow :o.

  5. Xavi on February 26th, 2008 9:31 pm

    Hey styxtwo, you’re right…it does move way too slow.
    Hey Emanuele, maybe double the speed for the next tutorial.

  6. David on February 26th, 2008 9:48 pm

    what’s the point of creating the ‘base’ movieclip at the beginning?

    otherwise very interesting

  7. David on February 26th, 2008 9:49 pm

    doesn’t matter anymore, i’ve worked it out

  8. EagleVision on February 26th, 2008 11:15 pm

    Here you go…

    http://www.mediafire.com/?ldsjiyc3wws

  9. Andre Marianiello on February 27th, 2008 12:21 am

    The base clip was created to detect when the mouse was on the stage and when it wasn’t

  10. Grifo on February 27th, 2008 7:29 pm

    There’s an MC attached to mouse coordinates, then? If that’s right, is it truly the best way to do it? Well I’m no coder so…never mind. OKay I’ll start the sprite now…so if anyone has any idea of what it should be(especially Emanuele), it will surely be helpful.

  11. Grifo on February 28th, 2008 12:12 am

    Oh my i didn’t notice that EagleVision uploaded a sprite already…well now it’s already done so I’ll link anyway…

    http://rapidshare.com/files/95465829/SpriteFeronato.fla.html

    Sorry if it looks crappy but I’m not at 100% right now, in fact my wrist’s been complicating my life lately. Now, if someone else could take care of platforms…

    That’s it and sorry for the “crappy style” -_-

  12. EagleVision on February 29th, 2008 3:06 am

    Hey, Grifo, could you upload it to mediafire.com

    Thanks, proboly yours is way better then my blob. lol :)

  13. Grifo on March 1st, 2008 5:49 am

    OK I’ll try it in a minute. And Thx for being the only one that said something about it, even tho u didn’t see it yet.

  14. Grifo on March 1st, 2008 6:36 am

    http://www.mediafire.com/?i1iyyplta93

    I think that’s it.

  15. EagleVision on March 1st, 2008 10:45 pm

    Your Welcome! :D
    I am about to see it….

  16. EagleVision on March 1st, 2008 10:52 pm

    Ok…I am using Flash 8 Pro…If you can provide the .swf, it might work.

    Or you could convert it, thanks! :D

Leave a Reply




Trackbacks

  1. From zero to Bombuzal - step 4 : Emanuele Feronato - italian geek and PROgrammer on March 13th, 2008 1:04 pm

    [...] of the biggest problems of step 3 was Bombuzal waled sooo [...]

flash games company