From zero to Bombuzal – step 3

Read all posts about "" game

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

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers