Erste Schritte mit Matter.js: Einführung

matter.js ist eine in JavaScript geschriebene 2D -Motorhilfemotor. Diese Bibliothek kann Ihnen helfen, die 2D -Physik in Ihrem Browser problemlos zu simulieren. Es bietet viele Merkmale, wie die Möglichkeit, starre Körper zu erstellen und physikalische Eigenschaften wie Masse, Fläche oder Dichte zuzuweisen. Sie können auch verschiedene Arten von Kollisionen und Kräften simulieren, wie z. B. die Schwerkraft Reibung.

matter.js unterstützt alle Mainstream -Browser. Darüber hinaus ist es für mobile Geräte geeignet, da es Berührungen erkennt und reagiert. Alle diese Funktionen machen es Ihre Zeit wert, zu lernen, wie man die Engine benutzt. In diesem Tutorial werde ich die Grundlagen dieser Bibliothek, einschließlich ihrer Installation und Nutzung, behandeln und ein Runnable -Beispiel geben.

Installation

Sie können Matter.js mit dem folgenden Befehl mit einem Paketmanager wie NPM installieren:

npm install matter-js

Sie können auch Links zur Bibliothek von der CDN erhalten und sie direkt in Ihr Projekt wie folgt einbeziehen:

<!-- CDN链接 -->

matter.js veröffentlichen häufig Aktualisierungen, für die möglicherweise einige geringfügige Änderungen an Ihrem Code erforderlich sind, damit es ordnungsgemäß funktioniert. Die Beispiele in diesem Tutorial basieren auf Version 0.18.0.

Ein grundlegendes Beispiel

Der beste Weg, Materie zu lernen.js, besteht darin, einen tatsächlichen Code zu betrachten und zu verstehen, wie er funktioniert. In diesem Abschnitt erstellen wir einige Objekte und stellen die erforderliche Codezeile für Zeile vor.

const Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;

const iEngine = Engine.create();
const iRunner = Runner.create();

const iRender = Render.create({
  element: document.body,
  engine: iEngine,
  options: {
    width: 800,
    height: 400,
    wireframes: false,
    background: "white"
  }
});

const boxA = Bodies.rectangle(400, 200, 80, 80);
const ballA = Bodies.circle(380, 100, 40, 10);
const ballB = Bodies.circle(460, 10, 40, 10);
const ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });

Composite.add(iEngine.world, [boxA, ballA, ballB, ground]);

Render.run(iRender);

Runner.run(iRunner, iEngine);

Wir erstellen zunächst Aliase für alle Materie.js -Module, die möglicherweise im Projekt benötigt werden.

Matter.Runner -Modul können Sie auf die Spielschleife zugreifen, um kontinuierliche Updates für die Engine und Ihre Welt zu erhalten.

matter.comPosite -Modul ermöglicht es Ihnen, Sammlungen, Einschränkungen oder andere zusammengesetzte Objekte von Objekten zu erstellen. Ein Komplex kann ein einzelnes Objekt oder eine ganze Simulation enthalten.

Die nächste Zeile verwendet die Matter.Engine -Methode des create([settings]) -Moduls, um eine neue Engine zu erstellen. Ebenso haben wir auch einen neuen Läufer und einen neuen Renderer erstellt. Der Parameter settings in der obigen Methode ist tatsächlich ein Schlüsselwert-Paarobjekt, das die Standardwerte bestimmter Eigenschaften überschreibt, die sich auf die Motor beziehen. Für unser Beispiel haben wir alles als Standard verlassen.

Sie können beispielsweise den globalen Zeitskalierungsfaktor für alle Objekte der Welt kontrollieren. Wenn Sie einen Wert von weniger als 1 festlegen, wird die Welt in Zeitlupe interagieren. In ähnlicher Weise machen Werte, die größer als 1 sind, die Welt schnell. Sie erfahren im nächsten Tutorial in dieser Serie mehr über das Matter.Engine -Modul.

Nach

verwenden wir die Matter.Render -Methode des create([settings]) -Moduls, um einen neuen Renderer zu erstellen. Wie das Motormodul ist der Parameter der Einstellungen in der obigen Methode ein Objekt zum Angeben verschiedener Optionen für den Parameter. Sie können die element -Staste verwenden, um die Elemente anzugeben, die die Bibliothek in die Leinwand einfügen soll. In ähnlicher Weise können Sie auch die canvas -Staste verwenden, um die Canvas -Elemente anzugeben, die die Materie.JS -Welt wiederholen sollten.

Es gibt eine engine -Staste, mit der Sie den Motor angeben können, den Sie für die Rendering -Welt bewerben. Es gibt auch einen options -Staste, der ein Objekt tatsächlich als Wert akzeptiert. Sie können diesen Schlüssel verwenden, um Werte für verschiedene Parameter festzulegen, z. B. width oder height der Leinwand. Sie können den Drahtmodell auch ein- oder ausschalten, indem Sie den Wert der wireframe -Taste auf true bzw. false einstellen. Wir machen auch die Canvas -Farbe in unserer Welt weiß, indem wir den Wert des Hintergrunds auf Weiß setzen.

Die nächsten paar Zeilen erzeugen verschiedene Objekte, die in unserer Welt interagieren. Diese Objekte werden in Materie.js erstellt, indem das Modul Matter.Bodies verwendet wird. In diesem Beispiel verwenden wir nur die Methoden circle() und rectangle(), um zwei Kreise und ein Rechteck zu erstellen. Andere Methoden können auch verwendet werden, um verschiedene Polygone zu erstellen.

