Approach Towards Isometric Positioning
         by senocular

Flash, being as special as it is, allows us to take a completely different approach to handling isometric positioning without the need of any kind of complicated calculation as previously mentioned. This is achieved through movie clip transformations. Because movie clips are self-contained and operate through their own timeline and own coordinate space, you have the ability to change and alter the appearance of a movie clip. on the screen and not effect any of the movie clips internal proportions. Visually, on the screen they appear altered, but this is only because, as a viewer, you are seeing them as through a transformed instance.

Lets say for example, if you were to take a movie clip, and reduce its height by 50%, the contents of that movie clip would visually shorten from the main timeline. Though, from within that movie clip, one would not see/display any signs of change. This is because the contents themselves were not altered, but rather the clip they are in.

If you haven't already caught on, the point I'm getting at is that, instead of using mathematic calculations to position objects isometrically, we can let Flash do it for us using movie clips to automatically add the needed transformations, then globalize the new point to the main timeline and position objects there to the newly acquired point.

There's two calculations needed here, one being the rotation, as we are going from a square grid to a rotated diamond like grid, and then a scaling transformation to give us that perspective look and bring us closer to the 30/26.6 degrees of isometry. This is done with two movie clips - one for each transformation.

See illustration:

(The gray cross hairs represent (0,0)) For any movie clip. within mc1, given a normal path along say, the _x axis, that movie clip. would, on the screen, appear to traveling along the isometric angle from within those transformations. The only problem is, it too would be rotated and scaled and distorted beyond normal recognition. That is where the globalization comes into play using Flash's localToGlobal() function where you'd use either an a simple variable point or even an empty movie clip to maintain your grid position and relay that to the main timeline as a coordinate there.

For example, in a similar set up as before with the ball (_root.ball) and the grid, only the grid is transformed like described and the following code is placed on an empty clip in _root.mc1.mc2 representing the grid movement:


Transforming the point with localToGlobal() allows the ball in _root placed on that position to follow this clip precisely without any complicated calculations. All positioning within _root.mc1.mc2 (the grid) relates accordingly to the apparent isometric position when viewed from the main timeline.

Now this technique can pretty much replace that which uses the functions outlined earlier, however, the _y if you'll notice is flipped here as it is in Flash (which isn't a big deal) and this method as a whole is a little unorthodox and possibly even confusing due to its transformations. Those transformations also require going through the scope of 2 movie clips to obtain any of your desired points which in itself may be obnoxious to deal with.

Using the mathematical approach over this one is more practical and contained. It may be a little more difficult to understand but it presents itself to be the easiest to handle as everything is operated through one scope, plus it allows the methods used to be more easily ported to another language. The rest of isometric handling discussed here will be through that method.




kirupa.com's fast and reliable hosting provided by Media Temple.