Collada and Jiglib – how to get it working!

Into

I’ve been working on a number of Collada Jiglib projects so I thought I’d put a few videos (and some code) out there so people can use the Collada format in PV3D or Away3d. In the tutorials:

Video1: I start with Cinema4D create a die export it as a Collada file.

Video2: I show you how to bring it into Away3d and show how to hook it up and control it in Jiglib.

Video3:  I show you how to bring the Collada file into PV3D, controlling it in PV3D is very similar to that of Away3d and I’ll be doing a ton of other videos on building PV3D games in the further. Enjoy!

Demo

The demo is similar to the one created by Yagiz Gurgul on Active Tuts but I’ve upgraded it to Flash 10 and I am using a Collada file for the Dice as opposed to the standard square primitives that Yagiz used. In addition, I’ve moved it over to Flash Builder design view which gives me a ton of components and faster design, but does slow the 3D a little.

Dice and Table

Dice and Table

Videos

Collada and Jiglib – Building Cinema4D Dice

Collada and Jiglib – Controlling in Away3d

Collada and Jiglib – Loading into PV3D

Stub Code for Controlling in Away3d (Complete Code Below)

Here is the stub code for bringing in the Collada file and controlling it in Away3d.

private function createmyDice():void {

//model1 = Collada.parse(Charmesh, {scaling:10, material:material, mouseEnabled:false});
collada = new Collada();
collada.scaling = 1.4;

//var carSkin:ObjectContainer3D = ObjectContainer3D(event.loader.handle);
model1 = collada.parseGeometry(MyDie) as ObjectContainer3D;
model1.materialLibrary.getMaterial(“ID3″).material = material4;
model1.materialLibrary.getMaterial(“ID8″).material = material2;
model1.materialLibrary.getMaterial(“ID13″).material = material3;
model1.materialLibrary.getMaterial(“ID18″).material = material1;
model1.materialLibrary.getMaterial(“ID23″).material = material5;
model1.materialLibrary.getMaterial(“ID28″).material = material6;

dieBody= new JBox(new Away3dMesh(model1), 28, 28, 28);
physics.addBody(dieBody);

//model1.mouseEnabled = true;
scene.addChild(model1);
myDices.push(dieBody);
}

Stub Code for Importing into PV3D

Here is the stub code for bring the Collada file into PV3D. Controlling it is very similar to Away3d and you will be covering this in more detail in upcoming videos.

public function initCube() : void
{

// autoplay, name, loop animation
myCubeIs = new DAE(false,null,true);
myCubeIs.addEventListener( FileLoadEvent.LOAD_COMPLETE ,onmyLoad );
myCubeIs.load( ‘die.dae’ );
myCubeIs.addFileSearchPath(“assets/tex”);
myCubeIs.scale = 10;
myCubeIs.z = 300;
myCubeIs.x = -100;
myCubeIs.y = 300;
myCubeIs.rotationY = -90;

}

Full Source

To see the complete source for the Away3d version click the link below:

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx” minWidth=”955″ minHeight=”600″
creationComplete=”initApp()”

>

<fx:Style>
@font-face {
src:url(“assets/fonts/Freshman.ttf”);
fontFamily: Freshman;

}

.myEmbeddedStyle {
fontFamily:Freshman;
fontSize:20;
}

</fx:Style>

