Würfel werfen mit der Jiglib Physics Engine und Away3D

In diesem Tutorial bauen wir eine Box, in die wir Würfel werfen können. Dazu verwenden wir Away3D als 3D-Engine und Jiglib als Physik-Engine. Lass uns reinstecken…

Schritt 1: Neue ActionScript 3.0-Datei

Wie der Titel schon sagt, erstellen wir zunächst eine neue ActionScript 3.0-Datei.

Schritt 2: Profil bearbeiten

Klicken Sie im Eigenschaftenbereich auf die Schaltfläche Bearbeiten.

Schritt 3: Wählen Sie die Flash Player-Version

Wählen Sie das Flash Player 9-Profil und klicken Sie auf OK.

Schritt 4: Holen Sie sich die Away3D Engine!

Speichern Sie Ihre Datei als "3D Dice.fla" in einem neuen Ordner mit dem Namen "3D Dice". Laden Sie jetzt die Away3D-Engine von Away3D-Downloads herunter. Wir verwenden Version 2.3.3 für Flash Player 9. Entpacken Sie ein Archiv und kopieren Sie alle Ordner in den Ordner "3D Dice".

Schritt 5: Holen Sie sich die Jiglib Physics Engine für Flash!

Sie müssen ein SVN-Programm installieren, um diese Quelldateien zu erhalten. Hier ist die SVN-Adresse. Wenn Sie nicht mit all dem umgehen wollen, können Sie sie auch aus den Quelldateien für dieses Tut erhalten. Nachdem Sie die Away3D- und Jiglib-Klassen in Ihren 3D-Würfelordner verschoben haben, sollten Ihre Dokumente folgendermaßen aussehen:

Schritt 6: Importieren Sie Texturen

Ich habe einige Texturen für unsere Würfel gezeichnet. Natürlich können Sie diese ändern, aber sie sind nicht schlecht :) Weitere Texturen finden Sie in der Quelldatei.

Würfel-Texturen:

Jetzt müssen wir ihnen Verknüpfungsnamen geben, um sie zur Laufzeit anzufügen (tun Sie dies für jedes Bild in Ihrer Bibliothek nacheinander):

Wählen Sie Bild aus und klicken Sie mit der rechten Maustaste auf> Eigenschaften

Export für ActionScript> Teil ".png" entfernen

Schritt 7: Starten Sie die Codierung

OK, wir können mit dem Programmieren beginnen. Zuerst importieren wir unsere Klassen:

import3d.cameras importieren. *; import away3d.containers. *; import3d.materials importieren. *; away3d.primitives importieren. * away3d.lights.DirectionalLight3D importieren

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

Schritt 8: Setup-Variablen

Nach dem Import unserer Klassen müssen wir unsere Variablen definieren, um sie in den nächsten Schritten verwenden zu können.

Var-Szene: Scene3D; Var Kamera: HoverCamera3D; var view: View3D; var light: DirectionalLight3D; Var Physik: Away3DPhysics;

var boxWidth: Number = 250 var boxHöhe: Number = 30 var boxDepth: Number = 250 var boxThickness: Number = 5

var diceTextures: Array = [neues WhiteShadingBitmapMaterial (neue DiceTexture1 (0,0)), neues WhiteShadingBitmapMaterial (neue DiceTexture2 (0,0)), neues WhiteShadingBitmapMaterial (neue DiceTexture3 (0,0)), neues WhiteShadingBitmapMaterial (neues DiceTexture4), 0)), neues WhiteShadingBitmapMaterial (neue WürfelTexture5 (0,0)), neues WhiteShadingBitmapMaterial (neue WürfelTexture6 (0,0))]

var wallTexture: WhiteShadingBitmapMaterial = new WhiteShadingBitmapMaterial (neue Wandtextur (0,0)) var groundTexture: WhiteShadingBitmapMaterial = neues WhiteShadingBitmapMaterial (neue Bodentextur (0,0))

var diceScale: Number = 30 var-würfel: Array = new Array () var diceRandomForce: Number = 50

Wie Sie vielleicht schon erraten haben, sind die ersten für Away3D. Die Variablennamen sind einfach, sodass Sie erraten können, wozu sie dienen.

