AS3IsoLib Tutorial Series - Interaction

PLAY THE DEMO

DOWNLOAD THE SOURCE CODE

RETURN TO THE TUTORIAL INDEX

In order to interact with an isometric scene with the mouse we need to convert between the screen x/y coordinates used by the mouse cursor and the isometric x/y/z coordinates used by the scene. To demonstrate this we will move a box to the mouse cursor position on a mouse click.

Main.mxml

The scene, view and box are all created in the standard way.

protected function appComplete():void
{
 var spriteContainer:SpriteUIComponent = new SpriteUIComponent();
 this.addChild(spriteContainer);
 
 scene = new IsoScene();
 view = new IsoView();
 view.addScene(scene);
 view.showBorder = false;
 view.clipContent = false;
 spriteContainer.addChild(view);
 
 box1 = new IsoBox();
 box1.setSize(25, 25, 25);
 box1.moveTo(0, 0, 0);
 scene.addChild(box1);

In order to give the user something to click on we will create an IsoGrid. This displays an isometric grid on the screen.

 grid = new IsoGrid();

We disable the display of the origin (see the screenshot below for what it would look like if this was not disabled).

 grid.showOrigin = false;

We define the size of the grid and reposition it so it is in the middle of the screen.

 grid.setGridSize(10, 10);
 grid.y = -50;
 grid.x = -10;

We set the mouseClick function to be called when the user clicks the mouse cursor on the grid.

 grid.addEventListener(MouseEvent.CLICK, mouseClick);

The grid is then added to the scene.

 scene.addChild(grid);   
 
 this.addEventListener(Event.ENTER_FRAME, enterFrame);         
}

The first thing to notice with the mouseClick function is that is takes a ProxyEvent as a parameter. Usually this would be a MouseEvent.

protected function mouseClick(event:ProxyEvent):void
{

We can get access to the usual MouseEvent object by casting the targetEvent property.

 var mEvt:MouseEvent = MouseEvent(event.targetEvent);

The 2 dimensional mouse coordinates are converted to a 3 dimension Pt object.

 var pt:Pt = new Pt(mEvt.localX, mEvt.localY);

This mouse coordinates, which are in screen space, are converted to coordinates in isometric space.

 IsoMath.screenToIso(pt);  

We then use TweenLite to reposition the box to the isometric coordinates. Notice that we have to compensate for the fact that we repositioned the grid earlier by adding the grids x and y position to the destination coordinates.

 TweenLite.to(box1, 1, {x: pt.x + grid.x, y:pt.y + grid.y});
}