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