AdvancED Flex 4 is now available to pre-order on Amazon.com. I had the privilege to work on this book with Elad Elrom and Shashank Tiwari. Once you get a copy please be sure to let us know what you think.
Charlie Schulze
Papervision2.com – Best resource for Papervision3d tutorials
AdvancED Flex 4 is now available to pre-order on Amazon.com. I had the privilege to work on this book with Elad Elrom and Shashank Tiwari. Once you get a copy please be sure to let us know what you think.
Charlie Schulze
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.
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.
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.
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.
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.
Notice that we add our sprites kind of like we add filters for a movieclip. We are passing it an array.
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.
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.
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.
Here is the full code:
In early 2008 I wrote a blog article on how to explode an image and rebuild it again. Recently this effect has been used in some amazing ways. Site's like Audi have taken this concept much further with the rows of these tiny boxes swimming in formation.
Today I decided to re-create that simple effect using the latest papervision code and provide a much needed update.
Creating this effect is actually fairly simple. You take an image, use some code to break it into smaller bitmaps which then are used as the materials for your planes. Then you just place the planes in a grid to re-create your image.
Here is a sample of the code that get's our image blocks to be used for our materials:
Once you've created your grid you just need to store the locations of all your x,y,z,rotation etc so that when you break apart the image you can easily piece it back together.
PlaneVO is nothing more than a simple value object. A value object gives us a nice strongly typed object to store the variables we want to access later.
PlaneVO.as
Now on to the full code. I have left comments throughout to explain what is happening. Try changing some of the math or swapping the image with your own. Once you mess with it for a little while you'll find it's easy to create some amazing effects.
Even if you had a chance to look at Getting started using BasicView.as this tutorial provides another example of basic texturing in Papervision.
In Papervision for the most part you have objects (planes, cubes, cones, 3D Models, etc) and then you have the textures or materials that you add to these objects. Think of it as getting a brand new iPhone and then buying a case or skin for that iPhone. We are essentially doing the same thing in principle - we have our object a cone (iPhone) and a material a bitmapMaterial (iPhone skin).
As you can see from the code above we have a cone and a bitmap texture.

In a previous tutorial (Creating a Papervision Base Template) we created a base Papervision template that we could re-use. Now however Papervision includes a form of this base template called BasicView.as
With just a few lines of code you're up and running. Here is the very simple / basic use of BasicView.as:
This very simple example you will just see a single light red plane rotating.
That is all you need to do to get started in Papervision. Test it out. Don't forget to add your 3D objects to the scene.
Here is what the BasicView.as class looks like:
Since BasicView.as extends AbstractView.as you can see a few more of the methods available to you just by extending BasicView.as

In an effort to keep the information on this site up to date over the next few weeks we will be re-writing the majority of the tutorials on this site.
All new tutorials will include:
1) More up to date PV3D code.
2) A version that can be compiled with the Flash IDE
3) A version that can be compiled with FlashDevelop, Flex etc.
4) Full source code.
Having two versions of the code, as well as full source (including pv3d code) will hopefully cut down on the confusion when getting started.
Please feel free to leave comments here for other requests. If we get several requests for features other than what has been mentioned we will do my best to incorporate them.
Enjoy and have fun.
Charlie