Gaming Seminar at NKU (Notes and Links)

March 31, 2009

Intro

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

http://woveninteractive.com/dev/nascar/flartoolkit-nascar.html

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

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.

Read the rest of this entry »


Importing Collada into Papervison3D

March 29, 2009

Intro

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

Demo

Source

YouTube

Discussion

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”>
<init_from>./assets/earth.jpg</init_from>
</image><image id=”moon.jpg” name=”moon_jpg”>
<init_from>./assets/moon.jpg</init_from>
</image>

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 »


Creating Quake 2 (MD2) Models for Papervision3D

March 26, 2009

Intro

OK, after the last post on MD2, if I don’t show you how to create your own MD2 models I haven’t done my job…so let’s do it!

Making your own Quake 2 (MD2) models is a must if you are going to be successful. The process described here will work for both 3DSMax and Maya, but there are similar procedures for other modeling applications. There is both good and bad news here.

The bad news: there are lots of steps

The good news: they are all easy

It’s a four step process.

Four Steps

Four Steps

 Resource Files Download (3DSModels, images, MD2 files, etc…)

Discussion

To make things easy, and completely understandable, we are going to YouTube our way through these four steps:

Step 1: Create Your Model

There are extensive tutorials on the book’s blog on creating 3DSMax models and texture. Check them out at

http://professionalpapervision.wordpress.com/3d-modeling/

So we will not repeat all that info, but just create a very simple model to demonstrate the process. Import to the process is to make sure you hit the 7 key to keep those polygons down as you build.

Watch Your Polygons

Watch Your Polygons

Step 2: Texture and Export Your Model

It’s actually simpler to put a texture on a model in Blender. So here’s an outline of how it’s done in 3DSMax (make sure you watch the video below as well)

  1. After creating your model in 3DS Max, add the Unwrap UVW modifier
  2. After selecting your model, select Face from the Unwrap UVW modifier
  3. From the parameters menu (of Unwrap UVW modifier) select Edit
  4. From the UVWs menu (pop up) select mapping and select flatten mapping and click OK (presets should be fine)
  5. You should now be able to see the different sections of your house, then click on tools and select Render UVW Template
  6. In the Render UVs popup change the dimension appropriately (for mitmapped textures 256 or below you get hardware acceleration, but you give up resolution – so it’s a trade off – just use resolution when you need it)
  7. Then from the Mode drop down menu choose solid and then click Render UV Template
  8. Your Render Map should pop up, click on the disk icon to save this map to your hardrive for editing in Photoshop, Gimp, or your favorite image editor (defaults should be OK when saving image to hardrive)
  9. After editing your texture map and saving it (in this instance I saved it as a png since that format works well in Flex), from the Edit UVWs popup choose Pick Texture from the UV drop down box and the Material/Map Browser popup will appear.
  10. From the Material/Map Browser select Bitmap and navigate to and select your image. Your image should appear in the Edit UVWs window overlay (as in Blender use this window to edit your image position).
  11. Now place your texture on your house by hitting the m-key, select the first sphere, click the button next to the diffuse label. And your Material/Map Browser will popup, choose bitmap and navigate to and select your image. That image will now appear on your sphere.
  12. Drag the image from the sphere to your house. Click the “Show Standard Map in Viewport” button to see the uv map on your house (or do a quick render to see it).
  13. Click the export button from the file menu and choose the 3D Studio (*.3DS) format , name your file, and click save
  14. Choose Preserve MAX’s Texture Coordinates and Click OK.

Step 3: Prepare Your Model in MilkShape

You can download MilkShape 3D and a MD2 Viewer from

http://chumbalum.swissquake.ch/

The steps for creating a MD2 model for PV3D starting with 3DSMax (or Maya) are as follows:

  1. After creating your model in 3DSMax (or Maya)
  2. Export it as a 3ds file (fdx file)
  3. Import this file into MilkShape by choosing Autodesk 3DS… (or Maya)
  4. Click the model tab, then the joint button and insert a joint by clicking on a vertex of your model
  5. Select all vertices (control a)
  6. Go to the joints tab and click assign
  7. Check to make sure animation is correct (single frame for no animation)
  8. Export as an MD2 file (ignore the no md3.qc warning not loading into quake)
  9. Check it out using the MD2 model viewer found on the MilkShape site or the PV3D viewer provided on the book’s website.

Step 4: Export to PV3D Model Viewer

After exporting to the MD2 format, change the markers XML data to include the pertinent resources, and upload those resources (xml data, MD2, image, and zip file) to your server. In an upcoming chapter, we will show you how to create an Air viewer.

In a previous post on

PV3D Quake 2 (MD2) Model Viewer and Download

we demonstrated a Papervision3D Viewer. You’ll now load that viewer with the model you created previously.

You made it! Lots of steps, but the process is pretty fast. I can get through it in about 30 minutes, but my designers take a couple of hours. Of course, that’s why their designs rock!!!


Intro e4x Class Outline (Building a Data Driven Website)

March 24, 2009

Intro

Here’s the outline to the Intro e4x Class Outline (Building a Data Driven Website) held at NKU.

e4x means you can use dot syntax to grab data, or create (delete) tags and insert (remove) data. The beauty of using dot syntax is that you can refer to tags by their names-isn’t that cool, no more complex XML language.

1. Look at Applications

