Using as3isolib, Part 2
So, we have a scene and a box. Not very exciting just yet, but we’ll get there soon enough. Now with most games not everything will be in view so it’s very common to allow a user to navigate the view as needed. The two most common are pan and zoom, both of which, I’m about to show you. If you’re following along from part 1, we’ll be adding to the class we already created. Below is the full code.
package
{
import as3isolib.display.IsoView;
import as3isolib.display.primitive.IsoBox;
import as3isolib.display.scene.IsoGrid;
import as3isolib.display.scene.IsoScene;
import caurina.transitions.Tweener;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
public class IsoViewExample extends Sprite
{
private var _view:IsoView;
private var _scene:IsoScene;
private var _box:IsoBox;
private var _grid:IsoGrid;
private var _panPt:Point;
private var _zoom:Number = 1;
public function IsoViewExample():void
{
_view = new IsoView();
_view.setSize( stage.stageWidth, stage.stageHeight );
addChild( _view );
_scene = new IsoScene();
_scene.hostContainer = this;
_view.addScene( _scene );
_box = new IsoBox();
_box.setSize( 50, 50, 50 );
_scene.addChild( _box );
_grid = new IsoGrid();
_grid.cellSize = 50;
_scene.addChild( _grid );
stage.addEventListener( MouseEvent.MOUSE_DOWN, onStartPan, false, 0, true );
stage.addEventListener( MouseEvent.MOUSE_WHEEL, onZoom, false, 0, true );
addEventListener( Event.ENTER_FRAME, onRender, false, 0, true );
}
private function onStartPan( e:MouseEvent ):void
{
_panPt = new Point( stage.mouseX, stage.mouseY );
removeEventListener( MouseEvent.MOUSE_DOWN, onStartPan );
stage.addEventListener( MouseEvent.MOUSE_MOVE, onPan, false, 0, true );
stage.addEventListener( MouseEvent.MOUSE_UP, onStopPan, false, 0, true );
}
private function onPan( e:MouseEvent ):void
{
_view.pan( _panPt.x - stage.mouseX, _panPt.y - stage.mouseY );
_panPt.x = stage.mouseX;
_panPt.y = stage.mouseY;
}
private function onStopPan( e:MouseEvent ):void
{
stage.removeEventListener( MouseEvent.MOUSE_MOVE, onPan );
stage.removeEventListener( MouseEvent.MOUSE_UP, onStopPan );
stage.addEventListener( MouseEvent.MOUSE_DOWN, onStartPan, false, 0, true );
}
private function onZoom( e:MouseEvent ):void
{
e.delta > 0 ? _zoom += 0.5 : _zoom -= 0.5;
Tweener.addTween( _view, { currentZoom:_zoom, time:0.5 } );
}
private function onRender( e:Event ):void
{
_scene.render();
}
}
}
Little bit more code to get through so lets just jump in. First thing I did here is I moved the scene render call off into its own function and added an ENTER_FRAME event to call it every frame. This is so the scene will update automatically for us.
So lets cover panning first. The logical steps we take here are as follows:
1. On MOUSE_DOWN, trap the location of the mouse and add an event listener for MOUSE_MOVE, to update the location of the scene, and MOUSE_UP to stop panning. Line 43 is where we add the listener and line 48 is the handler function. The important thing to note here is the variable _panPt. This variable holds the point for the location of the mouse at every frame.
2. On MOUSE_MOVE, grab the newest location of the mouse and calculate the difference in position from the last frame and pan the scene that much. Line 58 shows the handler function for onPan. Here, we call “pan” on the view and tell it to move by the difference between the _panPt and the new mouse location. Next, we set the x,y of the _panPt as the x,y of the current mouse position.
3. On MOUSE_UP, stop panning. Line 66 is the handler function for pan stop. Here, we just remove the MOUSE_MOVE and MOUSE_UP listeners and add the original MOUSE_DOWN listener.
Panning now works as expected. Lets move on to zooming. The steps here are a bit simpler. We just add a listener for MOUSE_WHEEL at line 44 and line 74 is where the magic happens. In the onZoom function we do a quick check to see if they scrolled up or down by checking the value of the “delta” property of the mouse event. We store the zoom value in a “_zoom” variable we declared previously. Finally, using Tweener, we create a tween to zoom the view to the new value. The important thing to note here is that we CAN use tweening libraries like Tweener with as3isolib. We just tell Tweener to change the “currentZoom” property of the view. Theoretically, this means that you should be able to incorporate any tweening library or even physics library with as3isolib. We won’t actually need physics, so Tweener is enough for us.
That’s it! We can now zoom and pan our view. Keep in mind that, for this example, I did not include an kind of limitations. This means that you could zoom and pan the view entirely off the stage. To limit those you would simply set boundaries for zoom and pan values and check those before you zoom or pan. I’ll leave that part up to you. Next, we’ll talk about creating objects that we can drag around.
Cheers!
Thanks for playing!