Simple Example in Flash
         by senocular

With the knowledge put forth so far we can begin working on a functional isometric system. A heads up for the more advanced users: this will be a (fairly) simple example based on simple principles and is intended for the intermediate programmer. A more advanced example with more suitable class definition etc. will be addressed afterwards.

This example wont be dynamically created, so if you want to try this out for yourself, you're going to have to draw your isometric plane (grid) from scratch. Be sure to know what kind of spacing is being used. Even if you don't show it visually on the screen, there needs to be some reference so that the code can correctly function in the space. Remember to draw in a movie clip and with the (0,0) point at the (0,0) point.

Once everything is set up there, make the clip which is to move about the screen. Give it an instance name and place it where it needs to be on the screen. For this example, I'm going to going to use the term "ball" again to represent that movieclip.

What this example will cover is clip movement, clip placement and collision detection. The ball will be moved along the grid with its _x and _y properties adjusted accordingly not being allowed to move on any grid space which is restricted. The ball's current position in the grid will be kept in that movieclip as two variables, x and y. So on to some code.

This is all placed within the clip in which the grid was drawn, and the "ball" clip is placed and is based on a 5x5 grid:

// first set up spacing and collisions spacing = 20; collisions = [ [0,0,0,0,0], [0,0,1,0,0], [0,0,1,0,0], [1,1,1,0,0], [0,0,0,0,0]]; // set up a function to move the ball to a new grid x,y // then set the new x, y to the ball's x, y variables MoveToGridSpace = function(x,y){ ball._x = spacing * (x + y); ball._y = spacing/2 * (x - y); ball.x = x; ball.y = y; } // set up a function to get the ball's grid x,y based on its position // then assign the new values to the ball's x, y variables SetGridSpace = function(){ ball.x = Math.round((ball._x/spacing + 2*ball._y/spacing)/2); ball.y = Math.round((ball._x/spacing - 2*ball._y/spacing)/2); } // set a function to determine if the grid space x, y is a valid // space for movement returning true if valid, false if not IsValidTile = function(x,y){ if (collisions[x][y] === 0) return true; else return false; } // set the ball to recognize key presses and move based on them Key.addListener(ball); ball.onKeyDown = function(){ var xmove, ymove; if (Key.isDown(Key.UP)){ ymove = 1; }else if (Key.isDown(Key.DOWN)){ ymove = -1; }else if (Key.isDown(Key.LEFT)){ xmove = -1; }else if (Key.isDown(Key.RIGHT)){ xmove = 1; } // update new position based on ball's current xmove += this.x; ymove += this.y; if (IsValidTile(xmove, ymove)){ MoveToGridSpace(xmove, ymove); } } // additionally we can set the ball to be put where the mouse // was pressed on the screen. ball.onMouseDown = function(){ var mouse_x = Math.round((_xmouse/spacing + 2*_ymouse/spacing)/2); var mouse_y = Math.round((_xmouse/spacing - 2*_ymouse/spacing)/2); if (IsValidTile(mouse_x, mouse_y)){ MoveToGridSpace(mouse_x, mouse_y); } } // update the ball x, y position based on where it was placed // initially on the screen SetGridSpace(); // then move the ball to be exact on that grid space MoveToGridSpace(ball.x, ball.y);
 

When this all comes together, you get this:

Download FLA for Above Animation

So what's going on there? First the spacing variable and the grid collisions grid (array) is defined. These are core variables in determining the balls placement here. Next some functions are defined. These are simple functions which relate directly to the ball clip and move it when called. There's MoveToGridSpace, SetGridSpace, and IsValidTile. Each use the equations earlier mentioned and are apart from that, pretty self explanatory. Following that comes the user interaction setting the ball's on onKeyDown and onMouseDown actions. When a key is pressed, if the key is an arrow key, a variable, either xmove or ymove is set to represent the direction of movement in the iso grid. Then that value is compounded with the ball's current position to get the new position the ball would be if this movement was applied. Following that, using one of the functions defined above, the new grid space is checked with the collisions array to see if it is a valid space (making sure it equals 0).

If that's true, then the ball is moved there using MoveToGridSpace. In the onMouseDown, the location of the mouse in the grid is gotten (again, from the equations mentioned earlier) and that position is checked and the ball is moved if valid (this could also be done using dynamically attached tiles with an onRelease action as previously discussed). Following that is just setting the ball up to be exactly on a grid space based on where it was placed on the screen.

Senocular