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!