AS3IsoLib Tutorial Series - Moving Boxes

PLAY THE DEMO

DOWNLOAD THE SOURCE CODE

RETURN TO THE TUTORIAL INDEX

One of the trickier aspects of a isometric system are the coordinates. With as3isolib the x axis runs along the diagonal from the top left of the screen to the bottom right. The y axis is perpendicular, running from the top right to the bottom left. The z axis defines the height, and runs straight up and down.

To demonstrate how isometric objects move along these axes we will create 3 slightly different shaped blocks. The code is pretty much the same as the last tutorial, except that now the variables for the various objects, like the boxes and the scene, are class variables, not function variables.

protected var scene:IsoScene = null;
protected var box1:IsoBox = null;
protected var box2:IsoBox = null;
protected var box3:IsoBox = null;

protected function appComplete():void
{
 var spriteContainer:SpriteUIComponent = new SpriteUIComponent();
 this.addChild(spriteContainer);
 
 scene = new IsoScene();
 scene.hostContainer = spriteContainer;
 
 box1 = new IsoBox();
 box1.setSize(50, 50, 50);
 box1.moveTo(300, -100, 0);
 scene.addChild(box1);

The moveToRandomPosition sets up a tweening effect that will move the box to a random position on the x/y plane.

 moveToRandomPosition(box1);
    
 box2 = new IsoBox();
 box2.setSize(50, 50, 100);
 box2.moveTo(200, 100, 0);
 scene.addChild(box2);
 moveToRandomPosition(box2);
 
 box3 = new IsoBox();
 box3.setSize(50, 100, 50);
 box3.moveTo(500, 100, 0);
 scene.addChild(box3);
 moveToRandomPosition(box3);

Because the boxes will move, the scene needs to be re-rendered every frame. Perviously, because the scene was static, we made the one call to the render function. Now we set the enterFrame function to be called every frame.

 this.addEventListener(Event.ENTER_FRAME, enterFrame);
}

The enterFrame function does one thing: render the scene. By rendering it every frame the movement of the boxes will be visible.

protected function enterFrame(event:Event):void
{
 scene.render();
}

The randomPosition and moveToRandomPosition functions are used in conjunction with TweenLite to move the boxes around on the x/y plane. Notice that the moveToRandomPosition function is called recursively when the tweening action has completed. In this way we can keep the boxes in continuous motion.

protected function randomPosition(min:Number, max:Number):Number
{
 return Math.random() * (max - min) + min;
}

protected function moveToRandomPosition(box:IsoBox):void
{
 TweenLite.to(box, 2, 
  {x:randomPosition(300, 500), 
  y:randomPosition(-100, 200),  
  onComplete:moveToRandomPosition, 
  onCompleteParams:[box]});
}

Notice how the order of the boxes is adjusted automatically as they slide in front of and behind each other.