Building the Flintstones Car for Papervision3D

Intro

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

Demo

(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…)

Source

YouTube

Discussion

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 );
steerFR.rotationX=steerFL.rotationX=-90;

// 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.

Barney Code

package
{
import flash.events.Event;

import flash.display.Bitmap;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import flash.utils.ByteArray;
import flash.text.TextField;

import flash.display.*;

import org.papervision3d.events.FileLoadEvent;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.parsers.Collada;
import org.papervision3d.objects.parsers.DAE;
import org.papervision3d.view.BasicView;

import org.papervision3d.view.layer.ViewportLayer;
import org.papervision3d.view.layer.util.ViewportLayerSortMode;

public class BarneyCar extends BasicView
{
private var car:Collada;

private var steerFR:DisplayObject3D;
private var steerFL:DisplayObject3D;

private var wheelFR:DisplayObject3D;
private var wheelFL:DisplayObject3D;
private var wheelRR:DisplayObject3D;
private var wheelRL:DisplayObject3D;

private var topSpeed:Number = 0;
private var topSteer:Number = 0;
private var speed:Number = 0;
private var steer:Number = 0;

private var keyRight:Boolean = false;
private var keyLeft:Boolean = false;
private var keyForward:Boolean = false;
private var keyReverse:Boolean = false;

private var myText:TextField = new TextField();

public function BarneyCar()
{
//Set the size to scale to stage
super(0,0,true);
initScene();

//Add your text
myText.width = 500;
myText.x =50;
myText.y = 20;
myText.scaleX=myText.scaleY=1.4;
myText.textColor = 0xFFFFFF;
myText.text = “Click the screen to activate the car & then use your arrow keys.”;
addChild(myText);

}

private function initScene():void
{
//Create the Collada Instance, file, materials are null, and scale to a tenth.
car = new Collada(“SimpleCar2.DAE”,null,.1);
opaqueBackground=0;
stage.quality = StageQuality.MEDIUM;
//Add Listeners
car.addEventListener(FileLoadEvent.COLLADA_MATERIALS_DONE, onColladaDone);
car.addEventListener(FileLoadEvent.LOAD_ERROR, onColladaError);
}

private function onColladaDone(event:FileLoadEvent):void
{

//Set your Camera’s
camera.y=1000;
camera.z=-3000;

//Add your Collada to the scene.
scene.addChild(car);
stage.addEventListener( KeyboardEvent.KEY_DOWN, keyDownHandler );
stage.addEventListener( KeyboardEvent.KEY_UP, keyUpHandler );

// Steering disc for front wheels
steerFR = car.getChildByName( “steerFR”, true );
steerFL = car.getChildByName( “steerFL”, true );
steerFR.rotationX=steerFL.rotationX=-90;

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

//Start rendering.
startRendering();
}

private function onColladaError(event:FileLoadEvent):void
{
trace(“error loading collada”);
}

private function updateCar():void
{

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

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

// Steer car
car.yaw( speed * steer / 500 );

// Move car
car.moveLeft( speed );
}

private function driveCar():void
{
// Speed
if( keyForward )
{
topSpeed = 55;
}
else if( keyReverse )
{
topSpeed = -55;
}
else
{
topSpeed = 0;
}

speed -= ( speed – topSpeed ) / 10;

// Steer
if( keyRight )
{
if( topSteer < 35 )
{
topSteer += 1.5;
}
}
else if( keyLeft )
{
if( topSteer > -35 )
{
topSteer -= 1.5;
}
}
else
{
topSteer -= topSteer / 24;
}

steer -= ( steer – topSteer ) / 2;
}

private function keyDownHandler( event :KeyboardEvent ):void
{
switch( event.keyCode )
{
case “W”.charCodeAt():
case Keyboard.UP:
keyForward = true;
keyReverse = false;
break;

case “S”.charCodeAt():
case Keyboard.DOWN:
keyReverse = true;
keyForward = false;
break;

case “A”.charCodeAt():
case Keyboard.LEFT:
keyLeft = true;
keyRight = false;
break;

case “D”.charCodeAt():
case Keyboard.RIGHT:
keyRight = true;
keyLeft = false;
break;
}
}

private function keyUpHandler( event :KeyboardEvent ):void
{
switch( event.keyCode )
{
case “W”.charCodeAt():
case Keyboard.UP:
keyForward = false;
break;

case “S”.charCodeAt():
case Keyboard.DOWN:
keyReverse = false;
break;

case “A”.charCodeAt():
case Keyboard.LEFT:
keyLeft = false;
break;

case “D”.charCodeAt():
case Keyboard.RIGHT:
keyRight = false;
break;
}
}

override protected function onRenderTick(event:Event=null):void
{

if( car )
{
driveCar();
// Update car model
updateCar();
}

super.onRenderTick(event);
}

}
}

About these ads

One Response to Building the Flintstones Car for Papervision3D

  1. [...] > Building the Flintstones Car for Papervision3D « Professional Papervision3D Book [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: