Share
Matter.js ist eine in JavaScript geschriebene 2D-Physik-Engine für starre Körper. Mit dieser Bibliothek können Sie die 2D-Physik im Browser einfach simulieren. Es bietet eine Vielzahl von Funktionen, beispielsweise die Möglichkeit, starre Körper zu erzeugen und ihnen physikalische Eigenschaften wie Masse, Fläche oder Dichte zuzuordnen. Sie können auch verschiedene Arten von Kollisionen und Kräften wie Schwerkraft und Reibung simulieren.
Matter.js unterstützt alle gängigen Browser einschließlich IE8 +. Darüber hinaus ist es für den Einsatz auf mobilen Geräten geeignet, da es Berührungen erkennt und schnell reagiert. Aufgrund all dieser Funktionen lohnt es sich, Zeit zu investieren, um sich mit der Verwendung der Engine vertraut zu machen, da Sie in der Lage sind, physikbasierte 2D-Spiele oder Simulationen zu erstellen. In diesem Lernprogramm werde ich die Grundlagen dieser Bibliothek, einschließlich ihrer Installation und Verwendung, behandeln und ein Arbeitsbeispiel geben.
Sie können Matter.js mithilfe von Paketmanagern wie Bower oder NPM mithilfe der folgenden Befehle installieren:
bower install matter-js npm install matter-js
Sie können auch einen Link zur Bibliothek von einem CDN erhalten und direkt in Ihre Projekte einbinden:
Der beste Weg, um mehr über Matter.js zu lernen, besteht darin, etwas Code zu sehen und zu verstehen, wie es funktioniert. In diesem Abschnitt werden wir einige Körper erstellen und den erforderlichen Code Zeile für Zeile durchgehen.
var Engine = Matter.Engine, Render = Matter.Render, Welt = Matter.World, Bodies = Matter.Bodies; var engine = Engine.create (); var render = Render.create (element: document.body, engine: engine, Optionen: width: 800, height: 400, wireframes: false); var boxA = Bodies.rectangle (400, 200, 80, 80); var ballA = Körperkreis (380, 100, 40, 10); var ballB = Körperkreis (460, 10, 40, 10); var ground = Bodies.rectangle (400, 380, 810, 60, isStatic: true); World.add (Engine.world, [BoxA, BallA, BallB, Boden]); Motorlauf (Motor); Render.run (Rendern);
Wir beginnen mit der Erstellung von Aliasnamen für alle Matter.js-Module, die wir möglicherweise in unserem Projekt benötigen. Das Materie.Motor Das Modul enthält Methoden zum Erstellen und Bearbeiten von Engines. In einem Projekt sind Motoren erforderlich, um die Simulation der Welt zu aktualisieren. Das Matter.Render Das Modul ist ein grundlegender HTML5-Renderer. Dieses Modul wird benötigt, um verschiedene Engines zu visualisieren.
Das Materie.Welt Das Modul dient zum Erstellen und Bearbeiten der Welt, in der die Engine ausgeführt wird. Es ist dem ähnlich Materie.Zusammensetzung Modul, aber Sie können einige zusätzliche Eigenschaften wie optimieren Schwere und Grenzen. Das letzte Modul in unserem Code, genannt Materie. Körper, ermöglicht das Erstellen von starren Körperobjekten. Ein anderes ähnliches Modul namens Materie ermöglicht die Manipulation einzelner Körper.
Die nächste Zeile verwendet die erstellen ([Einstellungen]) Methode der Materie.Motor Modul zum Erstellen einer neuen Engine. Das die Einstellungen Parameter in der obigen Methode ist eigentlich ein Objekt mit Schlüssel-Wert-Paaren, um die Standardwerte einiger Eigenschaften zu überschreiben, die sich auf die Engine beziehen.
Zum Beispiel können Sie den globalen Skalierungsfaktor der Zeit für alle Körper der Welt steuern. Wenn Sie einen Wert unter 1 einstellen, wirkt sich die Welt in Zeitlupe aus. In ähnlicher Weise führt ein Wert über 1 dazu, dass die Welt schnelllebig wird. Sie werden mehr über das lernen Materie.Motor Modul im nächsten Tutorial der Serie.
Danach benutzen wir die erstellen ([Einstellungen]) Methode der Matter.Render Modul zum Erstellen eines neuen Renderers. Genau wie beim Engine-Modul ist der Einstellungsparameter in der obigen Methode ein Objekt, mit dem verschiedene Optionen für den Parameter angegeben werden. Du kannst den ... benutzen Element Schlüssel, um das Element anzugeben, in das die Bibliothek die Leinwand einfügen soll. Ebenso können Sie auch die verwenden Segeltuch Schlüssel, um das Canvas-Element anzugeben, in dem die Matter.js-Welt gerendert werden soll.
Da ist ein Motor Schlüssel, mit dem Sie die Engine angeben können, die zum Rendern der Welt verwendet werden soll. Es gibt auch eine Optionen Schlüssel, der tatsächlich ein Objekt als Wert akzeptiert. Mit dieser Taste können Sie Werte für verschiedene Parameter wie den einstellen Breite oder Höhe der Leinwand. Sie können die Drahtgitter auch ein- oder ausschalten, indem Sie den Wert von einstellen Wireframe Schlüssel zu wahr oder falsch beziehungsweise.
Die nächsten Zeilen schaffen verschiedene Körper, die in unserer Welt interagieren werden. Die Körper werden mit Hilfe der erstellt Materie. Körper Modul in Matter.js. In diesem Beispiel haben wir gerade zwei Kreise und ein Rechteck mit dem erstellt Kreis() und Rechteck() Methode. Es gibt auch andere Methoden, um verschiedene Polygone zu erstellen.
Sobald wir die Körper geschaffen haben, müssen wir sie mit Hilfe der hinzufügen() Methode aus der Materie.Welt Modul. Nachdem wir der Welt die erforderlichen Körper hinzugefügt haben, müssen wir nur die Engine und den Renderer mit dem ausführen Lauf() Methode aus den jeweiligen Modulen. Dies ist im Wesentlichen der gesamte Code, den Sie zum Erstellen und Rendern einer Welt in Matter.js benötigen.
Der Code am Anfang dieses Abschnitts erstellt das folgende Ergebnis.
Es gibt mehr als 20 verschiedene Module in Matter.js. Alle diese Module bieten verschiedene Methoden und Eigenschaften, die zum Erstellen verschiedener Arten von Simulationen nützlich sind und die Interaktion mit ihnen ermöglichen. Einige dieser Module behandeln Kollisionen, andere wiederum das Rendern und die Simulation.
In dem Beispiel im vorherigen Abschnitt wurden vier verschiedene Module für das Rendern, die Simulation und die Erstellung von Körpern verwendet. In diesem Abschnitt erfahren Sie mehr über die Rollen einiger in Matter.js verfügbarer allgemeiner Module.
Accentsconagua
Motor Das Modul bietet verschiedene Methoden und Eigenschaften, mit denen Sie das Verhalten verschiedener Engines steuern können.Welt ist eigentlich ein Zusammengesetzt Körper mit zusätzlichen Eigenschaften wie Schwerkraft und Grenzen.Körper Das Modul enthält verschiedene Methoden, mit denen Sie starre Körper mit üblichen Formen wie Kreis, Rechteck oder Trapez erstellen können.Körper Modul. Mit diesem Modul können Sie einzelne Körper skalieren, drehen oder verschieben. Es hat auch Funktionen, mit denen Sie die Geschwindigkeit, Dichte oder Trägheit verschiedener Körper bestimmen können. Aufgrund der zahlreichen Funktionen werden im dritten Lernprogramm dieser Serie nur die im Body-Modul verfügbaren Methoden und Eigenschaften beschrieben.Körper Dieses Modul enthält verschiedene Methoden, mit denen Sie Verbundkörper mit gängigen Konfigurationen erstellen können. Sie können zum Beispiel einen Stapel oder eine Pyramide aus rechteckigen Boxen mit einer einzigen Methode mit Hilfe von erstellen Verbundwerkstoffe Modul.Zusammengesetzt Das Modul verfügt über Methoden und Eigenschaften, mit denen Sie Verbundkörper erstellen und bearbeiten können. Sie können mehr über das lesen Zusammengesetzt und Verbundwerkstoffe Module im vierten Tutorial der Serie.Dieses Tutorial sollte Sie in die Matter.js-Bibliothek einführen. Vor diesem Hintergrund habe ich einen schnellen Überblick über die Funktionen und die Installation der Bibliothek gegeben. Das grundlegende Beispiel mit zwei Kreisen und einem Kästchen zeigt, wie einfach es ist, mit der Bibliothek einfache Simulationen zu erstellen.
Da Matter.js viele Module enthält, von denen jedes der Engine seine eigenen einzigartigen Methoden hinzufügt, habe ich eine kurze Zusammenfassung einiger allgemeiner Module geschrieben. Der Rest der Serie konzentriert sich darauf, Sie näher mit diesen allgemeinen Modulen vertraut zu machen.
