Erste Schritte mit Matter.js Die Engine- und World-Module

Im einführenden Tutorial dieser Serie wurden Sie kurz mit verschiedenen Modulen in Matter.js vertraut gemacht. Die Bibliothek enthält viele Module. Daher war es nicht praktikabel, in einem einzigen Lernprogramm ausführlich darüber zu schreiben. Nachdem Sie den ersten Teil der Serie gelesen haben, sollten Sie jetzt einen Überblick über die Bibliothek und ihre Funktionen haben.

In diesem Tutorial konzentrieren wir uns nur auf das World-Modul und das Engine-Modul in Matter.js. Das World-Modul liefert uns die notwendigen Methoden und Eigenschaften, um das World-Composite zu erstellen und zu manipulieren. Sie können es verwenden, um verschiedene Körper der Welt hinzuzufügen oder zu entfernen. Das Modul Engine enthält Methoden zum Erstellen und Bearbeiten der Engines, die für die Erstellung der Simulation Ihrer Welt verantwortlich sind.

Das Weltmodul

In diesem Abschnitt lernen Sie verschiedene Methoden, Eigenschaften und Ereignisse des Moduls Welt kennen. Welt ist eigentlich ein Zusammengesetzt mit zusätzlichen Eigenschaften wie Schwere und Grenzen hinzugefügt. Hier ist eine Liste der in diesem Modul verfügbaren wichtigen Methoden:

• add (zusammengesetztes Objekt): Diese Methode wird vom Composite-Modul geerbt und ermöglicht es Ihnen, einen oder mehrere Body (s), Composite (s) oder Constraint (s) zum angegebenen Composite oder der angegebenen Welt hinzuzufügen. 
• addBody (Welt, Körper): Mit dieser Methode können Sie der gegebenen Welt einzelne Körperelemente hinzufügen. Es gibt auch addComposite () und addConstraint () Methoden, mit denen Sie der Welt einen Verbund oder eine Einschränkung hinzufügen können.

Der folgende Code verwendet beide Methoden, um der Welt verschiedene Körper hinzuzufügen. Das hinzufügen() Diese Methode fügt drei statische Rechtecke hinzu, die als Wände fungieren. Das addBody () Die Methode fügt einen Kreis, ein Quadrat oder ein Rechteck hinzu, basierend auf der Schaltfläche, die der Benutzer angeklickt hat.

var topWall = Bodies.rectangle (400, 0, 810, 30, isStatic: true); var leftWall = Bodies.rectangle (0, 200, 30, 420, isStatic: true); var ball = Körperkreis (460, 10, 40, 10); var bottomWall = Bodies.rectangle (400, 400, 810, 30, isStatic: true); World.add (engine.world, [topWall, leftWall, Ball, bottomWall]); var addCircle = function () return Bodies.circle (Math.random () * 400 + 30, 30, 30); ; $ ('. add-circle'). on ('click', function () World.add (engine.world, addCircle ()););

Sie können das sehen isStatic Schlüssel wurde auf gesetzt wahr für die drei Wände in unserer Welt. Setzen Sie diesen Schlüssel auf wahr denn jedes Objekt macht dieses Objekt völlig statisch. Das Objekt ändert jetzt niemals seine Position oder seinen Winkel. Es gibt viele andere Eigenschaften, die angegeben werden können, um das Verhalten verschiedener Objekte zu steuern. Sie werden alles über das Body-Modul-Tutorial dieser Serie erfahren.

• remove (zusammengesetztes Objekt, [deep = false]): Dies ist eine generische Methode, um einen oder mehrere Körper, Verbundstoffe oder Nebenbedingungen aus dem angegebenen Verbund oder der angegebenen Welt zu entfernen. Sie können beispielsweise die folgende Zeile verwenden, um die obere und die linke Wand von der Welt zu entfernen.

World.remove (engine.world, [topWall, leftWall]);

