Kastende terninger med Jiglib Fysikkmotor og Away3D

I denne opplæringen bygger vi en boks som vi kan kaste terninger inn i. For å gjøre dette bruker vi Away3D som 3D-motoren og Jiglib som fysikkmotor. La oss bli sittende fast i ...

Trinn 1: Ny ActionScript 3.0-fil

Som tittelen antyder, vil vi først opprette en ny ActionScript 3.0-fil.

Trinn 2: Rediger profil

Trykk på Edit-knappen i Egenskaper-panelet.

Trinn 3: Velg Flash Player Version

Velg Flash Player 9-profilen og klikk OK.

Trinn 4: Få Away3D-motoren!

Lagre filen som "3D Dice.fla" i en ny mappe kalt "3D Dice". Last ned nå Away3D-motoren fra Away3D-nedlastinger. Vi bruker versjon 2.3.3 for Flash Player 9. Pakke ut et arkiv og kopier alle mapper til mappen "3D Dice".

Trinn 5: Få Jiglib Physics Engine for Flash!

Du må installere et SVN-program for å få disse kildefilene. Her er SVN-adressen. Hvis du ikke vil takle alt som du også kan få dem fra kildefilene for denne tut. Etter at du har flyttet Away3D- og Jiglib-klassene til 3D Dice-mappen, bør dokumentene se slik ut:

Trinn 6: Importer teksturer

Jeg har tegnet noen teksturer til terningene våre. Selvfølgelig kan du endre disse, men de er ikke dårlige :) Du kan finne andre teksturer i kildefilen.

Terningstekstur:

Nå må vi gi dem koblingsnavn for å feste dem i runtime (gjør dette for hvert bilde i biblioteket en etter en):

Velg Bilde, og høyreklikk> Egenskaper

Eksporter for ActionScript> Fjern ".png" -delen

Trinn 7: Start koding

OK, vi er klare til å starte kodingen. Først importerer vi våre klasser:

importere away3d.cameras. *; importere away3d.containers. *; importere away3d.materials. *; importere away3d.primitives. * Import away3d.lights.DirectionalLight3D

importer jiglib.physics.RigidBody; importere jiglib.plugin.away3d.Away3Dphysics; importer jiglib.plugin.away3d.Away3dMesh; importer jiglib.math.JNumber3D

Trinn 8: Oppsettvariabler

Etter å ha importert våre klasser må vi definere våre variabler for å bruke dem i de kommende trinnene.

var scene: Scene3D; Var kamera: HoverCamera3D; var visning: View3D; var lys: DirectionalLight3D; Var fysikk: Away3Dphysics;

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

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

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

Var terningSkala: Nummer = 30 var terninger: Array = Ny Array () Var diceRandomForce: Nummer = 50

Som du kanskje har gjettet, er de første til Away3D. De variable navnene er enkle, så du kan gjette hva de er for.

DiceTextures holder terningens teksturer. Vi tar terninger teksturbilder fra biblioteket og legger dem inn i WhiteShadingBitmapMaterial. Vi velger dette materialet fordi det vil holde tingene tydelige og for å forbedre ytelsen blir det også flatt. WhiteShadingBitmapMaterial er det beste for våre behov.

wallTexture og groundTexture bruker forskjellige bilder. Å bruke noen av disse i vårt tilfelle ville se forferdelig ut.

Trinn 9: Oppsett Away3D

Neste må vi bygge Away3D.

funksjon 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 (scene: scene, kamera: kamera); view.x = stage.stageWidth / 2; view.y = stage.stageHeight / 2; addChild (syn); fysikk = ny Away3Dphysics (visning, 4)

Den første linjen i denne funksjonen skaper vår 3D-scene, der vi legger til 3D-objekter. For kameraet velger vi HoverCamera3D. HoverCamera er den beste måten å skru kameraet rundt objektene. Egentlig trenger du ikke bruke lys for dette prosjektet, men det gjør eksperimentet kult :) Vi lager visningen og setter den midt i scenen.

Til slutt lager vi nye Away3Dphysics. Den første parameteren er "View3D" og den andre er "tyngdekraften" (jeg bruker 4 men hvis du vil at du kan prøve et annet nummer).

Trinn 10: Opprette vegger