diceTextures enthält die Würfelgesichtstexturen. Wir nehmen Würfeltexturbilder aus der Bibliothek und legen sie in WhiteShadingBitmapMaterial ab. Wir wählen dieses Material aus, weil es die Dinge leicht hält und zur weiteren Verbesserung der Leistung auch flach bleibt. WhiteShadingBitmapMaterial ist das Beste für unsere Bedürfnisse.

wallTexture und groundTexture verwenden unterschiedliche Bilder. Die Verwendung eines dieser Elemente in unserem Fall würde schrecklich aussehen.

Schritt 9: Away3D einrichten

Als nächstes müssen wir Away3D bauen.

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

 Kamera = neuer HoverCamera3D (); camera.distance = 300

 light = new DirectionalLight3D (color: 0xFFFFFF, Umgebung: 0,25, diffus: 0,75, spekular: 0,9) scene.addChild (light) view = new View3D (scene: scene, camera: camera); view.x = stage.stageWidth / 2; view.y = stage.stageHeight / 2; addChild (view); Physik = neue Away3DPhysics (view, 4)

Die erste Zeile dieser Funktion erstellt unsere 3D-Szene, in die wir 3D-Objekte einfügen. Für die Kamera wählen wir HoverCamera3D. HoverCamera ist die beste Möglichkeit, die Kamera um die Objekte herum zu drehen. Eigentlich brauchst du kein Licht für dieses Projekt, aber es macht das Experiment cool :) Wir erstellen die Ansicht und stellen sie in die Mitte der Szene.

Zuletzt erstellen wir neue Away3DPhysics. Der erste Parameter ist "View3D" und der zweite ist "Schwerkraft" (ich verwende 4, aber wenn Sie möchten, können Sie eine andere Nummer versuchen).

Schritt 10: Wände erstellen

function createWalls (): void var left: RigidBody = physics.createCube (width: boxThickness, height: boxHeight, Tiefe: boxDepth); left.movable = falsch; left.x = - (boxWidth + boxThickness) / 2 Away3dMesh (left.skin) .mesh.material = wallTexture var rechts: RigidBody = physics.createCube (width: boxThickness, height: boxHeight, Tiefe: boxDepth); right.movable = falsch; right.x = (boxWidth + boxThickness) / 2 Away3dMesh (right.skin) .mesh.material = wallTexture var front: RigidBody = physics.createCube (width: boxWidth, height: boxHeight, Tiefe: boxThickness); front.movable = false; front.z = (boxDepth + boxThickness) / 2 Away3dMesh (front.skin) .mesh.material = wallTexture var zurück: RigidBody = physics.createCube (width: boxWidth, height: boxHeight, Tiefe: boxThickness); zurück.beweglich = falsch; back.z = - (boxDepth + boxThickness) / 2 Away3dMesh (back.skin) .mesh.material = wallTexture var geschliffen: RigidBody = physics.createCube (Breite: BoxWidth, Höhe: BoxThickness, Tiefe: BoxDepth, SegmenteW: 2, Segmente H: 2); Bodenbeweglich = falsch; ground.y = - (boxHeight + boxThickness) / 2 Away3dMesh (ground.skin) .mesh.material = groundTexture Away3dMesh (ground.skin) .mesh.pushback = true

Es sieht nach einem Durcheinander aus :) Eigentlich nein. Klicken Sie in der folgenden Demo auf die Wände der Box, um zu erfahren, wie wir ihre Position festlegen:

Wir verwenden Cubes als Wände, aber dafür verwenden wir physics.createCube. Sie können Material nicht direkt in Parametern festlegen. Jiglib Away3D-Plugin erlaubt dies nicht (obwohl Sie die Away3DPhysics.as-Datei ändern können, um dies zuzulassen, wenn Sie möchten). Um das Material zu ändern, benötigen wir das ursprüngliche Away3D-Objekt:

Away3dMesh (RigidObject.skin) .mesh

Auf diese Weise bringen wir unsere Texturen an die Wände unserer Wände an. Beweglich auf falsch gesetzt, weil wir nicht wollen, dass sie richtig verschoben werden? :) Wenn wir einen Boden erstellen, setzen wir auch seine Pushback-Eigenschaft auf true, damit der Boden nicht über die Wände springen kann.

