Tutorials Books Videos Forums

Change the theme! Search!
Rambo ftw!

Customize Theme


Color

Background


Done

Basic Key Movement Along an Isometric Plane

by kirupa   | filed under Flash and ActionScript

There are two main reasons why 2:1 is preferable for your isometric work in Flash. One is that it gives us nice, even, and simple numbers to work with. There's no reason in messing around with complicated decimal and fraction variations of screen placement if you don't have to. The other reason is that it makes drawing isometric views in Flash easier.

Granted, the method described previously with rotating lines isn't brain surgery, but what's easier is using the line tool with snap to grid on and just drawing point to point lines along the grid at 26.6 degrees (for every 2 spaces left or right moved, move 1 up and down). But, the advantage is not only for drawing from within Flash, but also for imported isometric pixel art, which itself is also based on the 2:1 x to y ratio. Keeping your programming on that basis will allow those images to mesh well with the movement about your isometric grid.

Yes, isometric movement is grid based. What isn't, right? In an isometric perspective, you are moving along two directions along a flat plane. For all events and purposes in our isometric world, we'll say along x and y. Here you have to make another choice. Which way is x and which is y? You cant really base it on the current x or y because in the isometric grid, going in either direction would involve going the both distances of either x or y.

Consider the following:

As you can see, either direction along the grid causes the same span of movement along each axis along Flash, neither is definitively along the y axis or along the x. What I say is that direction A is along the y and direction B is along the y. I'm also going to say that A is pointing in the negative direction, and B is pointing in the positive. With that as a basis for our grid setup, we get the following.

With the far left grid space being point 0,0. So with that now straightened out, we can start programming our isometric code.

Where to now? This can be the hard part. Depending on how functional you need your isometric world to be determines how deep you need to get into it in programming. The choice of including or not including one option can change the whole programming style used in your approach. First, we'll start off with the absolute basics.

Senocular

 

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇

Kirupa's signature!

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over a bazillion subscribers!

SUBSCRIBE NOW

Creating engaging and entertaining content for designers and developers since 1998.

Follow:

Popular

Loose Ends

:: Copyright KIRUPA 2026 //--