Throwing Dice Med JigLib Physics Engine og Away3D
to
Del
Del
Del

Denne Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne opplæringen vil vi bygge en boks som vi kan kaste terninger inn. For å gjøre dette vil vi bruke Away3D som 3D-motor og JigLib som fysikkmotor. La oss sette seg fast i ..

Trinn 1: New Actionscript 3.0 File

Som tittelen antyder, først skal vi skape en ny Actionscript 3.0 fil

Trinn 2:.. Rediger profil

I panelet Egenskaper trykker på knappen Rediger

Trinn 3: Velg Flash Player versjon

Velg Flash Player 9 profilen, og klikk OK

Trinn 4:.! Få Away3D Engine

Lagre filen som "3D Dice.fla" i en ny mappe som heter "3D Dice". Nå laste ned Away3D motoren Away3D nedlastinger. Vi vil bruke versjon 2.3.3 for Flash Player 9. Pakk et arkiv og kopiere alle mapper i "3D Dice" -mappen

Trinn 5:.! Få JigLib Physics Engine for Flash

Du må installere en SVN program for å få disse kildefilene. Her er SVN adresse. Hvis du ikke ønsker å forholde seg til alt som kan du også få dem fra kildefilene for denne tut. Når du flytter Away3D og JigLib klasser til din 3D Dice Dokumenter-mappen skal se slik ut:

Trinn 6: Import Tekstur

Jeg har tegnet noen teksturer for vår terning. Selvfølgelig kan du endre disse, men de er ikke dårlig :) Du kan finne andre teksturer i kildefilen.

Dice Tekstur:

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

Velg bilde, høyreklikk > Egenskaper

Eksporter for Action > Fjern ".png" del

Trinn 7: Begynn Coding

OK, vi er klare til å starte koding. Først importerer vi våre klasser:....
Import away3d.cameras *; import away3d.containers *, import away3d.materials *, import away3d.primitives * import away3d.lights.DirectionalLight3Dimport jiglib.physics.RigidBody; import JigLib .plugin.away3d.Away3DPhysics, importere jiglib.plugin.away3d.Away3dMesh, importere jiglib.math.JNumber3D
Trinn 8: Oppsett Variabler

Etter import våre klasser må vi definere våre variabler for å bruke dem i de kommende trinnene
Var scene: Scene3D; Var kamera:. HoverCamera3D; Var Vis: View3D, Div lys: DirectionalLight3D; Var fysikk: Away3DPhysics; Var boxWidth: Number = 250var boxHeight: Number = 30var boxDepth: Number = 250var boxThickness: Antall = 5var diceTextures: Array = [ny WhiteShadingBitmapMaterial (ny diceTexture1 (0,0)), ny WhiteShadingBitmapMaterial (ny diceTexture2 (0,0)), ny WhiteShadingBitmapMaterial (ny diceTexture3 (0,0)), ny WhiteShadingBitmapMaterial (ny diceTexture4 ( 0,0)), ny WhiteShadingBitmapMaterial (ny diceTexture5 (0,0)), ny WhiteShadingBitmapMaterial (ny diceTexture6 (0,0))] Var wallTexture: WhiteShadingBitmapMaterial = new WhiteShadingBitmapMaterial (ny walltexture (0,0)) Var groundTexture: WhiteShadingBitmapMaterial = new WhiteShadingBitmapMaterial (ny groundtexture (0,0)) Var diceScale: Number = 30var terningkast: Array = new Array () Var diceRandomForce: Number = 50

Som du kanskje har gjettet, de første er for Away3D. Variabelnavnene er enkle, slik at du kan gjette hva de er for.

diceTextures holder terningene står overfor teksturer. Vi tar terningteksturbilder fra biblioteket og sette dem inn WhiteShadingBitmapMaterial. Vi velger dette materialet fordi det vil holde ting lys og for å ytterligere forbedre ytelsen vil det også bli flat. WhiteShadingBitmapMaterial er den beste for våre behov.

wallTexture og groundTexture bruke forskjellige bilder. Ved hjelp av en av disse i vårt tilfelle ville se forferdelig

Trinn 9:.. Setup Away3D