Schritt 11: Erstellen eines Würfels

function createDice (): void var dice: RigidBody = physics.createCube (width: diceScale, Höhe: diceScale, Tiefe: diceScale); dice.y = 500 dice.movable = true Würfel (Away3dMesh (dice.skin) .mesh) .cubeMaterials.left = diceTextures [0] Cube (Away3dMesh (dice.skin) .mesh) .cubeMaterials.right = 1 WürfelTexturen [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] Würfel (Away3dMesh (dice.skin) .mesh) .cubeMaterials.bottom = diceTextures [5] dices.push (dice)

Wie Sie sehen, ist es wirklich einfach. Wir erstellen im Grunde einen Würfel und bringen seinen Flächen Texturen zu. Um verschiedene Texturen an verschiedenen Flächen anzubringen, verwenden wir cubeMaterials. cubeMaterials haben 6 Eigenschaften, die wir verwenden. Diese sind:

• Vorderseite
• zurück
• oben
• Unterseite
• links
• Recht

Sie können jedes Material festlegen, aber wir verwenden Elemente von diceTextures, die wir in Schritt 8 erstellt haben.

Schritt 12: Zurücksetzen der Würfel

 Funktion resetOnlyPositions (): void for (var i: int = 0; i 
In diesen Funktionen setzen wir ihre Positionen zurück. Der erste ist für den Anfang. Der zweite wird ausgeführt, wenn der Benutzer auf die Bühne klickt. Die zweite Funktion fügt den Würfeln auch zufällige Kräfte hinzu. Dadurch fangen unsere Würfel an zu taumeln.
 
Schritt 13: Zufällige Kräfte zu Würfeln hinzufügen
 
Funktion addRandomForce (starr: RigidBody) var forceX: Number = + Math.random () * (diceRandomForce) var forceY: Number = + Math.random () * (diceRandomForce) var forceZ: Number = + Math.random () * (diceRandomForce) starr.addBodyForce (neue JNumber3D (forceX, forceY, forceZ), neue JNumber3D (starr.x + diceScale, starr.y, starr.z)) starr.addBodyForce (neue JNumber3D (-forceX, -forceY, -forceZ ), neue JNumber3D (Rigid.x - DiceScale, Rigid.y, Rigid.z))
  
Zuerst erhalten wir zufällige Werte für unsere Kräfte. Mit diesen Werten wenden wir Kräfte in entgegengesetzte Richtungen auf die gegenüberliegenden Seiten jedes Würfels an. Dies zwingt die Würfel zum Drehen.
 
Schritt 14: Zuhörer
 
function initListeners (): void stage.addEventListener (Event.ENTER_FRAME, Rendern); stage.addEventListener (MouseEvent.MOUSE_DOWN, resetAllDices)
 
In dieser Funktion fügen wir der Bühne MOUSE_DOWN- und ENTER_FRAME-Listener hinzu.
 
Schritt 15: Rendern
 
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
 
Die erste Zeile dieser Funktion rendert das 3D. Dann verwenden wir in der Mathematik wahre Proportionen, um die Kamera mithilfe der Mauspositionen zu drehen. Dann gleichen wir die Richtung des Lichts an die Position unserer Kamera aus. Dies macht unser Licht dynamisch und macht unser Experiment ziemlich cool.
 
Schritt 16: Letzter Schritt
 
initAway3D (); createWalls (); createDice (); createDice (); resetOnlyPositions () initListeners ();
 
Wir rufen unsere Funktionen einzeln auf. Ich habe die createDice () - Funktion zweimal aufgerufen, also gibt es in der Demo 2 Würfel. Sie können beliebig viele hinzufügen. 
 
OK. Wir sind bereit. Testen Sie Ihre Arbeit und klicken Sie auf die Bühne :) 
 
Fazit
 
In diesem Tutorial haben wir gelernt, wie man Jiglib mit Away3D verwendet und ein einfaches Experiment erstellt. 
 
Ich hoffe es hat euch gefallen, danke fürs Lesen!



		
			
	   
	




Code