2. What’s XML
3. Example 1
4. E4X Examples
5. Dot Syntax
6. Example 2
7. Importing XML into Flex
8. Example 3
9. Uploading your application to the Web
10. Example 4
11. Grabbing & Changing XML
12. What’s PHP
Resource Files
A. Chapter 4 & 8
B. Quake 2 Application
C. XML/PHP applications


PV3D Quake 2 (MD2) Model Viewer and Download

March 24, 2009

Intro

Using MD2 in PV3D was seen, at first, as the best of all worlds. MD2 models are low polygon and work well in PV3D. But finding models that work in PV3D, or creating your own, is a specialized process. Maybe even a lost or dying art…though the fact that there are many great websites out there that use MD2, would seem to contradict this statement.

Quake II Model Viewer

Quake II Model Viewer

Demo
Download
YouTube:

Discussion

In the book, and on the book’s website the MD2 models are discussed in detail. The viewer is provided to help you get started with some elementary code that brings MD2 models into PV3D and provides a number of MD2 models that you can download directly from the application.

In addition, check out the upcoming post on building a data driven website which uses this viewer to demonstrate the power of e4x.

Model Anxiety

Finding good MD2 models on the web can be a challenge. It seems to be one of the great frustrations of working with the MD2 format. A number of model packs can be found on the web at places like

http://www.md2.sitters-electronics.nl/index.html ( static models)

http://telias.free.fr/models_md2_menu.html (animated models)

But keep in mind not all of the models found on the web will work in PV3D, and in the long run you’ll need to be able to make your own models and modify them to be successful. An alternative to the MD2 format is the Collada format which will be discussed in great detail in the book and upcoming post. The big advantage of Collada files over MD2 is that they are human readable.

Importing Quake II Models into PV3D

The procedure for putting MD2 models into PV3D is simple and the documented code snippet that enables you to do that is shown below.

private function initMD2():void {

// Instantiate your skin as a BitmapFileMaterial
var myMD2Skin:BitmapFileMaterial = new BitmapFileMaterial(“assets/mySkin.jpg”, true);

// Instantiate an MD2 object (use true for animation, false otherwise)
var myMD2Object:MD2 = new MD2(true);

// Give your object a name so you can control it in the display list
myMD2Object.name = “md2Object1”;

//Load your MD2 model and its skin
myMD2Object.load(‘assets/myModel.md2′, mySkin, framerate, scale);

// Add you MD2 object to the state using addChild
scene.addChild( myMD2Object);
}

The Big Trick to Handling Multiple Models

In the application we are switching from model to model seamlessly. The big trick to handling multiple models in PV3D is to treat your models as a particle system. Each model has its own display object which is loaded into an array and is annihilated or created when needed as shown below:

Code for Loading Models as Particles

for(var j:uint = 0; j < markersCount; j++)
{
var item:MD2 = new MD2();
particles_ary.push(item);
}

Code for Annihilating and Adding Particles (or models)

movieParent.removeChild(particles_ary[prevIndex]); particles_ary[prevIndex].load(myDataGrid.selectedItem.address, myCarSkin, 15, 1);

movieParent.addChild(particles_ary[prevIndex])

Treating applications as a particle system is covered in great detail in Chapter 6 of the book. To see the entire code for the model viewer you can download it or click the button below.

Read the rest of this entry »


Animating Multiple Pixel Bender Lights

March 21, 2009

Intro
Having multiple lights in PV3D is a desired effect. But after going through the lightmap classes, let me say that it’s impossible without an major rewrite. But with Pixel Bender all you do is add another term to your pbk filter…let’s do it!

Animating Pixel Bender Lights

Animating Pixel Bender Lights

Demo

Source

Discussion

It’s an amazingly simple process. Just add another term to your pixel bender light equation as shown below:

Adding Multiple Images to PV3D

Adding Multiple Images to PV3D

The example above only shows two lights, but you can have as many lights as you want just by adding additional light terms:

The pixel bender code looks like this

float2 outcoord = outCoord();
float attn = (brightness1/((distance(outcoord, center1)+radius1)))+(brightness2/((distance(outcoord, center2)+radius2)));

dst = attn* sampleNearest(src, outcoord);
dst.a=1.0;

Wow, only five lines of code to have multiple light sources – get out of here!

Animating Your Sources

Once you’ve set your shader up then animating it is pretty easy. If you aren’t sure how to set up your shader for animation, check out Lee Brimlow’s video on animating shaders. I do it a little differently than Lee, but not by much. Here are the steps for animating the lights:

  1. Increment your oscillation parameter osc++
  2. Calculate sine and cosine based upon your incremented osc
  3. Update your light positions
  4. Apply the update to your image

The fully documented code is shown below:

private function loop(e:Event):void{

//Increment your oscillation parameter
osc++;
//Calculate sine and cosine
var cos:Number=150*Math.cos(osc/10);
var sin:Number=150*Math.sin(osc/10);
//Update your light positions
shader.data.center1.value = [sin+400, cos+180];
shader.data.center2.value = [cos+200, sin+180];
//Apply the update to your image
image.filters = [filter];
//Rotating your image holder
holder.rotationY+=.25;
}

If you are aware of how hard this is to do in PV3D, you’re going wow…tell me more…and we will…

For the entire source code download the source above, or check out the link below:

Read the rest of this entry »


Follow

Get every new post delivered to your Inbox.