Talking about Bombuzal game, Flash, Game development and Users contributions.
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
//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=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._xmouseStage.width-pan_dist) {
level._x -= pan_speed;
}
// pan down
if (_root._ymouseStage.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
//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=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._xmouseStage.width-pan_dist) {
level._x -= pan_speed;
}
// pan down
if (_root._ymouseStage.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.
//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=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._xmouseStage.width-pan_dist) {
level._x -= pan_speed;
}
// pan down
if (_root._ymouseStage.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.
//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=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._xmouseStage.width-pan_dist) {
level._x -= pan_speed;
}
// pan down
if (_root._ymouseStage.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...
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.