3 Doors Down MP3 songs Music download Edge Of Sanity Gipsy Kings Coil Download MP3 Verve She and Him Billy Talent Thraw Elton John MP3 site

Tag Archive for 'A Star'

Papervision Isometric View & Pathfinding with as3isolib and A* (A Star)

Published
by
Charlie
on February 22, 2010
in A Star, A*, AS3, Actionscript 3.0, Papervision, Papervision 3D, Pathfinding, Source Code, Tutorials and as3isolib
. 11 Comments

View Example

This week's example / tutorial is how to mix Papervision with as3isolib and A* (pronounced A Star) for a nice 3D isometric pathfinding experience. The version of A* that I am using comes straight out of Keith Peters book AdvancedEd ActionScript 3.0 Animation. Anyone looking to cover advanced animation topics in Flash should buy a copy of this book. It is excellent.

This tutorial will not cover how to create the A* classes but rather show you how to blend 3 things together; Papervision, as3isolib, and A* (the Keith Peters version). If you're just getting started using as3IsoLib take a look at these great tutorials and download the code: http://code.google.com/p/as3isolib/w/list

We will cover a few of the things that you need to successfully merge the pathfinding and 3D experience.

First item is our camera setting. We are setting ortho to true because this actually gives us a true isometric camera feel.

PLAIN TEXT
Actionscript:
  1. camera.ortho = true;

Inside of our makeGrid function we are setting up the groundwork for our pathfinding and isometric world. This grid has no information about the cellsize, just which parts of it are walkable and not walkable.

PLAIN TEXT
Actionscript:
  1. protected function makeGrid():void
  2. {
  3.     pathGrid = new Grid(10, 10);
  4.     for(var i:int = 0; i <20; i++)
  5.     {
  6.         pathGrid.setWalkable(Math.floor(Math.random() * 8) + 2,
  7.                           Math.floor(Math.random() * 8)+ 2,
  8.                           false);
  9.     }
  10.     drawGrid();
  11. }

Next we move on to drawGrid() which begins to connect the pathfinding and as3isolib

One of the great thing about as3isolib which is similar to papervision is that it has native objects that you can skin, such as boxes and polygons.

Here inside of drawGrid we run through the columns and rows that we setup in our makeGrid function. From the information in these loops we can get back the node information of the grid and check if an item is walkable or not walkable. If it is walkable we create a standard size box with a height of 0, if it is not walkable we create that same standard box but with a height of 40 so we can start to define our available paths. If the box is walkable we also want to set a mouseEvent so that we can select it. Finally we add these items to our isoScene.

PLAIN TEXT
Actionscript:
  1. for(var i:int = 0; i <pathGrid.numCols; i++)
  2. {
  3.     for(var j:int = 0; j <pathGrid.numRows; j++)
  4.     {
  5.         var node:Node = pathGrid.getNode(i, j);
  6.         var box:IsoBox = new IsoBox();
  7.  
  8.         if (node.walkable)
  9.         {
  10.             box.setSize(cellSize, cellSize, 0);
  11.             box.addEventListener(MouseEvent.CLICK, onGridItemClick);
  12.         }
  13.         else
  14.         {
  15.             box.setSize(cellSize, cellSize, 40);
  16.         }
  17.        
  18.         box.moveTo(i * cellSize, j * cellSize, 0);
  19.         isoScene.addChild(box);
  20.     }
  21. }

Another item within the drawGrid function is our playerHelper. We are only using this playerHelper so that we can get it's coordinates to follow along in papervision. We set him to the same size as our box items.

PLAIN TEXT
Actionscript:
  1. playerHelper.setSize(cellSize, cellSize, 10);

The next important step is setting up a way to have our viewport inside of our isoScene. We first create a nice wrapper for our viewport which is a native IsoSprite object. We then associate our viewport as one of the sprites inside of our isoSprite.

PLAIN TEXT
Actionscript:
  1. isoSprite = new IsoSprite();
  2. isoSprite.sprites = [viewport];
  3. isoScene.addChild(isoSprite);

Notice that we add our sprites kind of like we add filters for a movieclip. We are passing it an array.

PLAIN TEXT
Actionscript:
  1. //isoSprite.sprites = [viewport,moreStuff] - pass in an array of objects

Now lets see what happens when a grid item is clicked. First we gather the information about where we want to go. We gather that by getting the item that was clicked and getting its x & y positions divided by the cellSize. Then we give pathGrid.setEndNode those coordinates. Next we gather the information about where our playerHelper currently is divided by the cellSize and pass that information to pathGrid.setStartNode.

