Popular contentToday's:All time:NavigationUser login |
Building a realtime Flash 3D animation (Part Two)Now I have my models and textures (see part one), simple though they are, in place. The next stage is to write some code to make of use them. In this section I will take a look at setting up papervision and the Tweener engines and gathering my models and textures into a AS3 Project (via FLEX Builder). (read on) In my setup Im using the Flex builder application. However Im not using any FLEX API's or libraries, instead i'm simply using the builder to compile a AS3 project. Using Flex Builder gives me the advantage of the inbuilt debugging, as well as the rich Auto completion functions. However I could, with more work, produce the same result in Flash CS3. If i used Windows there's also the excellent FlashDevelop open source solution. Firstly I needed to grab the current Tweener and Papervison libraries from SVN. At the time of coding, papervison was at its 1.5 release, and has progressed considerably towards 2.0 since then. Tweener, has also changed, and has since introduced a slightly different process for initializing and setting tweens. The first thing i do is import the libraries. For Tweener its simple: import caurina.transitions.Tweener; For Papervision you cant import the whole library with one statement but must bring in individual classes as you use them. This means I can end up with an import list such as import org.papervision3d.cameras.Camera3D; import org.papervision3d.materials.*; import org.papervision3d.objects.*; import org.papervision3d.scenes.Scene3D; import org.papervision3d.events.FileLoadEvent; import org.papervision3d.core.proto.*; import org.papervision3d.core.geom.*; I will need to not use the automatic texture loading the papervison implements for Collada models. Instead I use the Embed feature of Flex and place the directly into the SWF. This is equivalent to using a library asset in flash. For brevity i also initialize an array containing ready to use materials of each texture.
//TEXTURES
[Embed(source="/lib/blinn5SG-pts50.png")]
public var InvaderTexture0:Class;
[Embed(source="/lib/blinn1SG-body.1.png")]
public var InvaderTexture1:Class;
[Embed(source="/lib/blinn4SG-pts10.1.png")]
public var InvaderTexture2:Class;
[Embed(source="/lib/phong4SG-laser1.1.png")]
public var LaserTexture0:Class;
[Embed(source="/lib/phong5SG-ufo.png")]
public var UFOTexture0:Class;
public var textures:Array = [
new BitmapMaterial(new InvaderTexture0().bitmapData, {oneSide:true}),
new BitmapMaterial(new InvaderTexture1().bitmapData, {oneSide:true}),
new BitmapMaterial(new InvaderTexture2().bitmapData, {oneSide:true}),
new BitmapMaterial(new LaserTexture0().bitmapData, {oneSide:true} ),
new BitmapMaterial(new UFOTexture0().bitmapData, {oneSide:true} )
];
Loading modelsRather than embedding the models using the above method, i prefer to load using PV3D's Collada object:
this.invaderC = new Collada("invader5.dae");
this.invaderC.addEventListener(FileLoadEvent.LOAD_COMPLETE,meshLoaded);
I wait for this to be completed before doing any real application setup, all within the meshLoaded method. In this case I set up a small array and populate it with a reference to the named models directly inside the Collada. Finally I create an instance of the moonanimation. This class contains all the animation code for the piece.
private function meshLoaded(e:FileLoadEvent):void {
models = new Array(3);
models[0] = invaderC.getChildByName("pts50");
models[1] = invaderC.getChildByName("pts20");
models[2] = invaderC.getChildByName("pts10");
this.holder.addChild(new MoonAnimation());
}
Duplicating ModelsOne requirement for the animation (and the game) as that the individual collada models are duplicated. I.e i dont need 100 models in the collada - when i want a new invader i just duplicate a master copy. Unfortunately as of 1.5 PV3D lacked this ability. However Joa Ebert provided the following method to the PV3D list. Using it i can duplicate "simple" collada models. By simple it means it will only work for models with no child objects. Say I had a rotatable laser turret on top of the invaders heads, then it would be no use, or rather i would need to duplicate the invader and turret separately. This duplicate feature should be present in the 2.0 release of papervison.
public function cloneGeometry( geom: GeometryObject3D ): GeometryObject3D
{
var clone: GeometryObject3D = new GeometryObject3D;
clone.vertices = new Array;
clone.faces = new Array;
for ( var i: int = 0; i < geom.vertices.length; i++ )
{
clone.vertices.push( new Vertex3D(
geom.vertices[ i ].x,
geom.vertices[ i ].y,
geom.vertices[ i ].z ) );
}
for ( i = 0; i < geom.faces.length; i++ )
{
clone.faces.push(
new Face3D(
[
clone.vertices[ geom.vertices.indexOf( geom.faces[ i ].vertices[ 0 ] ) ],
clone.vertices[ geom.vertices.indexOf( geom.faces[ i ].vertices[ 1 ] ) ],
clone.vertices[ geom.vertices.indexOf( geom.faces[ i ].vertices[ 2 ] ) ]
], null, geom.faces[ i ].uv
)
);
}
clone.ready = geom.ready;
return clone;
}
In the final section I will take a look at the MoonAnimation Class and see how with only a few lines of code we can produce the animation. Thanks very much!!! VeryThanks very much!!! Very good work and tips ;) |
That's good news, but what
That's good news, but what about good old fashioned 2D :-P
http://www.acc.umu.se/~emilk/
br
Kris