Share
Im dritten Tutorial der Serie haben Sie verschiedene Methoden und Eigenschaften des Moduls Body in Matter.js kennen gelernt. Mit dem Körpermodul können Sie einfache Körper wie Kreise, Rechtecke und Trapez bearbeiten. Matter.js verfügt auch über andere Module, mit deren Hilfe Sie komplexe, aber gebräuchliche Körper wie Autos, Ketten, Pyramiden, Stapel und weiche Körper erstellen und bearbeiten können.
Alle diese Zusammenstellungen und die Methoden zu ihrer Bearbeitung sind in der Zusammengesetzt und Verbundwerkstoffe Module in Matter.js. In diesem Lernprogramm lernen Sie zunächst verschiedene Verbundwerkstoffe wie Pyramiden und Autos usw. kennen, die mithilfe von erstellt werden können Verbundwerkstoffe Modul. Danach gehen wir einige wichtige Methoden und Eigenschaften durch, die im Internet verfügbar sind Zusammengesetzt Modul.
Ein Stapel und eine Pyramide sind sich sehr ähnlich. Ein Stapel kann mithilfe von erstellt werden Stack (xx, yy, Spalten, Zeilen, columnGap, rowGap, Callback) Funktion. Ebenso können Sie eine Pyramide mit Hilfe von erstellen Pyramide (xx, yy, Spalten, Zeilen, columnGap, rowGap, Callback) Funktion. Wie Sie sehen, sind alle Parameter in beiden Fällen gleich. Tatsächlich leitet sich die Pyramidenbildung von der Stapelbildung ab.
Die Namen aller Parameter sind selbsterklärend. Das xx und yy Parameter, die in dieser Funktion verwendet werden, werden verwendet, um den Startpunkt des Verbunds festzulegen. Das Säulen und Reihen Parameter bestimmen die Anzahl der Spalten und Zeilen im Verbund. Die Lücke zwischen verschiedenen Zeilen und Spalten kann mithilfe von gesteuert werden columnGap und rowGap Parameter.
Unter dem Einfluss der Schwerkraft wird der rowGap verschwindet in den meisten Fällen, ohne den Verbundstoff zu verändern. Manchmal kann jedoch der resultierende Impuls einzelner Körper die Körper unter sich bewegen. Dies kann die Form des Verbundstoffs ändern.
Mit der Callback-Funktion können Körper erstellt werden, die je nach verwendeter Funktion in einer Rasteranordnung oder einer Pyramidenanordnung angeordnet werden können. Das bedeutet, dass Sie damit einen Stapel oder eine Pyramide aus rechteckigen Boxen oder Trapezoiden erstellen können. Sie sollten bedenken, dass durch die Verwendung eines Kreises die Arrangements instabil werden. Hier ist der Code zum Erstellen eines Stapels von Rechtecken:
var stack = Composites.stack (550, 100, 5, 3, 0, 0, Funktion (x, y) return Bodies.rectangle (x, y, 40, 20, render: fillStyle: 'orange', strokeStyle) : 'schwarz'););
Sie können die Rückruffunktion so komplex gestalten, wie Sie möchten. In diesem Fall habe ich die Render-Optionen verwendet, die wir im Body-Modul-Tutorial kennengelernt haben, um nur orange Rechtecke mit schwarzen Konturen zu erstellen.
Hier ist ein sehr ähnlicher Code zum Erstellen von Pyramidenformen in Matter.js:
var pyramid = Composites.pyramid (0, 220, 11, 6, 0, 0, Funktion (x, y) return Bodies.rectangle (x, y, 30, 30, render: fillStyle: 'cornflowerblue', strokeStyle) : 'schwarz'););
Wenn Sie mit der Erstellung vieler Pyramiden mit anderen Parametern beginnen, werden Sie feststellen, dass die Anzahl der erstellten Zeilen manchmal geringer ist als die von Ihnen angegebene Anzahl von Zeilen. Dies liegt daran, dass die Bibliothek die folgende Formel verwendet, um die Anzahl der Zeilen zu berechnen:
Math.min (Zeilen, Math.ceil (Spalten / 2))
Sie können einen Stapel oder eine andere Pyramide vorsichtig über einer Pyramide platzieren, um interessante Muster zu erstellen. Sie können beispielsweise eine kleinere Pyramide über der roten platzieren, um eine vollständige Pyramide mit zwei Farben zu erstellen.
Ein Auto in Matter.js besteht aus zwei Rädern und einer Karosserie. Die Räder werden mit einer Reibung von 0,8 und einer Dichte von 0,01 erzeugt. Mit der Funktion können Sie ein Auto erstellen Auto (xx, yy, Breite, Höhe, Radgröße). Das xx und yy Über Parameter werden die Position des Fahrzeugs festgelegt.
Das Breite und Höhe Bestimmen Sie die Abmessungen des Hauptkörpers des Autos. Das Radgröße Über diesen Parameter wird der Radius der Räder festgelegt. Eine Rückruffunktion ist nicht erforderlich, da die Art der Körper, die zum Erstellen eines Autos benötigt werden, vorbestimmt ist.
Accentsconagua
var car = Composites.car (190, 100, 100, 45, 30); $ ('. force'). on ('click', function () Body.applyForce (car.bodies [0], x: car.bodies [0] .position.x, y: car.bodies [0 ] .position.y, x: 0.5, y: 0););Du kannst den ... benutzen Kette (zusammengesetzt, xOffsetA, yOffsetA, xOffsetB, yOffsetB, Optionen) Funktion in Matter.js, um alle Körper in einem bestimmten Verbund mithilfe von Einschränkungen miteinander zu verketten. Die Offset-Parameter in der Funktion werden verwendet, um die relative Position der Bedingungen zu bestimmen, die verschiedene Boxen miteinander verbinden.
Sie benötigen außerdem zusätzliche Einschränkungen, um die Kette an einem Punkt der Welt aufzuhängen. Hier ist der Code zum Erstellen einer Kette und zum Aufhängen an die Decke unserer Welt.
var-Boxen = Composites.stack (500, 80, 3, 1, 10, 0, Funktion (x, y) return Bodies.rectangle (x, y, 50, 40);); var chain = Composites.chain (Boxen, 0,5, 0, -0,5, 0, Steifheit: 1); Composite.add (Boxen, Constraint.create (BodyA: Boxen.Bodies [0], Punkt B: x: 500, y: 15, Steifheit: 0,8));
Die Boxen in unserer Kette wurden mit der erstellt Stapel() Funktion, über die Sie früher erfahren haben. Die Einschränkungen, die von erstellt werden Kette() Funktion haben eine Steifigkeit von 1.
Dadurch wird verhindert, dass sich die Länge des Seils zwischen verschiedenen Kästen ändert. Die zusätzliche Einschränkung, die wir hier geschaffen haben, hält unsere Boxen an der Decke.
Hier ist eine Demo mit einem Auto und der Kette, die aus dem obigen Code erstellt wurde. Sie können das Auto mit den orangefarbenen Tasten vorwärts und rückwärts bewegen. Mit jedem Klicken wird in der Mitte des ersten Rads eine Kraft ausgeübt, die das gesamte Fahrzeug bewegt.
Ein weicher Körper ähnelt einem Stapel mit zwei Hauptunterschieden. Die einzelnen Elemente des weichen Körpers werden durch Beschränkungen zusammengehalten, und ein weicher Körper kann nur Kreise als seine Bestandteile enthalten. Sie können einen weichen Körper als Kreuzung zwischen einem Netz und einem Stapel betrachten. Das Erstellen eines weichen Körpers ist so einfach wie das Aufrufen softBody (xx, yy, Spalten, Zeilen, colGap, rowGap, crossBrace, pRadius, pOptions, cOptions) mit den entsprechenden Parameterwerten.
Sie kennen bereits die ersten sechs Parameter der Funktion. Das crossBrace Parameter ist ein boolescher Wert, der bestimmt, ob die gekreuzten Klammern gerendert werden sollen oder nicht. Das pRadius Parameter bestimmt den Radius der Kreise und der Optionen Mit diesem Parameter können andere Eigenschaften der Partikel wie Masse und Trägheit gesteuert werden.
Das Optionen Parameter gibt verschiedene Optionen für die Einschränkungen an, die die Partikel verbinden. Der folgende Code erstellt einen weichen Körper für unsere Matter.js-Welt.
var particleOptions = Reibung: 0,05, ReibungStatisch: 0,1, Rendern: sichtbar: true; var constraintOptions = render: visible: false; var softBody = Composites.softBody (450, 200, 10, 5, 0, 0, true, 15, particleOptions, constraintOptions);
Das Erstellen einer Newton-Station ist mit dem integrierten Gerät auch sehr unkompliziert NewtonsCradle (xx, yy, Anzahl, Größe, Länge) Funktion. Das Nummer Parameter bestimmt die Anzahl der Kugeln in der Wiege. Das Größe Parameter bestimmt ihren Radius und die Länge Der Parameter bestimmt die Länge des Seils, an dem die Kugeln befestigt sind. Die Bibliothek setzt die Restitutions- und Reibungswerte auf null, damit sie ihre Bewegung lange Zeit fortsetzen können.
Der folgende Code erstellt die Wiege und bewegt den ersten Ball in eine höhere Position, sodass er beim Herunterfallen und beim Anschlagen auf andere Bälle eine gewisse Geschwindigkeit hat. Die durch die angegebene Position Übersetzen() Funktion ist relativ zur aktuellen Position des Körpers. Alle diese Funktionen und Eigenschaften des Karosserie Das Modul wurde im vorherigen Tutorial der Serie ausführlicher erörtert.
var cradleA = Composites.newtonsCradle (200, 50, 5, 20, 250); Body.translate (cradleA.bodies [0], x: -100, y: -100);
Nachdem Sie nun gelernt haben, verschiedene Arten von Verbundkörpern zu erstellen, ist es an der Zeit, sich mit den verschiedenen Methoden und Eigenschaften vertraut zu machen, die im Verbundmodul zur Verfügung stehen, um diese Verbundwerkstoffe zu bearbeiten. Sie können verwenden drehen (zusammengesetzt, Drehung, Punkt, [rekursiv = wahr]), Maßstab (zusammengesetzt, MaßstabX, MaßstabY, Punkt, [rekursiv = wahr]) und übersetzen (zusammengesetzt, Übersetzung, [rekursiv = wahr]) alle Verbundwerkstoffe drehen, skalieren und übersetzen. Diese Funktionen sind ihren Gegenstücken im Körpermodul sehr ähnlich.
Sie können auch einen oder mehrere Body (s), Constraint (s) und Composite (s) aus einem bestimmten Composite hinzufügen oder daraus entfernen add (zusammengesetztes Objekt) und remove (zusammengesetztes Objekt, [deep = false]) Funktionen. Wenn Sie einige Körper von einem Verbund in einen anderen verschieben möchten, können Sie dies mit Hilfe von tun verschieben (compositeA, Objekte, compositeB) Funktion. Diese Funktion verschiebt die angegebenen Objekte von Verbund A nach Verbund B.
Wenn Sie jemals auf alle Körper, Zusammenstellungen und Einschränkungen zugreifen möchten, die direkte untergeordnete Elemente der angegebenen Zusammenstellung sind, können Sie das verwenden zusammengesetzte Körper, Verbundwerkstoffe und composite.constraints Eigenschaften, um auf sie alle in Form eines Arrays zugreifen zu können.
Wir haben bereits gesehen, wie man das benutzt Körper Eigenschaft, einen Ball aus der Wiege von Newton nach links zu übersetzen und eine Kraft auf das Rad unseres Fahrzeugverbundes aufzubringen. Wenn Sie aus dem Verbund einen Verweis auf einzelne Körper haben, können Sie alle Methoden und Eigenschaften des Körpermoduls verwenden, um sie zu bearbeiten.
In diesem Lernprogramm haben Sie gelernt, wie Sie komplexe Composites mit den Composite- und Composites-Modulen in Matter.js erstellen. Sie haben auch verschiedene Methoden und Eigenschaften kennen gelernt, mit denen Sie diese Composites bearbeiten können.
Diese Serie sollte Anfängerfreundlich mit der Matter.js-Bibliothek beginnen. Vor diesem Hintergrund haben wir wichtige Funktionen und Eigenschaften der am häufigsten verwendeten Module in der Bibliothek behandelt.
Matter.js hat auch viele andere Module, die wir im ersten Tutorial der Serie kurz besprochen haben. Wenn Sie diese Bibliothek in vollem Umfang nutzen möchten, sollten Sie die Dokumentation all dieser Module auf der offiziellen Website lesen.
Wenn Sie Matter.js in einem Ihrer Projekte verwendet haben, teilen Sie uns bitte Ihre Erfahrungen in den Kommentaren mit.