funksjon 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 riktig: RigidBody = physics.createCube (width: boxThickness, height: boxHeight, depth: boxDepth); right.movable = false; right.x = (boxWidth + boxThickness) / 2 Away3dMesh (right.skin) .mesh.material = wallTexture var foran: RigidBody = physics.createCube (width: boxWidth, height: boxHeight, depth: boxThickness); front.movable = false; front.z = (boxDepth + boxThickness) / 2 Away3dMesh (front.skin) .mesh.material = wallTexture var tilbake: RigidBody = physics.createCube (width: boxWidth, height: boxHeight, depth: boxThickness); back.movable = false; back.z = - (boxDepth + boxThickness) / 2 Away3dMesh (back.skin) .mesh.material = wallTexture var bakken: RigidBody = physics.createCube (width: boxWidth, height: boxThickness, depth: boxDepth, segmenterW: 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 et rotete rett :) Egentlig nei. Klikk på veggene i boksen i følgende demonstrasjon for å lære hvordan vi stiller inn deres posisjon:

Vi bruker kuber som vegger, men for å gjøre det bruker vi physics.createCube, du kan ikke sette materiale i parametere direkte. Jiglib Away3D plugin tillater ikke dette (selv om du kan endre Away3DPhysics.as-filen for å tillate det hvis du vil). For å bytte materiale må vi få det originale Away3D-objektet:

Away3dMesh (rigidObject.skin) .mesh

Ved å bruke dette festes våre teksturer til veggene våre. Vi setter oss flyttbare til falske fordi vi ikke vil at de skal flyttes riktig? :) Når vi lager grunn, setter vi også sin pushback-egenskap til sann, slik at bakken ikke kommer til å hoppe over veggene.

Trinn 11: Opprette en dør

funksjon createDice (): void var terning: RigidBody = physics.createCube (bredde: diceScale, høyde: terningSkala, dybde: diceScale); dice.y = 500 dice.movable = true Cube (Away3dMesh) .cubeMaterials.left = diceTextures [0] Cube Kube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.front = diceTextures [2] Kube (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 (terning)

Som du kan se er det veldig enkelt. Vi lager i utgangspunktet en terning og legger på teksturer i ansiktene. For å feste forskjellige teksturer til forskjellige ansikter bruker vi cubeMaterials. cubeMaterials har 6 egenskaper som vi bruker. Disse er:

• front
• tilbake
• topp
• bunn
• venstre
• Ikke sant

Du kan sette noe materiale til dem, men vi bruker elementer av diceTextures vi opprettet i trinn 8.

Trinn 12: Tilbakestilling av terninger

 funksjon resetOnlyPositions (): void for (var i: int = 0; i 
I disse funksjonene tilbakestiller vi sine stillinger. Den første er for begynnelsen. Den andre kjører når brukeren klikker på scenen. Den andre funksjonen legger også tilfeldige krefter til terningene. Dette gjør at terningen begynner å tommel.
 
Trinn 13: Legge til tilfeldige styrker til terninger
 
Funksjon addRandomForce (stiv: RigidBody) var forceX: Nummer = + Math.random () * (diceRandomForce) var forceY: Nummer = + Math.random () * (diceRandomForce) var forceZ: Nummer = + 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 - terningSkala, stiv.y, stiv.z))
  
Først får vi tilfeldige verdier for våre krefter. Med disse verdiene bruker vi krefter i motsatt retning til motsatte sider av hver dyse. Dette tvinger terningene til å snurre.
 
Trinn 14: Lyttere
 
funksjon initListeners (): void stage.addEventListener (Event.ENTER_FRAME, gjengi); stage.addEventListener (MouseEvent.MOUSE_DOWN, resetAllDices)
 
I denne funksjonen legger vi til MOUSE_DOWN og ENTER_FRAME lyttere til scenen.
 
Trinn 15: Rendering
 
funksjon gjengivelse (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ørste linjen i denne funksjonen gjør 3D. Da bruker vi ekte proporsjoner i matte for å rotere kameraet ved å bruke museposisjoner. Da utligner vi lysets retning til stillingene til kameraet vårt. Dette gjør vår lysdynamikk og gjør vårt eksperiment ser ganske kult ut.
 
Trinn 16: Siste trinn
 
initAway3D (); createWalls (); createDice (); createDice (); resetOnlyPositions () initListeners ();
 
Vi kaller våre funksjoner en etter en. Jeg ringte createDice () -funksjonen to ganger, så det er 2 terninger i demoen. Du kan legge til hvor mange du vil ha. 
 
Ok. Vi er klare. Test arbeidet ditt og klikk på scenen :) 
 
Konklusjon
 
I denne opplæringen lærte vi hvordan du bruker Jiglib med Away3D og bygger et enkelt eksperiment. 
 
Jeg håper du likte det, takk for å lese!



		
			
	   
	




Kode