Kasta tärning med Jiglib Physics Engine och Away3D

I den här handledningen bygger vi en låda som vi kan kasta tärning på. För att göra detta använder vi Away3D som 3D-motorn och Jiglib som fysikmotor. Låt oss fastna i ...

Steg 1: Ny ActionScript 3.0-fil

Som titeln föreslår, först skapar vi en ny ActionScript 3.0-fil.

Steg 2: Ändra profil

På fliken Egenskaper trycker du på knappen Redigera.

Steg 3: Välj Flash Player Version

Välj Flash Player 9-profilen och klicka på OK.

Steg 4: Få Away3D-motorn!

Spara filen som "3D Dice.fla" i en ny mapp som heter "3D Dice". Ladda ner nu Away3D-motorn från Away3D-nedladdningar. Vi använder version 2.3.3 för Flash Player 9. Packa upp ett arkiv och kopiera alla mappar i mappen "3D Dice".

Steg 5: Få Jiglib Physics Engine för Flash!

Du måste installera ett SVN-program för att få dessa källfiler. Här är SVN-adressen. Om du inte vill hantera allt så kan du också hämta dem från källfilerna för denna tut. När du har flyttat Away3D- och Jiglib-klasserna till din 3D Dice-mapp ska dina dokument se ut så här:

Steg 6: Importera texturer

Jag har ritat några texturer för våra tärningar. Naturligtvis kan du ändra dessa men de är inte dåliga :) Du kan hitta andra texturer i källfilen.

Dice Textures:

Nu måste vi ge dem länknamn för att fästa dem i runtime (gör detta för varje bild i ditt bibliotek en efter en):

Välj Bild och högerklicka på> Egenskaper

Exportera till ActionScript> Ta bort ".png" -delen

Steg 7: Starta kodning

OK, vi är redo att börja kodning. Först importerar vi våra klasser:

importera away3d.cameras. *; importera away3d.containers. *; importera away3d.materials. *; importera away3d.primitives. * Importera away3d.lights.DirectionalLight3D

importera jiglib.physics.RigidBody; importera jiglib.plugin.away3d.Away3Dphysics; importera jiglib.plugin.away3d.Away3dMesh; importera jiglib.math.JNumber3D

Steg 8: Installationsvariabler

Efter att ha importerat våra klasser måste vi definiera våra variabler för att använda dem i de kommande stegen.

var scen: Scene3D; var kamera: HoverCamera3D; Var View: View3D; var ljus: DirectionalLight3D; var fysik: Away3Dphysics;

var boxWidth: Number = 250 var boxHeight: Number = 30 var boxDepth: Number = 250 var boxThickness: Number = 5

Varianter: Array = [nya WhiteShadingBitmapMaterial (new diceTexture1 (0,0)), nya WhiteShadingBitmapMaterial (new diceTexture2 (0,0)), nya WhiteShadingBitmapMaterial (new diceTexture3 (0,0)), nya WhiteShadingBitmapMaterial (new diceTexture4 0)), nya WhiteShadingBitmapMaterial (new diceTexture5 (0,0)), nya WhiteShadingBitmapMaterial (new diceTexture6 (0,0))]

var wallTexture: WhiteShadingBitmapMaterial = new WhiteShadingBitmapMaterial (new walltexture (0,0)) var groundTexture: WhiteShadingBitmapMaterial = new WhiteShadingBitmapMaterial (new groundtexture (0,0))

Var tärningSkala: Nummer = 30 var tärningar: Array = Ny Array () Var diceRandomForce: Number = 50

Som du kanske har gissat är de första för Away3D. De variabla namnen är enkla, så du kan gissa vad de är för.

DiceTextures håller tärningarna i ansiktet. Vi tar tärningstekniska bilder från biblioteket och lägger dem i WhiteShadingBitmapMaterial. Vi väljer det här materialet eftersom det kommer att hålla sakerna ljusa och för att förbättra prestanda blir det också platt. WhiteShadingBitmapMaterial är det bästa för våra behov.

wallTexture och groundTexture använder olika bilder. Att använda någon av dessa i vårt fall skulle se hemskt ut.

Steg 9: Inställning Away3D

Nästa måste vi bygga Away3D.

funktion initAway3D (): void scene = new Scene3D ();

 kamera = ny HoverCamera3D (); camera.distance = 300

 light = new DirectionalLight3D (color: 0xFFFFFF, ambient: 0.25, diffuse: 0.75, specular: 0.9) scene.addChild (light) view = new View3D (scen: scen, kamera: kamera); view.x = stage.stageWidth / 2; view.y = stage.stageHeight / 2; addChild (vy); fysik = nya Away3Dphysics (visa, 4)

Den första raden i denna funktion skapar vår 3D-scen, där vi lägger till 3D-objekt. För kameran väljer vi HoverCamera3D. HoverCamera är det bästa sättet att vrida kameran runt objekten. Egentligen behöver du inte använda ljus för det här projektet, men det gör experimentet coolt :) Vi skapar View och ställer det i mitten av scenen.

Slutligen skapar vi nya Away3Dphysics. Den första parametern är "View3D" och den andra är "gravitation" (jag använder 4 men om du vill att du kan prova ett annat nummer).

Steg 10: Skapa väggar

