AS3IsoLib Tutorial Series - Getting Started

PLAY THE DEMO

DOWNLOAD THE SOURCE CODE

RETURN TO THE TUTORIAL INDEX

One of my favourite games of all time has to be Syndicate, and old isometric PC game (although it was ported to a number of different platforms). The as3isolib ActionScript library provides a nice framework on which to build similar isometric games and applications.

To get started with as3isolib download the latest version of the library from here, and add it to the Flex Build Path. The library relies on features in Flash Player 10, so make sure you follow the instructions on this page here to target the Flash Player 10.

The as3isolib scene objects, which actually render the isometric scene, use a Sprite to display themselves. Flex does not allow you to add a Sprite to the default Application object (objects have to extends the UIComponent class to be added to a Flex Application object), so we use a class called SpriteUIComponent as a wrapper. The SpriteUIComponent extends the UIComponent class, meaning it can be added to a Flex Application, but it can also have Sprite objects added to it.

SpriteUIComponent.as

 public class SpriteUIComponent extends UIComponent
 {
  public function SpriteUIComponent(sprite:Sprite = null)
  {
      super ();
  
      if (sprite != null)
      {
       explicitHeight = sprite.height;
       explicitWidth = sprite.width;
   
       addChild (sprite);
   }
  }
 }

Main.mxml

The appComplete function is called by the ApplicationComplete event. We start by creating a new SpriteUIComponent object and adding it to the Application.

   protected function appComplete():void
   {
    var spriteContainer:SpriteUIComponent = new SpriteUIComponent();
    this.addChild(spriteContainer);

Next we create an isometric box using the IsoBox class, and set its size and its position.

  var box:IsoBox = new IsoBox();
  box.setSize(50, 50, 50);
  box.moveTo(240, 0, 0);

To display the box it has to be placed in a scene. Here we create a new IsoScene object, add it to the display list by setting its host container, add the box to the scene, and render one frame.

  var scene:IsoScene = new IsoScene();
  scene.hostContainer = spriteContainer;
  scene.addChild(box);
  scene.render();
   }