• klar (Welt, keepStatic): Diese Methode ist ein Alias ​​für Zusammengesetzt Gegenstück. Sie können es verwenden, um alle Elemente auf einmal aus der Welt zu entfernen. Der zweite Parameter ist ein Boolean, mit dem verhindert werden kann, dass statische Elemente gelöscht werden. Sein Wert ist falsch standardmäßig. Dies bedeutet das Anrufen Welt.klar (Welt) wird alle Elemente aus dieser bestimmten Welt entfernen.
• drehen (zusammengesetzt, Drehung, Punkt, [rekursiv = wahr])Diese Methode kann verwendet werden, um alle Kinder in einer bestimmten Welt oder in einem bestimmten Winkel um den angegebenen Punkt zu drehen. Der hier angegebene Winkel ist im Bogenmaß. Das Punkt Parameter bestimmt den Drehpunkt.
• Maßstab (zusammengesetzt, MaßstabX, MaßstabY, Punkt, [rekursiv = wahr]): Mit dieser Methode können Sie alle untergeordneten Elemente Ihres Composite oder Ihrer Welt anhand der angegebenen Werte skalieren. Diese Methode skaliert alles von Breite, Höhe und Fläche zu Masse und Trägheit.
• übersetzen (zusammengesetzt, Übersetzung, [rekursiv = wahr]): Die Übersetzungsmethode ist hilfreich, wenn Sie alle untergeordneten Elemente einer Welt oder eines Composite um einen bestimmten Vektor relativ zu ihren aktuellen Positionen verschieben oder verschieben möchten. 

Eine Sache, die Sie im Auge behalten sollten, ist, dass auch nicht Übersetzen() Noch drehen() verleiht den Körpern in der Welt jede Art von Geschwindigkeit. Jede Bewegung ist nur das Ergebnis von Änderungen in der Form oder Position verschiedener Körper. Hier ist etwas Code zum Skalieren, Drehen und Übersetzen einer Welt basierend auf den Klick-Tasten:

$ ('. scale'). on ('click', function () Matter.Composite.scale (engine.world, 0.5, 0.7, x: 400, y: 200);); $ ('. drehen'). ein ('click', function () Matter.Composite.rotate (engine.world, Math.PI / 4, x: 400, y: 200);); $ ('. translate'). on ('click', function () Matter.Composite.translate (engine.world, x: 10, y: 10););

Beachten Sie, dass der obige Code auf der X- und Y-Achse eine andere Skala anwendet. Dadurch wird der Kreis in unserer Matter.js-Welt zu einem Oval. Das Oval kippt dann in einen stabileren Zustand mit niedrigerer potentieller Energie.

Drücken Sie die Rahmen Schaltfläche in der obigen Demo. Danach drücken Sie die Drehen Klicken Sie auf die Schaltfläche, um zu sehen, wie genau Matter.js die reale Bewegung eines Ovals simuliert.

Neben all diesen Methoden ist die Welt Das Modul hat auch viele nützliche Eigenschaften. Sie können beispielsweise ein Array aller Körper erhalten, die direkt untergeordnete Elemente der Welt sind Weltkörper. In ähnlicher Weise können Sie mit Array ein Array aller Composites und Einschränkungen erhalten world.composites und welt.beschränkungen. 

Sie können auch die Grenzen der Welt angeben, innerhalb der Matter.js Kollisionen erkennen soll world.bounds. Eine interessante Sache, die Sie mit den Welteigenschaften ändern können, ist die Schwerkraft. Die Schwerkraft entlang der x- und y-Achse ist standardmäßig auf 0 und 1 eingestellt. Sie können diese Werte mit ändern Welt.gravitation.x und Welt.gravity.y beziehungsweise.

Besuchen Sie die Matter.World-Dokumentationsseite, um mehr über dieses Modul zu erfahren.

Das Engine-Modul

Das Engine-Modul ist erforderlich, um die Simulation der Welt ordnungsgemäß zu aktualisieren. Hier finden Sie eine Liste einiger wichtiger Methoden des Engine-Moduls.

