AS3IsoLib Tutorial Series - Camera

PLAY THE DEMO

DOWNLOAD THE SOURCE CODE

RETURN TO THE TUTORIAL INDEX

A common concept in 3d applications is that of a camera. A camera is usually a moveable object that can be positioned in a scene, allowing the scene to be viewed from different angles without having to change the position of the objects within the scene. In as3isolib the IsoView class implements the functionality of a camera, allowing you to view a scene from different positions.

Main.mxml

The scene is created just like it was before.

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

Rather than adding the scene to the Flex application directly, we will instead create an IsoView object, and add the scene to it using the addScene function.

 view = new IsoView();
 view.addScene(scene);

We disable the IsoView clipping (where objects outside of the view of the scene are not drawn) and border, and then display it by adding it as a child of the SpriteUIComponent.

 view.showBorder = false;
 view.clipContent = false;
 spriteContainer.addChild(view);

The bouncing box from the last tutorial is created again so we have something to view.

 box1 = new IsoBox();
 box1.setSize(75, 75, 75);
 box1.moveTo(0, 0, 50);
 scene.addChild(box1);
 
 TweenMax.to(box1, 2, {z:0, yoyo:true, repeat:-1});   

 this.addEventListener(Event.ENTER_FRAME, enterFrame);

In order to move the “camera” above the isometric scene we need to listen for three mouse events. The first is when the mouse is clicked. Here we set the pan variable to true, which we will use later to indicate that the user wants to pan the camera over the scene.

 this.addEventListener(
  MouseEvent.MOUSE_DOWN, 
  function (event:MouseEvent):void 
  {
   pan = true;

We also need to make a note of the position of the mouse cursor when the button was clicked. This is because the movement of the camera is based off the movement off the relative movement of the mouse between frames. However MouseEvent class does not keep a track of this relative movement, instead only supplying the absolute position of the mouse. By storing the position of the mouse in the lastX and lastY variables, we can determine the relative movement of the mouse between frames.

   lastX = event.stageX;
   lastY = event.stageY;
  }
 );

When the mouse is released we want to stop the camera panning, so pan is set to false.

 this.addEventListener(
  MouseEvent.MOUSE_UP, 
  function (event:MouseEvent):void 
  {
   pan = false;
  }
 );

When the mouse is moved, and the pan variable is set to true, we call the IsoView pan function to change the position from which the isometric scene is viewed.

 this.addEventListener(
  MouseEvent.MOUSE_MOVE, 
  function (event:MouseEvent):void 
  {
   if (pan) 
   {
    view.pan(lastX - event.stageX, 
     lastY - event.stageY);

The position of the mouse is saved in the lastX and lastY variables.

    lastX = event.stageX;
    lastY = event.stageY;
   } 
  }
 );

}

Now by clicking and dragging the mouse on the screen the view of the isometric scene can be changed in a very intuitive way.