Aruncarea zarurilor cu motorul Jiglib Physics și Away3D

În acest tutorial vom construi o cutie în care să putem arunca zarurile. Pentru a face acest lucru vom folosi Away3D ca motor 3D și Jiglib ca motor de fizică. Să rămânem în ...

Pasul 1: Un nou fișier ActionScript 3.0

După cum sugerează titlul, mai întâi vom crea un nou fișier ActionScript 3.0.

Pasul 2: Editați profilul

În panoul Proprietăți, apăsați butonul Editare.

Pasul 3: Alegeți versiunea Flash Player

Alegeți profilul Flash Player 9 și faceți clic pe OK.

Pasul 4: Obțineți motorul Away3D!

Salvați fișierul ca "3D Dice.fla" într-un dosar nou numit "Dice 3D". Descărcați acum motorul Away3D de la Descărcări Away3D. Vom folosi versiunea 2.3.3 pentru Flash Player 9. Despachetați o arhivă și copiați toate folderele în dosarul "Dice 3D".

Pasul 5: Obțineți Jiglib Physics Engine pentru Flash!

Trebuie să instalați un program SVN pentru a obține aceste fișiere sursă. Iată adresa SVN. Dacă nu doriți să vă ocupați de tot ce le puteți obține și de la fișierele sursă pentru acest tut. După ce mutați clasele Away3D și Jiglib în dosarul Dice 3D, documentele ar trebui să arate astfel:

Pasul 6: Importați texturi

Am desenat niște texturi pentru zarurile noastre. Desigur, puteți schimba aceste, dar acestea nu sunt rele :) Puteți găsi alte texturi în fișierul sursă.

Dice Textures:

Acum trebuie să le dăm numele de legături pentru a le atașa în timpul rulării (faceți una câte una pentru fiecare imagine din bibliotecă):

Selectați Imagine, apoi faceți clic dreapta> Proprietăți

Exportați pentru ActionScript> Eliminați ".png"

Pasul 7: Începeți codarea

OK, suntem gata să începem codarea. Mai întâi introducem clasele noastre:

importa away3d.cameras. *; importați away3d.containers. *; importa departe3d.materiale. *; import away3d.primitives. * import away3d.lights.DirectionalLight3D

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

Pasul 8: Variabilele de configurare

După importarea clasei noastre trebuie să definim variabilele noastre pentru a le folosi în pașii următori.

Var scena: Scene3D; camera var: HoverCamera3D; var vizual: View3D; var lumina: DirectionalLight3D; fizica var: Away3DPhysics;

var boxWidth: Număr = 250 casetă varăValoare: Număr = 30 casetă varDepth: Număr = 250 cutie varThickness: Number = 5

(0,0), noul WhiteShadingBitmapMaterial (new diceTexture2 (0,0)), noul WhiteShadingBitmapMaterial (new diceTexture3 (0,0)), noul WhiteShadingBitmapMaterial (new diceTexture4 (0, 0)), noul WhiteShadingBitmapMaterial (new diceTexture5 (0,0)), noul WhiteShadingBitmapMaterial (new diceTexture6 (0,0))]

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

var diceScara: Number = 30 var dices: Array = Array nou () var diceRandomForce: Number = 50

După cum probabil ați ghicit, primele sunt pentru Away3D. Numele variabilelor sunt simple, astfel încât să puteți ghici ce sunt pentru ele.

zarurile conțin texturile cu zaruri. Luăm imagini de textura de zaruri din bibliotecă și le punem în WhiteShadingBitmapMaterial. Alegem acest material pentru că va păstra lucrurile ușor și pentru a îmbunătăți performanța, va fi de asemenea plat. WhiteShadingBitmapMaterial este cel mai bun pentru nevoile noastre.

WallTexture și GroundTexture utilizează imagini diferite. Folosirea oricăruia dintre acestea în cazul nostru ar părea teribilă.

Pasul 9: Configurarea Away3D

În continuare trebuie să construim Away3D.

funcția initAway3D (): void scene = nou Scene3D ();

 camera = noua HoverCamera3D (); camera.distance = 300

 lumina = noua DirectionalLight3D (culoare: 0xFFFFFF, ambient: 0.25, difuz: 0.75, specular: 0.9) view.addChild (lumina) view = new View3D (scena: camera; view.x = stage.stageWidth / 2; view.y = stage.stageHeight / 2; addChild (vizualizare); fizică = nouă Away3DPhysics (vedere, 4)

Prima linie din această funcție creează scena noastră 3D, în care adăugăm obiecte 3D. Pentru camera foto, alegem HoverCamera3D. HoverCamera este cea mai bună metodă de a activa camera în jurul obiectelor. De fapt, nu este nevoie să utilizați lumina pentru acest proiect, dar face ca experimentul să se răcească :) Creați vizualizarea și setați-o în mijlocul scenei.

În cele din urmă, vom crea noi Away3DPhysics. Primul paremeter este "View3D" iar al doilea este "gravitatea" (folosesc 4, dar daca vrei sa incerci un alt numar).

Pasul 10: Crearea pereților

