Gooien met de Jiglib Physics Engine en Away3D

In deze tutorial bouwen we een doos waarin we dobbelstenen kunnen gooien. Om dit te doen gebruiken we Away3D als de 3D-engine en Jiglib als de physics-engine. Laten we vastlopen in ...

Stap 1: Nieuw ActionScript 3.0-bestand

Zoals de titel doet vermoeden, zullen we eerst een nieuw ActionScript 3.0-bestand maken.

Stap 2: Profiel bewerken

Druk in het paneel Eigenschappen op de knop Bewerken.

Stap 3: Kies Flash Player-versie

Kies Flash Player 9-profiel en klik op OK.

Stap 4: Verkrijg de Away3D-engine!

Sla je bestand op als "3D Dice.fla" in een nieuwe map genaamd "3D Dice". Download nu de Away3D-engine van Away3D-downloads. We zullen versie 2.3.3 voor Flash Player 9 gebruiken. Pak een archief uit en kopieer alle mappen naar de map "3D Dice".

Stap 5: Verkrijg de Jiglib Physics Engine voor Flash!

U moet een SVN-programma installeren om deze bronbestanden te krijgen. Hier is het SVN-adres. Als je hier niet alles mee wilt doen, kun je ze ook halen uit de bronbestanden voor deze tut. Nadat u de klassen Away3D en Jiglib naar uw 3D Dice-map hebt verplaatst, zouden uw documenten er als volgt uit moeten zien:

Stap 6: Importeer texturen

Ik heb wat texturen getekend voor onze dobbelstenen. Je kunt deze natuurlijk wijzigen, maar ze zijn niet slecht :) Je kunt andere texturen vinden in het bronbestand.

Dice Textures:

Nu moeten we ze koppelingsnamen geven om ze tijdens runtime te koppelen (doe dit voor elke afbeelding in je bibliotheek één voor één):

Selecteer Afbeelding en klik met de rechtermuisknop> Eigenschappen

Exporteren voor ActionScript> ".png" -gedeelte verwijderen

Stap 7: start codering

OK, we zijn klaar om te beginnen met coderen. Eerst importeren we onze klassen:

import away3d.cameras. *; import away3d.containers. *; import away3d.materials. *; 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

Stap 8: Variabelen instellen

Na het importeren van onze klassen moeten we onze variabelen definiëren om ze in de komende stappen te gebruiken.

var scene: Scene3D; var camera: HoverCamera3D; var view: View3D; var light: Directional Light 3D; var physics: Away3DPhysics;

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

var diceTextures: Array = [nieuw WhiteShadingBitmapMaterial (nieuwe diceTexture1 (0,0)), nieuw WhiteShadingBitmapMaterial (nieuwe diceTexture2 (0,0)), nieuw WhiteShadingBitmapMaterial (nieuwe diceTexture3 (0,0)), nieuw WhiteShadingBitmapMaterial (new diceTexture4 (0, 0)), nieuw WhiteShadingBitmapMaterial (new diceTexture5 (0,0)), nieuw WhiteShadingBitmapMaterial (new diceTexture6 (0,0))]

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

var diceScale: Number = 30 var dices: Array = new Array () var diceRandomForce: Number = 50

Zoals je misschien al geraden hebt, zijn de eerste voor Away3D. De variabelenamen zijn eenvoudig, dus je kunt raden waarvoor ze zijn.

diceTextures heeft de dobbelsteengezichtsstructuren. We nemen dobbelstenen textuurafbeeldingen uit de bibliotheek en plaatsen deze in WhiteShadingBitmapMaterial. We kiezen dit materiaal omdat het dingen licht zal houden en om de prestaties verder te verbeteren zal het ook plat zijn. WhiteShadingBitmapMaterial is het beste voor onze behoeften.

wallTexture en groundTexture gebruiken verschillende afbeeldingen. Het gebruik van een van deze in ons geval zou er vreselijk uitzien.

Stap 9: Setup Away3D

Vervolgens moeten we Away3D bouwen.

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

 camera = nieuwe 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, camera: camera); view.x = stage.stageWidth / 2; view.y = Stage.stageHeight / 2; addChild (view); fysica = nieuwe Away3DPhysics (weergave, 4)

De eerste regel in deze functie maakt onze 3D-scène, waarin we 3D-objecten toevoegen. Voor de camera kiezen we voor HoverCamera3D. HoverCamera is de beste manier om de camera rond de objecten te draaien. Eigenlijk hoef je geen licht te gebruiken voor dit project, maar het maakt het experiment wel cool :) We maken de weergave en plaatsen deze midden in de scène.