funktion createWalls (): void var vänster: RigidBody = physics.createCube (width: boxThickness, height: boxHeight, depth: boxDepth); left.movable = false; left.x = - (boxWidth + boxThickness) / 2 Away3dMesh (left.skin) .mesh.material = wallTexture var rätt: RigidBody = physics.createCube (width: boxThickness, height: boxHeight, depth: boxDepth); right.movable = false; right.x = (boxWidth + boxThickness) / 2 Away3dMesh (right.skin) .mesh.material = wallTexture var framsida: RigidBody = physics.createCube (width: boxWidth, height: boxHeight, depth: boxThickness); front.movable = false; front.z = (boxDepth + boxThickness) / 2 Away3dMesh (front.skin) .mesh.material = wallTexture var tillbaka: RigidBody = physics.createCube (width: boxWidth, height: boxHeight, depth: boxThickness); back.movable = false; back.z = - (boxDepth + boxThickness) / 2 Away3dMesh (back.skin) .mesh.material = wallTexture var marken: RigidBody = physics.createCube (width: boxWidth, height: boxThickness, depth: boxDepth, segmentW: 2, segmentsH: 2); ground.movable = false; ground.y = - (boxHeight + boxThickness) / 2 Away3dMesh (ground.skin) .mesh.material = groundTexture Away3dMesh (ground.skin) .mesh.pushback = true

Det ser ut som en röra rätt :) Egentligen nej. Klicka på rutorna i rutan i följande demo för att lära dig hur vi ställer in deras position:

Vi använder kubbar som väggar, men för att göra det använder vi physics.createCube, du kan inte ställa in material i parametrar direkt. Jiglib Away3D-plugin tillåter inte detta (även om du kan ändra filen Away3DPhysics.as för att tillåta det om du vill). För att byta material behöver vi få det ursprungliga Away3D-objektet:

Away3dMesh (rigidObject.skin) .mesh

Genom att använda detta fäster vi våra texturer på våra väggar. Vi sätter rörliga till falska eftersom vi inte vill att dom ska flyttas rätt? :) När vi skapar marken ställer vi också sin pushback-egenskap till sant, så marken kommer inte att kunna hoppa över väggarna.

Steg 11: Skapa en dö

funktion createDice (): void varning: RigidBody = physics.createCube (width: diceScale, height: diceScale, depth: diceScale); dice.y = 500 dice.movable = true Cube (Away3dMesh (dice.skin). mesh) .cubeMaterials.left = diceTextures [0] Kub (Away3dMesh (dice.skin) .mesh) .cubeMaterials.right = diceTextures [1] Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.front = diceTextures [2] Kub (Away3dMesh (dice.skin) .mesh) .cubeMaterials.back = diceTextures [3] Cube (Away3dMesh (dice.skin) .mesh ) .cubeMaterials.top = diceTextures [4] Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.bottom = diceTextures [5] dices.push (tärning)

Som du kan se är det väldigt enkelt. Vi skapar i grunden en kub och lägger texturer på ansikten. För att bifoga olika texturer till olika ansikten använder vi cubeMaterials. cubeMaterials har 6 egenskaper som vi använder. Dessa är:

• främre
• tillbaka
• topp
• botten
• vänster
• höger

Du kan ställa in något material till dem, men vi använder element av tärningstexturer som vi skapade i steg 8.

Steg 12: Återställning av tärning

 funktionen resetOnlyPositions (): void for (var i: int = 0; i 
I dessa funktioner återställer vi sina positioner. Den första är för början. Den andra körs när användaren klickar på scenen. Den andra funktionen lägger också till slumpmässiga styrkor till tärningarna. Detta gör att tärningen börjar torka.
 
Steg 13: Lägga till slumpmässiga styrkor till tärningar
 
funktionen addRandomForce (rigid: RigidBody) var forceX: Number = + Math.random () * (diceRandomForce) var forceY: Nummer = + Math.random () * (diceRandomForce) var forceZ: Number = + Math.random () * (diceRandomForce) rigid.addBodyForce (ny JNumber3D (forceX, forceY, forceZ), ny JNumber3D (rigid.x + diceScale, rigid.y, rigid.z)) rigid.addBodyForce (ny JNumber3D (-forceX, -forceY, -forceZ ), ny JNumber3D (rigid.x - tärningScale, rigid.y, rigid.z))
  
Först får vi slumpmässiga värden för våra styrkor. Med dessa värden applicerar vi krafter i motsatta riktningar mot motsatta sidor av varje munstycke. Detta tvingar tärningarna att snurra.
 
Steg 14: Lyssnare
 
funktion initListeners (): void stage.addEventListener (Event.ENTER_FRAME, render); stage.addEventListener (MouseEvent.MOUSE_DOWN, resetAllDices)
 
I den här funktionen lägger vi till MOUSE_DOWN och ENTER_FRAME-lyssnare till scenen.
 
Steg 15: Rendering
 
funktion render (e: Event): void view.render (); camera.targetpanangle = stage.mouseX / stage.stageWidth * 360 camera.targettiltangle = stage.mouseY / stage.stageHeight * 30 camera.hover (); physics.step (); light.x = camera.x light.y = camera.y light.z = camera.z
 
Den första raden i den här funktionen gör 3D. Då använder vi äkta andel i matte för att rotera kameran genom att använda muspositioner. Då utjämnar vi ljusets riktning mot kamerans positioner. Detta gör vår ljusdynamik och gör att vårt experiment ser ganska cool ut.
 
Steg 16: Senaste Steget
 
initAway3D (); createWalls (); createDice (); createDice (); resetOnlyPositions () initListeners ();
 
Vi kallar våra funktioner en efter en. Jag ringde createDice () funktion två gånger, så det finns 2 tärningar i demo. Du kan lägga till så många du vill ha. 
 
Ok. Vi är redo. Testa ditt jobb och klicka på scenen :) 
 
Slutsats
 
I denna handledning lärde vi oss hur vi använder Jiglib med Away3D och bygger ett enkelt experiment. 
 
Jag hoppas att du gillade det, tack för att du läste!



		
			
	   
	




Koda