PLAIN TEXT
Actionscript:
  1. protected function onGridItemClick(evt:ProxyEvent):void
  2.         {
  3.             var box:IsoBox = evt.target as IsoBox;
  4.            
  5.             //Get and set End Nodes (where are we going)
  6.             var xpos:int = (box.x)/cellSize
  7.             var ypos:int = Math.floor(box.y / cellSize)
  8.             pathGrid.setEndNode(xpos,ypos );
  9.  
  10.             //Get and set Start Node (where are we now)
  11.             xpos = Math.floor(playerHelper.x / cellSize);
  12.             ypos = Math.floor(playerHelper.y / cellSize);
  13.             pathGrid.setStartNode(xpos, ypos);
  14.  
  15.             //Find our path
  16.             findPath();
  17.         }

Finally we call findPath(). This is the fun part. First we create a new instance of AStar and gather the path information that we gathered when we ran the onGridItemClick function.

We can now run through that loop and get each x and y portion of that loop. We simply add a tween with a delay that is the same time as our speed. This will allow you to see each move and when it is complete it will start it's next move.

PLAIN TEXT
Actionscript:
  1. protected function findPath():void
  2. {
  3.     var astar:AStar = new AStar();
  4.     var speed:Number = .3;
  5.     if(astar.findPath(pathGrid))
  6.     {
  7.         path = astar.path;
  8.     }
  9.    
  10.     for (var i:int = 0; i <path.length; i++)
  11.     {
  12.         var targetX:Number = path[i].x * cellSize;
  13.         var targetY:Number = path[i].y * cellSize;
  14.        
  15.         Tweener.addTween(playerHelper, { x:targetX, y:targetY, delay:speed * i , time:speed, transition:"linear" } );
  16.     }
  17. }

We now just need to look at how to sort the papervision with the as3isolib objects

Inside of our onRenderTick function which is an override from BasicView we use this to render our isoScene which is part of as3isolib and change the x,y coordinates of our sphere. We are basically following around the screenX and screenY of our playerHelper. The next and very important part of this is the depth sorting. We are pulling the depth at all times from the playerHelper object and assigning our isoSprite (which has our viewport in it) to that depth. Now we can watch as our 3D objects find their pretty little paths and sort without issue.

PLAIN TEXT
Actionscript:
  1. override protected function onRenderTick(event:Event = null):void
  2. {
  3.     super.onRenderTick(event);
  4.     isoScene.render();
  5.     sphere.x = playerHelper.screenX;
  6.     sphere.y = -playerHelper.screenY - 15;
  7.     isoScene.setChildIndex(isoSprite, isoScene.getChildIndex(playerHelper));
  8. }