Nach dem Erstellen von Objekten müssen wir sie mit der

-Methode im Matter.Composite -Modul der Welt unserer Wahl hinzufügen. Nachdem wir die erforderliche Objekte zu unserer Welt hinzugefügt haben, müssen wir nur den Läufer und den Renderer mit der add() -Methode in unseren jeweiligen Modulen ausführen. Dies ist im Grunde der gesamte Code, den Sie in der Welt erstellen und in der Materie erstellen müssen. run()

Der Code am Anfang dieses Abschnitts erstellt die folgenden Ergebnisse.

gemeinsame Materie.js Module

Es gibt mehr als 20 verschiedene Module in Materie.js. Alle diese Module bieten unterschiedliche Methoden und Eigenschaften, die zum Erstellen verschiedener Arten von Simulationen nützlich sind und es Ihnen ermöglichen, mit ihnen zu interagieren. Einige dieser Module kümmern sich um Kollisionen, während andere mit dem Rendering und der Simulation umgehen.

Die Beispiele im vorherigen Abschnitt verwenden vier verschiedene Module, um Rendering, Simulation und Objekterstellung zu verarbeiten. In diesem Abschnitt erfahren Sie die Rolle einiger häufig verwendeter Module in Materie.js.

• Motor : Sie benötigen eine Engine, um die Simulation der Materie.js World zu aktualisieren. Das Engine -Modul bietet verschiedene Methoden und Eigenschaften, mit denen Sie das Verhalten verschiedener Motoren steuern können.
• Render : Ein Renderer muss ein tatsächliches Objekt erstellen, das der Benutzer in der Simulation sehen kann. Sie können es verwenden, um grundlegende Spiele zu entwickeln, die Elfen und mehr unterstützen.
• Runner : Objekte in jeder Welt, die Sie simulieren, werden ständig miteinander interagieren. Das Läufermodul behandelt diese kontinuierlichen Updates für den Motor und die Welt.
• Körper : Bodies Modul enthält verschiedene Methoden, mit denen Sie starre Körper mit gemeinsamen Formen wie Kreisen, Rechtecken oder Trapezern erstellen können.
• Körper : Dieses Modul bietet Ihnen unterschiedliche Methoden und Eigenschaften zum Erstellen und Manipulieren starre Körper, die Sie mit Funktionen im Bodies -Modul erstellen. Mit diesem Modul können Sie ein einzelnes Objekt skalieren, drehen oder übersetzen. Es verfügt auch über Funktionen, mit denen Sie die Geschwindigkeit, Dichte oder Trägheit verschiedener Objekte angeben können. Da es viele Funktionen gibt, werden im dritten Tutorial in dieser Serie nur die im Modul Body verfügbaren Methoden und Eigenschaften erörtert.
• Verbundwerkstoffe : Ähnlich wie beim Bodies -Modul enthält dieses Modul verschiedene Methoden, mit denen Sie zusammengesetzte Objekte mit gemeinsamen Konfigurationen erstellen können. Sie können beispielsweise einen Stapel oder eine Pyramide rechteckiger Boxen unter Verwendung einer einzelnen Methode im Composites -Modul erstellen.
• Composite : Composite Modul verfügt über verschiedene Methoden und Eigenschaften, mit denen Sie zusammengesetzte Objekte erstellen und manipulieren können. Sie können mehr über die Module Composite und Composites im vierten Tutorial dieser Serie lesen.
• Einschränkung : Mit diesem Modul können Sie Einschränkungen erstellen und manipulieren. Sie können Einschränkungen verwenden, um sicherzustellen, dass zwei Objekte oder ein fester Weltraumpunkt und ein Objekt in festem Abstand gehalten werden. Dies ähnelt der Verbindung von zwei Objekten durch Verstärkung. Sie können die Steifheit dieser Einschränkungen ändern, damit die Stange eher wie eine Feder ähnelt. Matter.js verwendet Einschränkungen bei der Erstellung von Newtonian -Pendel oder Kettenkomplexen.
• MouseConstraint : Dieses Modul bietet Ihnen verschiedene Methoden und Eigenschaften, mit denen Sie Mausbeschränkungen erstellen und manipulieren können. Dies ist nützlich, wenn Sie möchten, dass verschiedene Objekte in der Welt mit dem Benutzer interagieren.

Der letzte Gedanke

Dieses Tutorial soll Sie in die Matter.js -Bibliothek vorstellen. Vor diesem Hintergrund habe ich einen kurzen Überblick über die Funktionalität und Installation der Bibliothek gegeben. Das grundlegende Beispiel mit zwei Kreisen und einem Quadrat zeigt, wie einfach es ist, eine einfache Simulation mit der Bibliothek zu erstellen.

Da Materie.js viele Module hat, die jeweils einen eigenen Ansatz für den Motor hinzufügen, habe ich bereits eine kurze Zusammenfassung einiger gängiger Module gemacht. Der Rest dieser Serie wird sich darauf konzentrieren, diese häufig verwendeten Module ausführlicher zu erklären.

Dieser Beitrag wurde mit Beiträgen von Monty Shokeen aktualisiert. Monty ist ein vollständiger Stack -Entwickler, der es auch liebt, Tutorials zu schreiben und neue JavaScript -Bibliotheken zu lernen.

Das obige ist der detaillierte Inhalt vonErste Schritte mit Matter.js: Einführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!