Share
In diesem Tutorial lernen Sie die Grundlagen der QuickBox2D-Bibliothek. Nachdem Sie die folgenden Schritte durchgelesen haben, können Sie eine Vielzahl von Physik-Simulationseffekten erstellen. Im Verlauf dieses Tutorials erstellen wir einige kleine Demos, um Sie mit den grundlegenden Funktionen von QuickBox2D vertraut zu machen.
Wenn Sie es noch nicht wissen, ist Box2D eine großartige Physikbibliothek, die von Erin Catto erstellt wurde.
Es wurde von Matthew Bush und John Nesky nach AS3 portiert.
QuickBox2D ist eine Mini-Bibliothek, die ich erstellt habe, um mit Box2DFlashAS3 zu arbeiten. Der Hauptzweck dieser Bibliothek ist es, die Instantiierung starrer Körper wesentlich zu vereinfachen und ihnen mit benutzerdefinierten Grafiken eine einfache Möglichkeit zu bieten.
Um diesem Tutorial folgen zu können, benötigen Sie Box2DFlashAS3 Version 2.0.2. Sie können es bei sourceforge.net herunterladen.
Stellen Sie sicher, dass Sie nicht 2.1a herunterladen, da es sich immer noch in einem Alpha-Status befindet. Box2D 2.1 ist immer noch nicht verfügbar und die API wird noch durchlaufen
bedeutsame Änderungen. Wenn 2.1 aus Alpha heraus ist, wird QuickBox2D dies unterstützen, aber vorläufig funktioniert es mit QuickBox2D nicht richtig.
Als Nächstes müssen Sie die neueste Version von QuickBox2D von actionsnippet.com herunterladen.
Dieses Tutorial funktioniert mit QuickBox2D 1.1 oder höher.
Öffnen Sie Flash und erstellen Sie eine neue ActionScript 3.0-Datei.
Speichern Sie Ihre Datei und stellen Sie sicher, dass sich Box2D und QuickBox2D entweder in Ihrem Klassenpfad oder direkt neben Ihrer Fla-Datei befinden.
Wir werden den gesamten Code in den ersten Frame der Timeline einfügen. Öffnen Sie also Ihre Aktionen (Option + F9) und fügen Sie den folgenden Code-Snippet ein:
[SWF (width = 800, height = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = neue QuickBox2D (this); sim.createStageWalls (); sim.addBox (x: 3, y: 3, Breite: 1, Höhe: 1); sim.addCircle (x: 4, y: 6, Radius: 1); sim.start (); sim.mouseDrag ()
Machen Sie weiter und testen Sie Ihren Film (Befehl + Eingabe). Am Ende sollten Sie eine Box und einen steifen Körper haben, den Sie über die Bühne ziehen und werfen können.
Nach dem Importieren der Bibliothek instanziieren wir eine Instanz von QuickBox2D. Wir übergeben einen Verweis auf die Zeitleiste an den QuickBox2D-Konstruktor. Dadurch werden alle starren Körper auf die Hauptzeitleiste gezeichnet. Sie können jeden MovieClip an den QuickBox2D-Konstruktor übergeben. Wir speichern unsere QuickBox2D-Instanz in einer Variablen namens sim (kurz für die Simulation).
Als nächstes rufen wir die createStageWalls () Methode. Dadurch werden Boxen an den Bühnenrändern so gezeichnet, dass starre Körper nicht vom Bildschirm fallen.
In Zeile 9 erstellen wir unseren ersten starren Körper mit dem addBox () Erstellungsmethode. addBox () nimmt ein Objekt
als sein Argument. Dies funktioniert wie ein beliebtes Tweening-Modul, mit dem Sie eine variable Anzahl von Argumenten in beliebiger Reihenfolge und mit leicht lesbarer Syntax eingeben können. In diesem Fall erstellen wir eine Box mit einem x und y Position von 3 Metern und a Breite und Höhe von 1 Meter. Diese Werte mögen seltsam erscheinen, aber ich werde sie in Kürze erklären.
Als Nächstes erstellen wir einen Kreis mit der addCircle () Methode. Das funktioniert so ziemlich wie das addBox () Methode. Wir benutzen die Params Objekt Um QuickBox2D mitzuteilen, den Kreis an Punkt (4,6) zu positionieren, geben wir dem Kreis einen Radius von 1 Meter.
Um die Simulation zu starten, rufen wir an Start() und um das Ziehen für die starren Körper zu ermöglichen, die wir nennen mouseDrag ().
Der einzige knifflige Teil dieses Codeausschnitts ist das Koordinatensystem. Es ist ziemlich offensichtlich, dass unsere x und y Werte sind nicht in Pixel. Box2D verwendet Meter anstelle von Pixeln. Dies ist etwas gewöhnungsbedürftig, aber nach ein oder zwei Stunden fällt es Ihnen nicht schwer, in Metern statt in Pixeln zu denken. Es ist wichtig zu wissen, dass 1 Meter 30 Pixel ist. Wir werden später mehr darüber erfahren, wenn wir zum Skinning kommen.
Lassen Sie uns das etwas interessanter machen. Ersetzen Sie Ihren vorherigen addBox () und addCircle () Anrufe mit diesen:
sim.addBox (x: 4, y: 3, Breite: 1, Höhe: 1); sim.addBox (x: 3, y: 6, Breite: 4, Höhe: 0,25, Dichte: 0, Winkel: 0,1); sim.addCircle (x: 3, y: 10, Radius: 1); sim.addCircle (x: 8, y: 10, Radius: 0,5);
Testen Sie Ihren Film. Wir kennen uns schon aus x, y, Breite, Höhe und Radius, aber wir haben noch zwei params hinzugefügt:
Dichte und Winkel. Rahmen Dichte auf 0 bewirkt, dass Box2D einen statischen starren Körper erstellt. Statische Körper nicht
fallen oder reagieren auf kollisionen mit anderen starren körper. Durch Einstellen der Dichte auf andere Werte wird festgelegt, wie die Masse des starren Körpers berechnet wird. Ändern Sie die Dichte auf 100 und Sie werden feststellen, dass das Rechteck zu wird sehr schwer.
Rahmen Winkel ändert den Startrotationswert für einen starren Körper. Dieser Wert wird im Bogenmaß anstatt in Grad angegeben. Ich arbeite lieber direkt im Bogenmaß, aber wenn Sie das nicht möchten, können Sie eine Hilfsfunktion zum Konvertieren erstellen:
// nimmt einen Gradwert und konvertiert ihn in Radiant (Radius) (Zahl: Zahl): Number Rücksprunggrad * Math.PI / 180;
An dieser Stelle empfehle ich dringend, sich fünf oder zehn Minuten Zeit zu nehmen, um etwas einfaches zu erstellen. Sie verfügen bereits über genügend Kenntnisse, um einige schöne Simulationen zu erstellen… Wenn Sie etwas Interessantes erstellen, speichern Sie es unbedingt.
Nun, da Sie anfangen, ein Gefühl für Dinge zu bekommen, löschen Sie Ihren Timeline-Code und ersetzen Sie ihn durch Folgendes:
[SWF (width = 800, height = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = neue QuickBox2D (this); sim.createStageWalls (); // mache einen schweren Kreis sim.addCircle (x: 3, y: 3, Radius: 0,5, Dichte: 5); // einige Plattformen erstellen sim.addBox (x: 4, y: 4, Breite: 6, Höhe: 0,35, Winkel: 0,1, Dichte: 0); sim.addBox (x: 9, y: 6, Breite: 6, Höhe: 0,35, Winkel: 0,1, Dichte: 0); sim.addBox (x: 14, y: 9, Breite: 12, Höhe: 0,35, Winkel: -0,2, Dichte: 0); sim.addBox (x: 4, y: 12, Breite: 0,35, Höhe: 4, Winkel: -0,1, Dichte: 0); sim.addBox (x: 10, y: 14, Breite: 14, Höhe: 0,35, Dichte: 0); // 26 Domino für machen (var i: int = 0; i<13; i++) sim.addBox(x:7 + i * 0.8, y:13, width:0.25, height:1.6); sim.addBox(x:8 + i * 0.8, y:18.7, width:0.25, height:1.6) sim.start(); sim.mouseDrag();
Testen Sie Ihren Film.
In diesem Beispiel passiert nichts Neues. Wir machen einfach Gebrauch von x, y, Breite, Höhe, Radius und Dichte.
Diese wenigen Params werden dich ziemlich weit bringen. Im zweiten Teil dieses Tutorials werden weitere Parameter behandelt, die sich auf das Verhalten oder starre Körper beziehen. Wenn Sie jedoch vorgehen möchten, finden Sie eine vollständige Liste in den QuickBox2D-Dokumenten.
Die Params für addBox () finden Sie hier.
Mit Box2D können Sie zusammengesetzte Formen erstellen. Dies bedeutet, dass Sie Kreise, Boxen und Polygone nehmen und zu komplexen Formen zusammenfassen.
QuickBox2D vereinfacht das Erstellen von zusammengesetzten Formen erheblich:
[SWF (width = 800, height = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = neue QuickBox2D (this); sim.createStageWalls (); // Verweise auf jeden Teil der Gruppe speichern var circleA: QuickObject = sim.addCircle (x: 0, y: 0, Radius: 0,5); var circleB: QuickObject = sim.addCircle (x: 2, y: 0, Radius: 0,5); var middleBox: QuickObject = sim.addBox (x: 1, y: 0, Breite: 1,5, Höhe: 0,5); // Gruppe mit der addGroup () - Methode erstellen sim.addGroup (objects: [circleA, circleB, middleBox], x: 6, y: 6); sim.start (); sim.mouseDrag ();
Löschen Sie Ihren Timeline-Code und ersetzen Sie ihn durch das, was oben angezeigt wird. Testen Sie Ihren Film.
Alle QuickBox2D-Erstellungsmethoden (wie addBox () und addCircle ()) geben QuickObject-Instanzen zurück. QuickObjects sind Wrapper für die Box2D-Klasseninstanzen, die zum Erstellen starrer Körper erforderlich sind. Wenn Sie Gruppenobjekte erstellen, müssen Sie zunächst Referenzen auf einige QuickObjects speichern. Wir nennen diese QuickObjects circleA, circleB und middleBox. Beachte das x und y
Die Koordinaten für diese sind relativ zu (0,0). Diese Anforderung soll die Positionierungslogik vereinfachen, die Sie beim Platzieren der verschiedenen Teile einer Gruppe ausführen müssen.
Nun, da wir unsere Referenzen haben, können wir sie als Array an den übergeben Objekte param der Gruppe hinzufügen() Erstellungsmethode. Wir bewegen dann die gesamte Gruppe zum Punkt (6,6).
Mit Boxen und Kreisen allein können Sie ziemlich komplizierte Gruppenformen konstruieren. Löschen Sie Ihren Timeline-Code und ersetzen Sie ihn durch Folgendes:
[SWF (width = 800, height = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = neue QuickBox2D (this); sim.createStageWalls (); // Einen Kreis erstellen sim.addCircle (x: 16, y: 3, Radius: 1, Dichte: 0,2); // eine Reihe von Boxen erstellen var-Boxen: Array = []; für (var i: int = 0; i<20; i++) var h:Number = 1 - i / 20; boxes.push(sim.addBox(x:i, y:i * h, width:1, height:h)); // group all the boxes together sim.addGroup(objects:boxes, x:3, y:3); sim.start(); sim.mouseDrag();
Testen Sie Ihren Film.
Es gibt einige Parameter, mit denen Sie die Farben und den Render-Stil von QuickObjects ändern können. Diese sind fillColor, fillAlpha, lineColor, lineAlpha und dicke der Linie. Sie sollten ziemlich selbsterklärend sein. Schau dir das an:
[SWF (width = 800, height = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = neue QuickBox2D (this); sim.createStageWalls (); sim.addCircle (x: 3, y: 3, Radius: 1, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 6, y: 3, Radius: 1, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 9, y: 3, Radius: 1, fillColor: 0x000022, lineThickness: 5, lineColor: 0x6666FF); sim.addBox (x: 12, y: 4, width: 2, height: 2, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0x00FF00); sim.start (); sim.mouseDrag ();
Versuchen Sie es auf Ihrer Timeline.
Dies ist zwar leicht zu verstehen, aber Sie können sehen, wie der Umgang mit diesen Parametern schnell mühsam wird. Im nächsten Schritt werden wir versuchen, einen Teil dieses sich wiederholenden Codes zu entfernen.
Um sich wiederholenden Code zu entfernen, hat QuickBox2D eine aufgerufene Methode setDefault (). Diese Methode erzwingt Standardwerte für alle Aufrufe von Erstellungsmethoden. Sie können also das vorherige Beispiel so vereinfachen, dass es folgendermaßen aussieht:
[SWF (width = 800, height = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = neue QuickBox2D (this); sim.createStageWalls (); sim.setDefault (fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 3, y: 3, Radius: 1); sim.addCircle (x: 6, y: 3, Radius: 1); sim.addCircle (x: 9, y: 3, Radius: 1, fillColor: 0x000022, lineThickness: 5, lineColor: 0x6666FF); sim.addBox (x: 12, y: 4, Breite: 2, Höhe: 2, lineColor: 0x00FF00); sim.start (); sim.mouseDrag ();
Probieren Sie dies in Ihrer Timeline aus.
Das setDefault () Die Methode ist nicht darauf beschränkt, mit Dingen wie zu arbeiten Füllfarbe und dicke der Linie. Es kann in Verbindung mit verwendet werden irgendein param. Während ich meistens Gebrauch mache setDefault () für den Renderstil und bestimmte Params, die sich auf Verbindungen beziehen, könnte mach so etwas:
sim.setDefault (fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00, y: 3, Radius: 1); sim.addCircle (x: 3); sim.addCircle (x: 6); sim.addCircle (x: 9, fillColor: 0x000022, lineThickness: 5, lineColor: 0x6666FF);
Dies kann schnell verwirrend werden. Seien Sie also vorsichtig bei der Verwendung setDefault () auf diese Weise.
Eine der Hauptfunktionen von QuickBox2D ist das einfache Enthäuten starrer Körper. Da das Skinning im Allgemeinen die Verwendung von Bibliotheksbeständen erfordert, müssen Sie diese Quelldatei herunterladen.
Es gibt drei MovieClips in der Bibliothek, CircleFace, OddPizza und Mail. Jeder Clip wird zur Verwendung mit ActionScript exportiert. Auf der Timeline finden Sie den folgenden Code:
[SWF (width = 800, height = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = neue QuickBox2D (this); sim.createStageWalls (); sim.addCircle (x: 3, y: 3, Radius: 45/30, skin: CircleFace, scaleSkin: false); sim.addCircle (x: 6, y: 3, Radius: 1, skin: OddPizza); sim.addCircle (x: 6, y: 6, Radius: 0,5, skin: OddPizza); sim.addCircle (x: 6, y: 10, Radius: 2, skin: OddPizza); sim.addBox (x: 12, y: 3, Breite: 3, Höhe: 50/30, skin: Mail); sim.addBox (x: 18, y: 3, Breite: 3, Höhe: 3, skin: Mail); sim.start (); sim.mouseDrag ();
Testen Sie den Film.
Um benutzerdefinierte Skins zu erstellen, verwenden wir die Haut param. In diesem Beispiel setzen wir alle unsere Skin-Parameter, um Klassen aus unserer Bibliothek zu verknüpfen. Standardmäßig erstellt QuickBox2D eine Instanz dieser Klasse und versucht, diese an den starren Körper anzupassen. Dies ist nützlich für einfache Formen wie Kreise und Kästchen. Bei komplexeren Skins können Sie diese Funktion jedoch mit deaktivieren scaleSkin param. Wir machen dies in Zeile 8, damit die CircleFace-Skin ordnungsgemäß verwendet wird.
Sie werden feststellen, dass wir für den Radius 45/30 statt 1,5 setzen. Wie zuvor in diesem Tutorial erwähnt, ist 1 Meter 30 Pixel. Um von Pixeln in Meter zu konvertieren, teilen wir uns durch 30. Der Kreis in der CircleFace-Skin hat einen Radius von 45 Pixeln, daher haben wir die hartcodierte Konvertierung der Klarheit halber gelassen als schriftlich 1.5.
Die Zeilen 10-12 erzeugen Kreise, die die OddPizza-Skin verwenden. Das scaleSkin param ist standardmäßig true, sodass jede Skin automatisch skaliert wird
entsprechend dem Radius param. Die Zeilen 14 und 15 erstellen Felder, die mit dem E-Mail-Clip überzogen sind.
In den letzten Monaten wurden auf Anforderung von Entwicklern, die QuickBox2D verwenden, weitere Skinning-Funktionen hinzugefügt. Ich verwende ausschließlich die oben beschriebenen Techniken, aber wenn Sie daran interessiert sind, ein paar zusätzliche Skinning-Techniken zu sehen, werfen Sie einen Blick auf diesen Beitrag zu Actionsnippet.
ActionSnippet QuickBox2D-Beiträge - Auf actionnippet.com gibt es eine ganze Reihe von QuickBox2D-Beispielen in Form von Beiträgen. Die früheren Beiträge sind wesentlich einfacher als die neueren. Aus diesem Grund empfehle ich, ein paar Seiten zurückzublättern und sich auf einige der späteren Beiträge zu konzentrieren. In diesen Beispielen wird fast jeder Aspekt von QuickBox2D behandelt.
QuickBox2D-Dokumente - Dies ist nur die Dokumentation für QuickBox2D. An einigen Stellen setzt es grundlegende Box2D-Kenntnisse voraus.
Box2D-Handbuch - Eine hervorragende Ressource, die alle Aspekte von Box2D abdeckt. Die c++
Syntax könnte Sie abschrecken… aber wenn Sie solche Pfeile ersetzen -> mit Punktsyntax und Sternchen ignorieren *… Sie werden feststellen, dass Sie ein gutes Geschäft verstehen.
Box2D Docs - Docs für alle C ++ - Klassen. Ich finde das sehr nützlich für einige der in Teil 2 dieses Tutorials behandelten Techniken.
Wir haben viel Boden bedeckt und nur die Oberfläche wirklich zerkratzt. Nachfolgend finden Sie eine Zusammenfassung der kommenden QuickBox2D-Tutorials:
QuickBox2D Teil 2
Im zweiten Teil dieses Tutorials werden wir einige der fortgeschrittenen Funktionen von QuickBox2D untersuchen. Wir werden untersuchen, wie starre Körper aus Polygonen erstellt werden. Wir lernen, wie Sie unsere Simulation mit Hilfe zusätzlicher Parameter wie z Restitution, linearDamping und angleDamping. Wir besprechen einige leistungsstarke Box2D-Methoden, die von QuickBox2D verfügbar gemacht werden, und wir sprechen über FRIM (Framerate Independent Motion)..
QuickBox2D Teil 3
Im dritten Teil dieses Tutorials werden einige fortgeschrittene Techniken behandelt. Wir werden sehen, wie QuickBox2D alle verschiedenen Arten von Box2D-Verbindungen handhabt. Wir gehen auch auf Kontaktpunkte und spezielle Arten von Kollisionen ein.
Ich hoffe, es hat Ihnen Spaß gemacht, diesen ersten Teil zu lesen!
Accentsconagua