Here is the full code:

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import as3isolib.display.IsoSprite;
  4.     import as3isolib.display.IsoView;
  5.     import as3isolib.display.primitive.IsoBox;
  6.     import as3isolib.display.primitive.IsoPrimitive;
  7.     import as3isolib.display.scene.IsoGrid;
  8.     import as3isolib.display.scene.IsoScene;
  9.     import bit101.AStar;
  10.     import bit101.Grid;
  11.     import bit101.Node;
  12.     import caurina.transitions.Tweener;
  13.     import flash.display.StageAlign;
  14.     import flash.display.StageScaleMode;
  15.     import flash.events.Event;
  16.  
  17.     import eDpLib.events.ProxyEvent;
  18.    
  19.     import flash.display.Sprite;
  20.     import flash.events.MouseEvent;
  21.    
  22.     import org.papervision3d.materials.WireframeMaterial;
  23.     import org.papervision3d.objects.primitives.Sphere;
  24.     import org.papervision3d.view.BasicView;
  25.  
  26.     public class Main extends BasicView
  27.     {
  28.         protected var cellSize:int = 50;
  29.         protected var pathGrid:Grid;
  30.         protected var playerHelper:IsoPrimitive;
  31.         protected var path:Array;
  32.         protected var isoSprite:IsoSprite;
  33.         protected var isoView:IsoView;
  34.         protected var isoScene:IsoScene;
  35.         protected var sphere:Sphere;
  36.        
  37.         public function Main()
  38.         {
  39.             super(800, 600, false);
  40.             stage.align = StageAlign.TOP_LEFT;
  41.             stage.scaleMode = StageScaleMode.NO_SCALE;
  42.            
  43.             create3D();
  44.             makeGrid();
  45.             startRendering();
  46.         }
  47.  
  48.         protected function create3D():void
  49.         {
  50.             sphere = new Sphere(new WireframeMaterial(),20);
  51.             scene.addChild(sphere);
  52.             camera.ortho = true;
  53.         }
  54.  
  55.         protected function makeGrid():void
  56.         {
  57.             pathGrid = new Grid(10, 10);
  58.             for(var i:int = 0; i <20; i++)
  59.             {
  60.                 pathGrid.setWalkable(Math.floor(Math.random() * 8) + 2,
  61.                                   Math.floor(Math.random() * 8)+ 2,
  62.                                   false);
  63.             }
  64.             drawGrid();
  65.         }
  66.        
  67.         protected function drawGrid():void
  68.         {
  69.             isoScene       = new IsoScene();
  70.             playerHelper    = new IsoPrimitive();
  71.             isoSprite     = new IsoSprite();
  72.             isoView         = new IsoView();
  73.  
  74.             for(var i:int = 0; i <pathGrid.numCols; i++)
  75.             {
  76.                 for(var j:int = 0; j <pathGrid.numRows; j++)
  77.                 {
  78.                     var node:Node = pathGrid.getNode(i, j);
  79.                     var box:IsoBox = new IsoBox();
  80.  
  81.                     if (node.walkable)
  82.                     {
  83.                         box.setSize(cellSize, cellSize, 0);
  84.                         box.addEventListener(MouseEvent.CLICK, onGridItemClick);
  85.                     }
  86.                     else
  87.                     {
  88.                         box.setSize(cellSize, cellSize, 40);
  89.                     }
  90.                    
  91.                     box.moveTo(i * cellSize, j * cellSize, 0);
  92.                     isoScene.addChild(box);
  93.                 }
  94.             }
  95.  
  96.             //Set properties for player helper
  97.             playerHelper.setSize(cellSize, cellSize, 10);
  98.            
  99.             //Set properties for isoView
  100.             isoView.setSize(stage.stageWidth, stage.stageHeight);
  101.            
  102.             //Set proper position for viewport
  103.             viewport.x = -stage.stageWidth / 2;
  104.             viewport.y = -stage.stageHeight / 2;
  105.  
  106.             //Add viewport to the isoSprite
  107.             isoSprite.sprites = [viewport];
  108.            
  109.             //Add the isoSprite and playerHelper to the isoScene
  110.             isoScene.addChild(isoSprite);
  111.             isoScene.addChild(playerHelper);
  112.            
  113.             //Add the isoScene to the isoView
  114.             isoView.addScene(isoScene);
  115.            
  116.             //Add the isoView to the stage
  117.             addChild(isoView);
  118.         }
  119.  
  120.         protected function onGridItemClick(evt:ProxyEvent):void
  121.         {
  122.             var box:IsoBox = evt.target as IsoBox;
  123.            
  124.             //Get and set End Nodes (where are we going)
  125.             var xpos:int = (box.x)/cellSize
  126.             var ypos:int = Math.floor(box.y / cellSize)
  127.             pathGrid.setEndNode(xpos,ypos );
  128.  
  129.             //Get and set Start Node (where are we now)
  130.             xpos = Math.floor(playerHelper.x / cellSize);
  131.             ypos = Math.floor(playerHelper.y / cellSize);
  132.             pathGrid.setStartNode(xpos, ypos);
  133.  
  134.             //Find our path
  135.             findPath();
  136.         }
  137.  
  138.         protected function findPath():void
  139.         {
  140.             var astar:AStar = new AStar();
  141.             var speed:Number = .3;
  142.             if(astar.findPath(pathGrid))
  143.             {
  144.                 path = astar.path;
  145.             }
  146.            
  147.             for (var i:int = 0; i <path.length; i++)
  148.             {
  149.                 var targetX:Number = path[i].x * cellSize;
  150.                 var targetY:Number = path[i].y * cellSize;
  151.                
  152.                 Tweener.addTween(playerHelper, { x:targetX, y:targetY, delay:speed * i , time:speed, transition:"linear" } );
  153.             }
  154.         }
  155.        
  156.         override protected function onRenderTick(event:Event = null):void
  157.         {
  158.             super.onRenderTick(event);
  159.            
  160.             //Render the isoScene
  161.             isoScene.render();
  162.            
  163.             //Place our 3D object at the correct location (following our playerHelper)
  164.             sphere.x = playerHelper.screenX;
  165.             sphere.y = -playerHelper.screenY - 15;
  166.            
  167.             /*
  168.            
  169.             Set the depth of our isoSprite which holds our viewport to the proper depth.
  170.            
  171.             NOTE: as3isolib objects - the depth sorting is done automatically,
  172.             we just need to tap into that
  173.            
  174.             */
  175.            
  176.             isoScene.setChildIndex(isoSprite, isoScene.getChildIndex(playerHelper));
  177.         }   
  178.     }
  179. }

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post


Follow WovenCharlie on Twitter

Flash and the City banner
2010 Flash And The City Speaker

RSS Feed