Ten slotte creëren we nieuwe Away3DPhysics. De eerste paremeter is "View3D" en de tweede is "zwaartekracht" (ik gebruik er 4 maar als je wilt kun je een ander nummer proberen).

Stap 10: Muren maken

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

Het ziet eruit als een puinhoop rechts :) Eigenlijk niet. Klik op de muren van het vak in de volgende demo om te leren hoe we hun positie bepalen:

We gebruiken kubussen als muren, maar om dat te doen gebruiken we physics.createCube, je kunt niet rechtstreeks materiaal in parameters instellen. De Jiglib Away3D-plugin staat dit niet toe (hoewel je het Away3DPhysics.as-bestand kunt wijzigen om het toe te staan ​​als je dat wilt). Om van materiaal te veranderen, moeten we het originele Away3D-object krijgen:

Away3dMesh (rigidObject.skin) .mesh

Door dit te gebruiken, hechten we onze texturen aan de gezichten van onze muren. We stellen verplaatsbaar in op false omdat we niet willen dat ze worden verplaatst, toch? :) Wanneer we grond maken, stellen we ook de eigenschap pushback in op true, zodat de grond niet over de muren kan springen.

Stap 11: Een dobbelsteen maken

function createDice (): void var dice: RigidBody = physics.createCube (width: diceScale, height: diceScale, depth: 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] Kubus (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 (dobbelstenen)

Zoals je kunt zien is het heel eenvoudig. We maken in principe een kubus en hechten texturen aan zijn gezichten. Om verschillende texturen aan verschillende gezichten te bevestigen, gebruiken we cubeMaterials. cubeMaterials heeft 6 eigenschappen die we gebruiken. Dit zijn:

• voorkant
• terug
• top
• bodem
• links
• rechts

Je kunt elk materiaal instellen, maar we gebruiken elementen van diceTextures die we in stap 8 hebben gemaakt.

Stap 12: Dice opnieuw instellen

 function resetOnlyPositions (): void for (var i: int = 0; i 
In deze functies stellen we hun posities opnieuw in. De eerste is om te beginnen. De tweede wordt uitgevoerd wanneer de gebruiker op het werkgebied klikt. De tweede functie voegt ook willekeurige krachten toe aan de dobbelstenen. Hierdoor beginnen onze dobbelstenen te tuimelen.
 
Stap 13: Willekeurige krachten toevoegen aan dobbelstenen
 
function addRandomForce (rigid: RigidBody) var forceX: Number = + Math.random () * (diceRandomForce) var forceY: Number = + Math.random () * (diceRandomForce) var forceZ: Number = + Math.random () * (diceRandomForce) rigid.addBodyForce (nieuwe JNumber3D (forceX, forceY, forceZ), nieuwe JNumber3D (rigid.x + diceScale, rigid.y, rigid.z)) rigid.addBodyForce (new JNumber3D (-forceX, -forceY, -forceZ ), nieuwe JNumber3D (rigid.x - diceScale, rigid.y, rigid.z))
  
Eerst krijgen we willekeurige waarden voor onze krachten. Met deze waarden passen we krachten in tegengestelde richtingen toe op tegenovergestelde zijden van elke dobbelsteen. Dit dwingt de dobbelstenen om te draaien.
 
Stap 14: Luisteraars
 
function initListeners (): void stage.addEventListener (Event.ENTER_FRAME, render); stage.addEventListener (MouseEvent.MOUSE_DOWN, resetAllDices)
 
In deze functie voegen we MOUSE_DOWN en ENTER_FRAME luisteraars toe aan het podium.
 
Stap 15: Weergave
 
function 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
 
De eerste regel van deze functie geeft de 3D weer. Vervolgens gebruiken we de juiste proportie in wiskunde om de camera te draaien met behulp van muisposities. Vervolgens maken we de richting van het licht gelijk aan de posities van onze camera. Dit maakt ons licht dynamisch en maakt ons experiment best cool.
 
Stap 16: Laatste stap
 
initAway3D (); createWalls (); createDice (); createDice (); resetOnlyPositions () initListeners ();
 
We noemen onze functies één voor één. Ik heb de createDice () -functie twee keer aangeroepen, dus er zijn 2 dobbelstenen in de demo. U kunt hoe veel u wilt toevoegen. 
 
OK. Wij zijn klaar. Test je werk en klik op het podium :) 
 
Conclusie
 
In deze tutorial hebben we geleerd om Jiglib te gebruiken met Away3D en een eenvoudig experiment te maken. 
 
Ik hoop dat je het leuk vond, bedankt voor het lezen!



		
			
	   
	




Code