function createWalls (): void var stânga: RigidBody = fizics.createCube (width: boxThickness, height: boxHeight, depth: boxDepth); left.movable = false; left.x = - (cutieWidth + boxThickness) / 2 Away3dMesh (left.skin) .mesh.material = wallTexture var dreapta: RigidBody = fizics.createCube (lățimea: boxThickness, height: boxHeight, depth: boxDepth); right.movable = false; right.x = (boxWidth + boxThickness) / 2 Away3dMesh (right.skin) .mesh.material = pereteText var: RigidBody = fizics.createCube (latime: boxWidth, height: boxHeight, depth: boxThickness); front.movable = false; front.z = (boxDepth + boxThickness) / 2Away3dMesh (front.skin) .mesh.material = wallTexture var back: RigidBody = fizics.createCube (latime: boxWidth, height: boxHeight, depth: boxThickness); back.movable = false; (width: boxWidth, height: boxThickness, adâncime: boxDepth, segmentsW: 2, back.z = - (boxDepth + boxThickness) / 2Away3dMesh (back.skin) .mesh.material = wallTexture var ground: RigidBody = segmentsH: 2); ground.movable = false; ground.y = - (cutieHeight + cutieThickness) / 2 Away3dMesh (ground.skin) .mesh.material = groundTexture Away3dMesh (ground.skin) .mesh.pushback = true

Se pare ca o mizerie dreapta :) De fapt nu. Faceți clic pe pereții casetei din următoarea demonstrație pentru a afla cum ne-am stabilit poziția:

Utilizăm Cuburi ca pereți, dar pentru a face acest lucru vom folosi fizics.createCube, nu puteți seta materialul în parametri direct. Pluginul Jiglib Away3D nu permite acest lucru (deși puteți schimba fișierul Away3DPhysics.as pentru a permite acest lucru dacă doriți). Pentru a schimba materialul trebuie să obținem obiectul original Away3D:

Away3dMesh (rigidObject.skin) .mesh

Prin aceasta folosim texturile noastre pe fețele pereților noștri. Ne-am fixat la fals pentru că nu vrem să fie mișcați corect? :) Atunci când creăm terenuri, stabilim și proprietatea de împingere la adevărat, astfel că solul nu va putea sări peste ziduri.

Pasul 11: Crearea unei morți

funcția createDice (): void var dice: RigidBody = fizică.createCube (lățime: diceScale, înălțime: diceScale, adâncime: diceScale); dice.y = 500 dice.movable = adevărat Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.left = diceTexuri [0] Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.right = Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.front = DiceTexturi [2] Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.back = Cub (Away3dMesh (dice.skin) .mesh ) .cubeMaterials.top = diceTexturi [4] Cub (Away3dMesh (dice.skin) .mesh) .cubeMaterials.bottom = diceTexuri [5] dices.push (zaruri)

După cum puteți vedea, este foarte simplu. În principiu, creăm un cub și atașăm texturi la fața lui. Pentru a atașa texturi diferite pe fețe diferite, folosim cubeMaterials. cubeMaterialele au 6 proprietăți pe care le folosim. Acestea sunt:

• față
• înapoi
• top
• fund
• stânga
• dreapta

Puteți să le setați orice material, dar vom folosi elementele de tip DiceTextures create la pasul 8.

Pasul 12: Resetarea zarurilor

 funcția resetOnlyPositions (): void pentru (var i: int = 0; i 
În aceste funcții ne reinițializăm pozițiile. Primul este pentru început. Al doilea rulează atunci când utilizatorul dă clic pe scenă. A doua funcție adaugă, de asemenea, forțe aleatoare la zaruri. Acest lucru face ca zarurile noastre să înceapă.
 
Pasul 13: Adăugarea forțelor aleatorii la dice
 
() = (*) * (*) * (*) * (*) * (diceRandomForce) rigid.addBodyForce (nou JNumber3D (forceX, forceY, forceZ), noul JNumber3D (rigid.x + diceScale, rigid.y, rigid.z)) rigid.addBodyForce (forță JNumber3D ), noul JNumber3D (rigid.x - diceScale, rigid.y, rigid.z)
  
Mai întâi primim valori aleatoare pentru forțele noastre. Cu aceste valori se aplică forțe în direcții opuse față de părțile opuse ale fiecărei matrițe. Aceasta forțează zarurile să se rotească.
 
Pasul 14: Ascultători
 
funcția initListeners (): void stage.addEventListener (Event.ENTER_FRAME, render); stage.addEventListener (MouseEvent.MOUSE_DOWN, resetAllDices)
 
În această funcție adăugăm ascultători MOUSE_DOWN și ENTER_FRAME la scenă.
 
Pasul 15: Realizarea
 
funcția rendere (e: Eveniment): void view.render (); camera.targetpanangle = stage.mouseX / stage.stageWidth * 360 cameră.targettiltangle = stage.mouseY / stage.stageHeight * 30 camera.hover (); physics.step (); light.x = camera.x lumina.y = camera.y light.z = camera.z
 
Prima linie a acestei funcții face 3D. Apoi vom folosi o proporție reală în matematică pentru a roti camera utilizând pozițiile mouse-ului. Apoi egalizăm direcția luminii în pozițiile camerei noastre. Acest lucru face dinamica noastră dinamică și face ca experimentul nostru să arate destul de răcoros.
 
Pasul 16: Ultimul pas
 
initAway3D (); createWalls (); createDice (); createDice (); resetOnlyPositions () initListeners ();
 
Noi numim funcțiile noastre unul câte unul. Am sunat funcția createDice () de două ori, deci există 2 zaruri în demo. Puteți adăuga oricum doriți. 
 
O.K. Suntem gata. Testați-vă munca și faceți clic pe scenă :) 
 
Concluzie
 
În acest tutorial am învățat cum să folosim Jiglib cu Away3D și să construim un simplu experiment. 
 
Sper că ți-a plăcut, mulțumesc pentru lectură!



		
			
	   
	




Cod