From zero to Bombuzal – step 3
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…
They can be easily customized to meet the unique requirements of your project.
17 Responses to “From zero to Bombuzal – step 3”
Leave a Reply
Trackbacks
-
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 [...]
- Get up to $100,000 for your next Flash game with Mochi GAME Developer Fund
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version
- Sell sitelocked version of your Flash games and even .fla sources to Free Online Games
- Protect your work from ActionScript code theft with SWF Protector
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines
- Understanding Box2D’s one-way platforms, aka CLOUDS
- Triqui MochiAds Arcade plugin for WordPress upgraded to 1.2
- Box2D Flash game creation tutorial – part 2
- 11 Flash isometric engines you can use in your games
- Monetize your Flash games with GamesChart
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 1
- Create a Flash Racing Game Tutorial
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Triqui MochiAds Arcade plugin for WordPress official page
- Create a flash artillery game - step 1
- Flash game creation tutorial – part 5.2 (4.88/5)
- Create a flash artillery game – step 1 (4.79/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a flash artillery game – step 2 (4.74/5)
- Create a survival horror game in Flash tutorial – part 1 (4.73/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Flash game creation tutorial – part 1 (4.70/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/5)
- Creation of a platform game with Flash – step 2 (4.68/5)







No one did the drawing yet? I can do it if so… just let me know what it should be like. In details.
something cute…
Yay thanks, I’ll help more if you need it. :)
its walking waaaaay to slow :o.
Hey styxtwo, you’re right…it does move way too slow.
Hey Emanuele, maybe double the speed for the next tutorial.
what’s the point of creating the ‘base’ movieclip at the beginning?
otherwise very interesting
doesn’t matter anymore, i’ve worked it out
Here you go…
http://www.mediafire.com/?ldsjiyc3wws
The base clip was created to detect when the mouse was on the stage and when it wasn’t
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.
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” -_-
Hey, Grifo, could you upload it to mediafire.com
Thanks, proboly yours is way better then my blob. lol :)
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.
http://www.mediafire.com/?i1iyyplta93
I think that’s it.
Your Welcome! :D
I am about to see it….
Ok…I am using Flash 8 Pro…If you can provide the .swf, it might work.
Or you could convert it, thanks! :D