• erstellen ([Optionen])Diese Methode ist nützlich, wenn Sie eine neue Engine erstellen möchten. Das Optionen Parameter in dieser Methode ist eigentlich ein Objekt mit Schlüssel-Wert-Paaren. Sie können verwenden Optionen um die Standardwerte für verschiedene Eigenschaften der Engine zu überschreiben. Zum Beispiel können Sie die Zeitstrahl Eigenschaft, um die Simulation zu verlangsamen oder zu beschleunigen. 
• Update (Motor, [Delta = 16.666], [Korrektur = 1]): Diese Methode wird die Simulation rechtzeitig vorwärts bewegen Delta Frau. Der Wert von Korrektur Parameter gibt den Zeitkorrekturfaktor an, der nach der Aktualisierung angewendet werden soll. Diese Korrektur ist in der Regel nur dann notwendig, wenn die Delta wechselt zwischen jedem Update.
• Zusammenführen (engineA, engineB): Diese Methode führt zwei durch die angegebenen Parameter angegebene Engines zusammen. Beim Zusammenführen wird die Konfiguration von übernommen engineA und die Welt ist aus engineB.

Das Modul Engine verfügt außerdem über viele andere Eigenschaften, mit denen Sie die Qualität der Simulation steuern können. Sie können einen Wert für festlegen constraintIterations, Positionsunterschiede oder VelocityIterations um die Anzahl der Constraint-, Position- und Geschwindigkeits-Iterationen anzugeben, die während jeder Aktualisierung ausgeführt werden sollen. Ein höherer Wert führt zu einer besseren Simulation. Ein höherer Wert wirkt sich jedoch auch negativ auf die Leistung der Bibliothek aus.

Sie können einen Wert für die festlegen timing.timeScale Eigenschaft zur Steuerung der Geschwindigkeit, mit der die Simulation erfolgt. Jeder Wert unter 1 führt zu einer Zeitlupen-Simulation. Wenn Sie diese Eigenschaft auf Null setzen, wird die Welt vollständig eingefroren. Das folgende Beispiel sollte es deutlich machen.

$ ('. slow-mo'). on ('click', function () engine.timing.timeScale = 0,5;); $ ('. norm-mo'). on ('click', function () engine.timing.timeScale = 1;); $ ('. fast-mo'). on ('click', function () engine.timing.timeScale = 1.5;);

Sie haben vielleicht bemerkt, dass die Bälle diesmal vom Boden abprallen. Für jeden starren Körper ist standardmäßig ein Rückstellungskoeffizient von 0 festgelegt. Dies gibt ihnen tonartige Eigenschaften und sie prallen bei einer Kollision nicht zurück. Ich habe den Restitutionswert auf 1 geändert, damit die Bälle leicht zurückspringen können. 

All diese Eigenschaften von starren Körpern lernen Sie im nächsten Tutorial der Serie. Fügen Sie der Welt einige Kreise oder Kugeln hinzu und drücken Sie die Zeitlupen- und Zeitraffertasten, um den Unterschied zu erkennen.

Sie sollten die Matter.Engine-Dokumentationsseite besuchen, um mehr über dieses Modul zu erfahren.

Fazit

In diesem Lernprogramm wurden zwei sehr wichtige Module in Matter.js behandelt, die Sie zur Ausführung von Simulationen benötigen. Nachdem Sie dieses Tutorial gelesen haben, sollten Sie in der Lage sein, Ihre Welt zu skalieren, zu drehen, zu verlangsamen oder zu beschleunigen. Jetzt wissen Sie auch, wie Sie Körper in einer Welt entfernen oder hinzufügen. Dies kann hilfreich sein, wenn Sie 2D-Spiele entwickeln.

Im nächsten Tutorial der Serie erfahren Sie mehr über die verschiedenen Methoden, Eigenschaften und Ereignisse, die in verfügbar sind Körper Modul.