Neste må vi bygge Away3D
funksjon initAway3D (): void {scene = new Scene3D ( ); Kameraet = new HoverCamera3D (); camera.distance = 300 lys = new DirectionalLight3D ({color: 0xFFFFFF, ambient: 0,25, diffuse: 0,75, speil: 0,9}) scene.addChild (lys) view = new View3D ({scene: scene, kamera: Kameraet}); view.x = stage.stageWidth /2; view.y = stage.stageHeight /2; addChild (vis); fysikk = nye Away3DPhysics (vis, 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 å slå på kameraet rundt objektene. Egentlig trenger du ikke å bruke lys til dette prosjektet, men det gjør eksperimentet kult :) Vi skaper Vis og sette den i midten av scenen.

Til slutt, skaper vi nye Away3DPhysics. Den første paremeter er "View3D" og den andre er "gravitasjonen" (jeg bruker 4, men hvis du vil kan du prøve et annet nummer)

Trinn 10:. Opprette Walls
funksjons createWalls (): void { Var venstre: RigidBody = physics.createCube ({width: boxThickness, høyde: boxHeight, dybde: boxDepth}); left.movable = false; left.x = - (boxWidth + boxThickness) /2 Away3dMesh (left.skin) .mesh.material = wallTexture Var akkurat: RigidBody = physics.createCube ({width: boxThickness, høyde: boxHeight, dybde: boxDepth}); right.movable = false; right.x = (boxWidth + boxThickness) /2 Away3dMesh (right.skin) .mesh.material = wallTexture Var front: RigidBody = physics.createCube ({width: boxWidth, høyde: boxHeight, dybde: boxThickness}); front.movable = false; front.z = (boxDepth + boxThickness) /2 Away3dMesh (front.skin) .mesh.material = wallTexture Var tilbake: RigidBody = physics.createCube ({width: boxWidth, høyde: boxHeight, dybde: boxThickness}); back.movable = false; back.z = - (boxDepth + boxThickness) /2 Away3dMesh (back.skin) .mesh.material = wallTexture Var bakken: RigidBody = physics.createCube ({width: boxWidth, høyde: boxThickness, dybde: 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}

Det ser ut som et rot rett :) Egentlig ingen . Klikk på veggene i boksen i følgende demo for å lære hvordan vi satt sin stilling:

Vi bruker Cubes som vegger, men å gjøre det vi bruker physics.createCube, du kan ikke sette materialet i parametre direkte. JigLib Away3D plugin tillater ikke dette (men du kan endre Away3DPhysics.as fil for å tillate det hvis du vil). For å endre materialet vi trenger for å få den opprinnelige Away3D objekt:
Away3dMesh (rigidObject.skin) .mesh

Ved å bruke dette legger vi våre teksturer til ansiktene våre vegger. Vi setter bevegelig til false fordi vi ikke vil at de skal flyttes rett? :) Når vi skaper bakken vi også satt sin pushback eiendom til sann, så bakken vil ikke være i stand til å hoppe over veggene

Trinn 11:. Opprette en Die
funksjon createDice (): void {var terningen: RigidBody = physics.createCube ({width: diceScale, høyde: diceScale, dybde: diceScale}); dice.y = 500 dice.movable = true Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.left = diceTextures [0] Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.right = diceTextures [1] Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.front = diceTextures [2] Cube (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 i utgangspunktet lage en kube og legge teksturer til sine ansikter. Å feste forskjellige teksturer til forskjellige ansikter vi bruker cubeMaterials. cubeMaterials har 6 egenskaper som vi bruker. Disse er:

foran

tilbake

toppen

nederst

forlot

høyre

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

Trinn 12: Tilbake Dice
funksjons resetOnlyPositions (): void {for ( Var i: int = 0; i < dices.length; i ++) {terninger [i] .moveTo (ny JNumber3D (0, 100 + i * (diceScale + 10), 0))}} funksjons resetAllDices (e: MouseEvent) : void {for (var i: int = 0, jeg < dices.length; i ++) {terninger [i] .moveTo (ny JNumber3D (0, 100 + i * (diceScale + 10), 0)) addRandomForce (terninger [ ,,,0],i])}}

I disse funksjonene vi har null sine posisjoner. Den første er for begynnelse. Den andre går når brukeren klikker på scenen. Den andre funksjonen legger også tilfeldige krefter på terningen. Dette gjør våre terninger begynner å riste

Trinn 13:. Legge Tilfeldige Forces å Terninger
funksjon addRandomForce (rigid: RigidBody) {var forceX: Number = + Math.random () * (diceRandomForce) Var forceY : Number = + 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 - diceScale, rigid.y, rigid.z))}

Først vi får tilfeldige verdier for våre styrker. Med disse verdiene gjelder vi krefter i motsatte retninger til motsatte sider av hver dør. Dette tvinger terningen å spinne

Trinn 14: lyttere
funksjons initListeners (). Void {stage.addEventListener (Event.ENTER_FRAME, render); stage.addEventListener (MouseEvent.MOUSE_DOWN, resetAllDices)}

I denne funksjonen vi legge MOUSE_DOWN og ENTER_FRAME lyttere til scenen

Trinn 15:. Rende
funksjon render (e: Hendelses): 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 av denne funksjonen gjengir 3D. Deretter bruker vi ekte andel i matematikk for å rotere kameraet ved hjelp av muse stillinger. Deretter utjevne lysretningen til posisjonene til vår kameraet. Dette gjør vår lys dynamisk og gjør vårt eksperiment ser ganske kult

Trinn 16:. Siste Step
initAway3D();createWalls();createDice();createDice();resetOnlyPositions()initListeners();

We kalle våre funksjoner én etter én. Jeg ringte createDice () -funksjonen to ganger, så det er 2 terninger i demoen. Du kan legge til hvor mange du vil.

Ok. Vi er klare. Test arbeidet ditt og klikk scenen :)

Konklusjon

I denne opplæringen lærte vi hvordan vi skal bruke JigLib med Away3D og bygge et enkelt eksperiment.

Jeg håper du likte det, takk for lesing!