Managing isometric depths in Flash

You’ll never believe it.

When I was about to close and delete the blog, I got an anonymous donation from a reader to pay the fee and keep the blog up and running.

So, here I am with a big problem… managing isometric depths in Flash… this is intended to be a stand alone tutorial but it’s also the 2nd part of Make a Flash game like BoxHead tutorial.

Let me show you the problem. We have a lot of moving objects in an isometric land. You can think about the zombies in BoxHead. We have to manage depths in order to make the closer zombies hide the ones behind them.

I solved the problem in two ways… one is very very stupid and it works only with AS2… but it works… while the other is a little more complex but can be ported in AS3.

Let me show you this actionscript:

var blue_array = new Array();
number_of_blocks = 10;
for (x=1; x<=number_of_blocks; x++) {
	blue_array.push("blue_"+x);
	blue = _root.attachMovie("blue", "blue_"+x, x, {_x:Math.random()*500, _y:Math.random()*350});
	blue.xspeed = 1+Math.random();
	blue.yspeed = 1+Math.random();
	blue.onEnterFrame = function() {
		this._x += this.xspeed;
		this._y -= this.yspeed;
		if (this._x>500) {
			this._x -= 500;
		}
		if (this._y<0) {
			this._y += 350;
		}
		this.idiot_depth = Math.floor(this._y*500+this._x);
		this.swapDepths(this.idiot_depth);
	};
}

Lines 1-16 are the same as the ones I used to populate the screen in Managing multiple collision detection with Flash tutorial, and they just place 10 "zombies" on the stage and make them move at a random direction and speed.

At line 17 I determine the depth in an idiot way, just saying "the closer the zombie to the bottom left of the screen, the highest its depth", then at line 18 I assign this depth to the zombie.

Why am I calling it an idiot way? It works!

Even if it works, and you proudly use it in your games, I'll tell you why you won't use it forever.

The code above leaves a lot of holes between depths... you can have a zombie with a depth of 1345 and the next one with a depth of 54643. In AS3 you cannot have depths, and let me tell you this code sucks!

Let's make things more difficult:

var blue_array = new Array();
number_of_blocks = 10;
for (x=1; x<=number_of_blocks; x++) {
	blue_array.push("blue_"+x);
	blue = _root.attachMovie("blue", "blue_"+x, x, {_x:Math.random()*500, _y:Math.random()*350});
	blue.xspeed = 1+Math.random();
	blue.yspeed = 1+Math.random();
	blue.dp = x;
	blue.onEnterFrame = function() {
		this._x += this.xspeed;
		this._y -= this.yspeed;
		if (this._x>500) {
			this._x -= 500;
		}
		if (this._y<0) {
			this._y += 350;
		}
		this.txt.text = this.getDepth();
	};
}
_root.onEnterFrame = function() {
	for (i=1; i<=number_of_blocks; i++) {
		for (x=0; x_root[blue_array[x+1]].idiot_depth) and (_root[blue_array[x]].getDepth()<_root[blue_array[x+1]].getDepth())) {
				_root[blue_array[x]].swapDepths(_root[blue_array[x+1]]);
				app = _root[blue_array[x]];
				_root[blue_array[x]] = _root[blue_array[x+1]];
				_root[blue_array[x+1]] = app;
			}
			if ((_root[blue_array[x]].idiot_depth<_root[blue_array[x+1]].idiot_depth) and (_root[blue_array[x]].getDepth()>_root[blue_array[x+1]].getDepth())) {
				_root[blue_array[x]].swapDepths(_root[blue_array[x+1]]);
				app = _root[blue_array[x]];
				_root[blue_array[x]] = _root[blue_array[x+1]];
				_root[blue_array[x+1]] = app;
			}
		}
	}
};

Line 21: Beginning of the function to be executed at every frame

Line 22: Cycle that will be repeated as many times as the number of the zombies on stage

Line 23: Cycle scanning from zero to the number of zombies minus one

Lines 24-25: Calculating the idiot depth of the x-th and the (x+1)-th zombies

Line 26: If the idiot depth of the x-th zombie is higher than the one of the (x+1)-th zombie but the real depth of the x-th zombie is lower than the one of the (x+1)-th zombie...

Line 27: Swapping the x-th and (x+1)-th depths

Lines 28-30: Swapping the x-th and (x+1)-th elements in the array

Lines 32-37: Do the same ff the idiot depth of the x-th zombie is lower than the one of the (x+1)-th zombie but the real depth of the x-th zombie is higher than the one of the (x+1)-th zombie.

Conditions at lines 26 and 32 could be placed in a or but I wrote them this way for a visual purpose.

And that's it... now all zombies have their depth between one and the number of zombies on the stage, without depth holes.

This way to solve the problem is slower, but you can improve it as long as you find a better sorting algorithm

Next time I will focus on collisions in an isometric world, meanwhile download the source codes and give me feedback.

And thank my anonymous reader who saved the blog.

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

214 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
// 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