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:


When this all comes together, you get this:

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.

The .fla posted earlier is similar though a small step up in difficulty incorporating some MovieClip prototypes - and actually handling the collision array slightly different, but none the less effective. I personally prefer what I showed above, though that example lays the array visually in code to work with the x and y axis. Unlike this example, that one does not include mouse-click placement though.




SUPPORTERS:'s fast and reliable hosting provided by Media Temple.