<fx:Script>
<![CDATA[

import away3d.cameras.*;
import away3d.containers.*;
import away3d.core.utils.Cast;
import away3d.lights.DirectionalLight3D;
import away3d.loaders.*;
import away3d.materials.*;
import away3d.primitives.*;
import away3d.primitives.data.CubeMaterialsData;

import jiglib.geometry.JBox;

import flash.display.*;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.*;
import flash.geom.*;

import jiglib.geometry.JBox;
import jiglib.math.JNumber3D;
import jiglib.physics.RigidBody;
import jiglib.plugin.away3d.Away3DPhysics;
import jiglib.plugin.away3d.Away3dMesh;

import mx.managers.SystemManager;

import spark.primitives.*;

private var collada:Collada;
[Embed(source="assets/walltexture.png")]
private var Wall:Class;
[Embed(source="assets/groundtexture.png")]
private var Ground:Class;

//collada file for mario
[Embed(source="die.dae",mimeType="application/octet-stream")]
private var MyDie:Class;

//texture
[Embed(source="assets/tex/diceTexture1.png")]
private var TexMap1:Class;
//texture
[Embed(source="assets/tex/diceTexture2.png")]
private var TexMap2:Class;
//texture
[Embed(source="assets/tex/diceTexture3.png")]
private var TexMap3:Class;
//texture
[Embed(source="assets/tex/diceTexture4.png")]
private var TexMap4:Class;
//texture
[Embed(source="assets/tex/diceTexture5.png")]
private var TexMap5:Class;
//texture
[Embed(source="assets/tex/diceTexture6.png")]
private var TexMap6:Class;

private var scene:Scene3D;
private var camera:HoverCamera3D;
private var view:View3D;
private var light:DirectionalLight3D;
private var physics:Away3DPhysics;

private var material1:BitmapMaterial;
private var material2:BitmapMaterial;
private var material3:BitmapMaterial;
private var material4:BitmapMaterial;
private var material5:BitmapMaterial;
private var material6:BitmapMaterial;

private var model1:ObjectContainer3D;
private var dieBody :JBox;

private var boxWidth:Number = 250;
private var boxHeight:Number = 30;
private var boxDepth:Number = 250;
private var boxThickness:Number = 10;

private var wallTexture:WhiteShadingBitmapMaterial = new WhiteShadingBitmapMaterial( Cast.bitmap(Wall));
private var groundTexture:WhiteShadingBitmapMaterial = new WhiteShadingBitmapMaterial( Cast.bitmap(Ground));

private var myDiceScale:Number = 30;
//private var myDices:Array = new Array();
private var myDices:Vector.<RigidBody> = new Vector.<RigidBody>();
private var myTestArray:Array = [1,2,3,4];
private var myDiceRandomForce:Number = 20;

private function initApp():void{

initAway3D();
initMaterials();

createWalls();
createmyDice();
createmyDice();
resetOnlyPositions()
initListeners();

}

private function initMaterials():void
{
material1 = new BitmapMaterial(Cast.bitmap(TexMap1));
material2 = new BitmapMaterial(Cast.bitmap(TexMap2));
material3 = new BitmapMaterial(Cast.bitmap(TexMap3));
material4 = new BitmapMaterial(Cast.bitmap(TexMap4));
material5 = new BitmapMaterial(Cast.bitmap(TexMap5));
material6 = new BitmapMaterial(Cast.bitmap(TexMap6));

}

private function initAway3D():void {
scene = new Scene3D();

camera = new HoverCamera3D();
camera.distance = 400

light = new DirectionalLight3D({color:0xFFFFFF, ambient:0.25, diffuse:0.75, specular:0.9})
scene.addChild(light)

view=new View3D({scene:scene,camera:camera});
view.x=systemManager.stage.stageWidth/2;
view.y=systemManager.stage.stageHeight/2;
mySprite.addChild(view);

physics = new Away3DPhysics(view,4);

}

private function createWalls():void {
var left:RigidBody = physics.createCube({width:boxThickness, height:boxHeight, depth:boxDepth});
left.movable = false;
left.x = -(boxWidth+boxThickness)/2;
Away3dMesh(left.skin).mesh.material = wallTexture;

var right:RigidBody = physics.createCube({width:boxThickness, height:boxHeight, depth:boxDepth});
right.movable = false;
right.x = (boxWidth+boxThickness)/2;
Away3dMesh(right.skin).mesh.material = wallTexture;

var front:RigidBody = physics.createCube({width:boxWidth, height:boxHeight, depth:boxThickness});
front.movable = false;
front.z =  (boxDepth+boxThickness)/2;
Away3dMesh(front.skin).mesh.material = wallTexture;

var back:RigidBody = physics.createCube({width:boxWidth, height:boxHeight, depth:boxThickness});
back.movable = false;
back.z = -(boxDepth+boxThickness)/2;
Away3dMesh(back.skin).mesh.material = wallTexture;

var ground:RigidBody = physics.createCube({width:boxWidth, height:boxThickness, depth:boxDepth, segmentsW:2, segmentsH:2});
ground.movable = false;
ground.y = -(boxHeight+boxThickness)/2;
Away3dMesh(ground.skin).mesh.material = groundTexture;
Away3dMesh(ground.skin).mesh.pushback = true;
}

private function createmyDice():void {

//model1 = Collada.parse(Charmesh, {scaling:10, material:material, mouseEnabled:false});
collada = new Collada();
collada.scaling = 1.4;

//var carSkin:ObjectContainer3D = ObjectContainer3D(event.loader.handle);
model1 = collada.parseGeometry(MyDie) as ObjectContainer3D;
model1.materialLibrary.getMaterial(“ID3″).material = material4;
model1.materialLibrary.getMaterial(“ID8″).material = material2;
model1.materialLibrary.getMaterial(“ID13″).material = material3;
model1.materialLibrary.getMaterial(“ID18″).material = material1;
model1.materialLibrary.getMaterial(“ID23″).material = material5;
model1.materialLibrary.getMaterial(“ID28″).material = material6;

dieBody= new JBox(new Away3dMesh(model1), 28, 28, 28);
physics.addBody(dieBody);

//model1.mouseEnabled = true;
scene.addChild(model1);
myDices.push(dieBody);
}

private function resetAllmyDices(e:Event):void {
for(var i:int = 0; i<myDices.length; i++) {
myDices[i].moveTo( new Vector3D(0, 100 + i*(myDiceScale+10) , 0 ) );
addRandomForce(myDices[i]);
}
}
private function resetOnlyPositions():void {
for(var i:int = 0; i<myDices.length; i++) {
myDices[i].moveTo( new Vector3D( 0, 100 + i*(myDiceScale+10) , 0 ) )
}
}
private function addRandomForce(rigid:RigidBody):void {

var forceX:Number =  20 + Math.random()*( myDiceRandomForce );
var forceY:Number =  20 + Math.random()*( myDiceRandomForce );
var forceZ:Number =  20 + Math.random()*(myDiceRandomForce  );

rigid.addBodyForce(new Vector3D(forceX,forceY,forceZ) , new Vector3D( rigid.x + myDiceScale ,rigid.y,rigid.z) )
rigid.addBodyForce(new Vector3D(-forceX,-forceY,-forceZ) , new Vector3D(rigid.x – myDiceScale,rigid.y,rigid.z) )

}

private function initListeners():void {
systemManager.stage.addEventListener(Event.ENTER_FRAME, render);
systemManager.stage.addEventListener(MouseEvent.MOUSE_DOWN,resetAllmyDices);
}

private function render( e:Event ):void {
view.render();

camera.panAngle  = systemManager.stage.mouseX/systemManager.stage.stageWidth*360;
camera.tiltAngle = systemManager.stage.mouseY/systemManager.stage.stageHeight*30;
camera.hover();
physics.step();

light.x = camera.x;
light.y = camera.y;
light.z = camera.z;
}

//Jesus is Lord!

]]>
</fx:Script>

<s:BitmapImage id=”myBackGround”  source=”@Embed(‘assets/background.jpg’)”  width=”100%” height=”100%” />

<s:SpriteVisualElement id=”mySprite” />
<s:RichText x=”37″ y=”46″ color=”#F6D4D4″ styleName=”myEmbeddedStyle” fontSize=”14″ text=”Click Screen to Roll Dice”/>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>
</s:Application>

About these ads

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: