Humvee in Away3DLite (and PV3D) wheels and steering

May 18, 2010


In chapter 5 of my book, I discuss how to make a car’s wheels move forwards and backwards and steer. It is actually pretty easy to do in PV3D. But in Away3DLite it is not so obvious. So in the video below I discuss the difference and show you how to get wheel movement and steering working for both PV3D and Awa3DLite.


Driving a Humvee in Away3dLite

Try It Out

Driving a Humvee

Driving a Humvee in Away3DLite


To see the code click the link below:

Read the rest of this entry »

Jiglibflash Pong Game with Levels

June 5, 2009


Here’s Pong in JiglibFlash and PV3D that I created. It’s fully explained in the book (and the Wii controller is added as well)!

Directions: Click Drag to Move Around the game. Move your mouse up and down to control the game paddle. 21 points and you win the level, get to level six, and you beat the computer. I’ve never made it to level six…

A bounding box had to be created by Hacking the PV3D plugin created by Bartek Drozd…the rest was easy.

Pong in 3D

Pong in 3D



Of course many thanks to Seb Lee-Delisle, who created a similar game in PV3D, it wasn’t Jiglib and not mutli-level, but it was a good place to start and Seb released it under the Commons license-thanks Seb! And thanks to Barteck Drozd who created the PV3D Jiglib plugin that I hacked to create a Pong Bounding box.

The book is almost done…when it is, I’ll start posting more frequently…sorry about the down time.

Flash CS4 Exploding House of Cards (3D Particle Class)

April 15, 2009


Exploding an object is serious gaming fun. There’s just something about the human psyche that loves to see things blow up. In this post, we show you how to create a card house in Flash CS4 and then how to blow it up by treating the cards as particles.

Exploding House of Cards

Exploding House of Cards



YouTube Video 1: Building a House of Cards in CS4 (Part 1)

YouTube Video 2: Building a House of Cards in CS4 (Part 2)

YouTube Video 3: Making Your CS4 Card House Explode (Part 3)


The first step in making things explode is to add a spin (x, y, z) property to your Particle3D class (developed in the book).

You can accomplish this in the following three steps:

Exploding an object is serious gaming fun. There’s just something about the human psyche that loves to see things blow up. The first step in making things explode is to add a spin (x, y, z) property to your Particle3D class. You can accomplish this in the following three steps:

Step 1: To keep things straight rename your Particle3D (developed in the book) class to ParticleBlowUp and add a spin (x, y, z) property

public var spinX:Number;
public var spinY:Number;
public var spinZ:Number;

Step 2: In the constructor function, set the spin (x, y, z) equal to zero.

spinX = 0;
spinY = 0;
spinZ = 0;

Step 3: And in your animation method “myLoop” update the rotation of the particle by iterating the spin (x, y, z) amount.

this.rotationX += spinX;
this.rotationY += spinY;
this.rotationZ += spinZ;

And that’s all you have to do to your Particle3D (now named ParticleBlowUp) class. See the book for more details…

You’re Only Half Way

But to get your particle system to explode you want to transfer a multi-part movie clip into your Particle class (using polymorphism). Then iterate over the elements of that movie clip, so you can spin those elements off into space in different directions, simulating an explosion.

To do this, make the following changes to your Particle3D class shown below:

1. Remove the “extends Sprite” statement from your ParticleBlowUp class; this allows you to bring in an object into your ParticleBlowUp class.

2. Create a public property “obj” and data type it as a Display Object:

public var obj:DisplayObject

3. Add “obj” to your constructor method, declare “obj” as an object in your constructor method.
4. Finally, change all the “this” keywords to object so that the transformations are applied to the object passed in through the constructor.

To see the rest of the discussion click the link below:

Read the rest of this entry »

Slicing Images in 3D and Adding Interactivity

April 5, 2009


One of the things I really hate about slicing up images … is slicing them. It’s just so time intensive in Photoshop, Illustrator, or Gimp and then I never get it right or the site specs change and I have to re-slice (and God forbid re-program). So I’ve developed a method for slicing them programmatically – no more hand made clothes, all made by machine! Let me show you how it works.

Click the image below to see the demo (click on the slices to rotate them, or you can drag them as well):

Split Image and Interactivity

Split Image and Interactivity


Note: You must use the Flash 10 player. I built this in Gumbo as an ActionScript project.


YouTube Demo


In this post we actually handle three important concepts

  1. Slicing an Image
  2. Polymorphism & Encapsulation
  3. Static Properties/Methods & Interactivity

These concepts are key OOP principles briefly discussed below, but are given much more detail in the book. And are essential in understanding PV3D.

Slicing an Image

Slicing an image is pretty easy using copyPixels. You just bring in your image and copy the portion of the image that is your split as shown below:

// loop through all pieces
for(var x:uint=0;x<6;x++) {
for (var y:uint=0;y<4;y++) {

// create new map piece bitmap
var newmapPieceBitmap:Bitmap = new Bitmap(new BitmapData(pieceWidth,pieceHeight));
newmapPieceBitmap.bitmapData.copyPixels(image.bitmapData,new Rectangle(x*pieceWidth,y*pieceHeight,pieceWidth,pieceHeight),new Point(0,0));

// create new sprite and add bitmap data to it
var newmapPiece:Sprite = new Sprite();
mapPiece=new MapPiece(newmapPiece,x,y);

// set location
mapPiece.x = x*(pieceWidth+5)+20;
mapPiece.y = y*(pieceHeight+5)+20;

// add to stage


You’ve got to loop twice to get both column and row as you use copyPixels to grab your slice. If you check out Gary Rosenzweig’s book ActionScript 3.0 Game Programming University you’ll find that he uses a similar slicing technique. But in addition to Gary’s approach, we use Polymorphism & Encapsulation typically found in PV3D. Their use is briefly discussed below, but is treated in greater detail in the book.

Polymorphism & Encapsulation

The heart of PV3D is encapsulation and by using polymorphism we can create a MapPiece class that enables us to easily work with the map pieces. Polymorphism is used to grab the map pieces and treat them as instantiated objects as shown in the MapPiece class below:

package objects.primitives
import flash.display.Sprite;

public class MapPiece extends Sprite
private var mapPiece:Sprite;
private var locX:uint;
private var locY:uint;
private var myXPos:Number;
private var myYPos:Number;

public function MapPiece(mapPiece:Sprite,locX:uint,locY:uint)


Interactivity is accomplished in two ways: (1) by adding a listener, and (2) using Static Properties and Methods.


The instantiated map piece has a mouse click listener added to each map piece using the code below:


Static Properties and Methods

By creating a static properties and methods class you can create reusable code. This is done for the drag and drop class shown below.

package utils
import flash.display.Sprite;

public class DragDropStatic
public function DragDropStatic()


public static function DragDrop(mySprite:Sprite):void
mySprite.addEventListener(MouseEvent.MOUSE_DOWN, dragMe);
mySprite.addEventListener(MouseEvent.MOUSE_UP, dropMe);
function dragMe(event:MouseEvent):void
function dropMe(event:MouseEvent):void


Once the class is created then it’s easily executed using


All of this is handled in greater detail in Chapter 6 of the book.

Check out the source code by downloading it from the link above or clicking below.

Read the rest of this entry »

Gaming Seminar at NKU (Notes and Links)

March 31, 2009


Here’s a few notes and links for the Gaming Seminar:

Three Types of Games

  • Simulators
  • Board Games
  • Environment Game

Particle systems are at the heart of games.

Augmented Reality

Seb Delise

Augment Example 1

Augment Example 2

Example WebCam Experiment

Making Games

In Making games there are three important areas:

  • Pedagogy…game play, genre (need a design doc – I don’t know what you are thinking)
  • Graphics and Models
  • Programming

Seb Delise Pong Example

3D Pong Example

Barney Car Modeling

Building the Flintstones Car for Papervision3D

March 31, 2009


Carlos Ulloa, with his brainchild Papervision3D, released a cool looking sports car a while back and John Lindquist picked it up on his site and released the code. But what was not released was how to create such a car and export it as a controllable Collada file for use in PV3D. So, I built the Flintstones “Barney Rubble Car” below to illustrate the process.

In this post, we will show you how to create a controllable vehicle and more…

Barney Rubble Car in 3DSMax

Barney Rubble Car in 3DSMax


(Click the screen to activate the car, then control it using your arrow keys-use double arrows left+up to get a continuous left turn…)




The video above walks you through the creation of the car. So I won’t go through that. We will start with once your Collada file is exported.

After Creating Your Barney Car

Just as you would put a model together, as you create the different parts in 3DSMax, you just place them together. The important part is that you give each one of them a name so you can control them with ActionScript. In this particular example the following naming convention was used:

  • CarBody-your “Barney Log” car body
  • FRWheel-your front right wheel which links to your steerFR (disk brake)
  • FLWheel-your front left wheel
  • steerFR-your front right disc brake which acts as the linkage container for your FRWheel
  • steerFL-your front left disc brake which acts as the linkage container for your FLWheel
  • RRWheel-your rear right wheel
  • RLWheel-your rear left wheel

So after creating and naming all the elements of your “Barney car” in 3DSMax (for example), export your car as a Collada file.
When you look at a Collada file for the first time you might be shocked. It looks somewhat horrific at first. But actually Collada files are very simple. They are organized into libraries. Each library typically contains some important aspect of 3D, such as lights, cameras, geometry, animation, physics, and so on…
In the case of the “Barney car” above, you’re interested in examining the visual_scenes library. Collada files can be opened in Dreamweaver or Flex. When examining the visual_scenes library nodes you’ll find all the elements created by our 3DSMAX.

<node id=”CarBody-node” name=”CarBody” type=”NODE”>
<node id=”RRWheel-node” name=”RRWheel” type=”NODE”>
<node id=”RLWheel-node” name=”RLWheel” type=”NODE”>
<node id=”steerFR-node” name=”steerFR” type=”NODE”>
<node id=”FRWheel-node” name=”FRWheel” type=”NODE”>
<node id=”steerFL-node” name=”steerFL” type=”NODE”>
<node id=”FLWheel-node” name=”FLWheel” type=”NODE”>

When importing the “Barney car” Collada file into PV3D, you’ll use these names to control your car.

Grabbing Names from Collada

Your first task, after importing the Collada file into PV3D, is to grab these names from the Collada file so you can use them in your program.

// Steering disc for front wheels
steerFR = collada.getChildByName( “steerFR”, true );
steerFL = collada.getChildByName( “steerFL”, true );

// Rotation of wheels
wheelFR = collada.getChildByName( “FRWheel”, true );
wheelFL = collada.getChildByName( “FLWheel”, true );
wheelRR = collada.getChildByName( “RRWheel”, true );
wheelRL = collada.getChildByName( “RLWheel”, true );

These names are stored in appropriate variables and used to control your car. You’ll first investigate the steering mechanism.

Creating a Steering Mechanism

Key to creating a steering mechanism is using linking. The steering mechanism is created in 3DSMax by linking the front wheels to their corresponding disc brakes. Since the tires are children of the disc brakes, when the disc brakes are rotated the tires rotate with them. And when the car is moved forward all the tires rotate together in sequence.

Wheel Linkage

Wheel Linkage

Putting this all together in the code below illustrates how the car’s wheels are maneuvered in PV3D. The steering code is surprisingly simple and consists of only two lines of code.

steerFR.rotationY = steer;
steerFL.rotationY = steer;

So as the steering parameter is changed the rotationY for your disc is changed, thus changing the angle of your wheel. Next you’ll learn to make your wheels roll.

Rolling Wheels and Moving Car

As the speed of you car is increased the wheel yaw is also increased making the wheels turn.

var roll :Number = speed*.4;
wheelFR.yaw( roll );
wheelFL.yaw( roll );
wheelRL.yaw( roll );
wheelRR.yaw( roll );

// Turn your car
car.yaw( speed * steer / 500 );
// Move car forward
car.moveLeft( speed )

Finally, the car itself is turned using the yaw command and moved forward (or backwards) using moveLeft, where the parameter in the move method is the distance to move in pixels. Now you might have been expecting moveForward to be used, and in other cases it is. It just depends on your geometry of how your car was created in 3DSMax, and in this case moveLeft actually took you forward.

To see all the car code click below or download the source above.

Read the rest of this entry »

Importing Collada into Papervison3D

March 29, 2009


In PV3D there are two Collada parsers: Collada and DAE. The DAE parser is actually an improved version of Collada parser which includes animation.

When working with Collada files, there are five commonly used scenarios found in PV3D:

  • Single Objects with UVMaps
  • Multiple Objects with UVMaps
  • Single Objects with Multiple Images
  • Interactive Objects (or Vehicles) and Environments
  • Animated Objects

In this post, you learn about Single and Multiple Objects with Simple Images. Click the image below to see a demo:

Moon Orbiting the Earth in 3DSMax

Moon Orbiting the Earth in 3DSMax





Single and Multiple Objects with Simple Images are obviously the simplest of all the scenarios in PV3D. In the example above of the moon orbiting the earth, 3DSMax is used to do the modeling. But the procedure presented in this post is similar for other modeling software packages as well.

This is how you do it!

An object is created by a modeling program, such as 3DSMax, and a simple image is placed on that object. In 3DSMax this is done using the material editor. Each material and object is given a name so that it can be controlled by the PV3D program once the Collada file, created by your modeling program, is imported into PV3D.

Once the Collada file is exported from 3DSMax and brought into PV3D, the created objects can be easily manipulated by referring to the object names contained in the exported Collada file. If you forget what you called them during the modeling process, these names can be viewed by opening the Collada file in an editor such as Dreamweaver or Flex and navigating to the geometries library and geometry tags.

<geometry id=”earth-mesh” name=”earth”>
<geometry id=”moon-mesh” name=”moon”>

In this case the names are earth and moon.

Manipulating objects in a Collada file using AS3 is key to creating dynamic game content and use this procedure often. Importing a Collada file into PV3D is an easy 3 step process:

Importing Collada files into PV3D

Step 1: Import the Collada parser
import org.papervision3d.objects.parsers.Collada;

Step 2: Declare collada var and datatype it to Collada
private var collada:Collada;

Step 3: Instantiate the Collada class and fill in the appropriate parameters
collada = new Collada(“MoonEarth.DAE”,null,.1);
In this case, the material parameter of the Collada parser is set to null since the material is imported from the reference inside of the Collada file, found in the images library, as shown below.

<image id=”earth.jpg” name=”earth_jpg”>
</image><image id=”moon.jpg” name=”moon_jpg”>

Once the images are loaded, the onColladaDone method is executed which sets the planets into place and motion.

collada.addEventListener(FileLoadEvent.COLLADA_MATERIALS_DONE, onColladaDone);

To see the rest of the discussion check out Chapter 5 of the book. To see the complete code click the more button below or download the source

Read the rest of this entry »