Erstellen eines Spiels mit drei.Js, React und WebGL

Kernpunkte

• React to Driting 3D-Szenen in der Spieleentwicklung hat viele Vorteile, einschließlich klarer Trennung der Szenenwiedergabe von Spiellogik, leicht verständlichen Komponenten, Echtzeit-Nachladen von Spielressourcen und der Möglichkeit, native Browser-Tools zu verwenden, um zu verwenden, um native Browser-Tools zu verwenden 3D -Szenen überprüfen und debuggen als Marker.
• React-Drei-Renderer (R3R) bietet eine deklarative API, die drei.js zusammenfasst, die Entkopplung von Ansichtscode aus der Spiellogik ermöglicht und kleine, leicht verständliche Komponenten erstellt.
• Wenn Game -Engines wachsen, ist es wichtig, den Reduziermodus zu verwenden, um Spiellogik in separate Funktionen zu organisieren. In diesem Modus ermöglicht es, eine saubere und klare Spielschleife zu erstellen und der Spielschleife problemlos mehr Logik hinzuzufügen.
• Überlegungen zur Entwässerung und Leistung sind einzigartig beim Aufbau von Spielen mit drei.Js, React und WebGL. Die Verwendung von Chrome Devtools 'Timeline-Funktionalität ist für die Debugging-Leistung von unschätzbarem Wert, und die Implementierung von Strategien wie die Minimierung der Anzahl der React-Rehverträge kann dazu beitragen, die Leistung zu optimieren.

Ich mache ein Spiel namens "Chameleon Charm". Es wird mit drei.Js, React und WebGL erstellt. Dieser Artikel beschreibt, wie diese Technologien mit React-Drei-Renderer (abgekürzte als R3R) zusammenarbeiten.

Bitte sehen Sie sich die WebGL -Erste -Start -Handbuch und den React- und JSX -Erstenhandbuch für eine Einführung in React und WebGL an. Dieser Artikel und der dazugehörige Code verwenden die ES6 -Syntax.

Der Beginn von allem

Vor einiger Zeit machte Pete Hunt im #Reactjs IRC -Kanal einen Witz und sagte, er würde React verwenden, um ein Spiel zu erstellen:

Ich wette, wir können einen Ego-Shooter mit React machen! Der Feind hat

usw. Ich lächelte. Er lachte auch. Jeder hatte eine tolle Zeit. "Wer in aller Welt würde das tun?", Dachte ich.

Ein paar Jahre später habe ich genau das getan.

Chamäleon Charm ist ein Spiel, das erweiterte Requisiten sammelt, mit denen Sie sich eingrenzen können, um das unendliche fraktale Labyrinth zu lösen. Ich arbeite seit ein paar Jahren als React -Entwickler und ich bin gespannt, ob es eine Möglichkeit gibt, React to Treact drei.js zu verwenden. Zu diesem Zeitpunkt erregte R3R meine Aufmerksamkeit.

Warum React wählen?

Ich weiß, was Sie denken: Warum? Bitte lassen Sie mich erklären. Hier sind einige Gründe, um die Verwendung von React to Drive 3D -Szenen zu verwenden:

• Mit der "deklarativen" Ansicht können Sie die Szene -Renderung von der Spiellogik klar trennen.
• Gestalten Sie leicht zu verständige Komponenten wie <player></player>, <wall></wall>, <level></level> und mehr.
• "Hot" (Echtzeit) Nachladen der Spielressourcen. Ändern Sie Texturen und Modelle und sehen Sie ihre Updates in der Szene in Echtzeit an!
• 3D -Szenen für native Browser -Tools wie Chrome Inspector überprüfen und debuggen.
• Spielressourcen in Abhängigkeitsgraphen mit Webpack verwalten, z <texture require="" src="%7B"></texture>
Lassen Sie uns ein Szenario einrichten, um zu sehen, wie dies alles funktioniert.

reagieren und webgl

Ich habe ein Beispiel -Github -Repository erstellt, um mit diesem Artikel zu arbeiten. Klonen Sie das Repository und führen Sie den Code wie im Readme aus und lernen Sie weiter. Es verfügt über Sitepointy 3D -Roboter als Hauptfigur!

Warnung: R3R befindet sich noch in der Testphase. Seine API ist instabil und kann sich in Zukunft ändern. Derzeit verarbeitet es nur eine Teilmenge von drei.js. Ich fand es vollständig genug, um ein komplettes Spiel zu erstellen, aber Ihre Ergebnisse können variieren.

Organisationsansichtscode

Der Hauptvorteil der Verwendung von React to Drive WebGL besteht darin, dass unser Ansichtscode aus der Spiellogik entkoppelt ist. Dies bedeutet, dass die Entitäten, die wir rendern, kleine und leicht verständliche Komponenten sind.

r3r enthält eine deklarative API, die drei.js verkapselt. Zum Beispiel können wir schreiben:

Jetzt haben wir eine leere 3D -Szene mit einer Kamera. Das Hinzufügen eines Netzes zu einer Szene ist so einfach wie eine

<code><scene>></scene>
  <perspectivecamera>    position={ new THREE.Vector3( 1, 1, 1 )
  />
>
</perspectivecamera></code>

-Komponente und das Anenden von

ist so einfach wie <mesh></mesh>. <geometry></geometry> <material></material>

Hinter den Kulissen erzeugt dies eine Drei.Scene und fügt automatisch ein Gitter mit drei.boxgeometrie hinzu. R3R behandelt die Unterschiede zwischen alten Szenen und Änderungen. Wenn Sie der Szene ein neues Netz hinzufügen, wird das ursprüngliche Netz nicht nachgebaut. Genau wie die Verwendung normaler React und DOM aktualisieren 3D -Szenen nur die Unterschiede.

<code><scene>></scene>
  …
  <mesh>></mesh>
    <boxgeometry></boxgeometry>      width={ 1 }
      height={ 1 }
      depth={ 1 }
    />
    <meshbasicmaterial></meshbasicmaterial>      color={ 0x00ff00 }
    />
>
</code>

Da wir in React arbeiten, können wir die Spieleinheit in die Komponentendatei abnehmen. Die Robot.js -Datei im Beispiel -Repository zeigt, wie man eine wichtige Rolle unter Verwendung von reinem React View -Code darstellt. Es handelt sich um eine Komponente "Staurose Funktion", was bedeutet, dass sie keinen lokalen Zustand speichert:

Jetzt werden wir

<code>const Robot = ({ position, rotation }) => <group></group>  position={ position }
  rotation={ rotation }
>
  <mesh> rotation={ localRotation }></mesh>
    <geometryresource></geometryresource>      resourceId="robotGeometry"
    />
    <materialresource></materialresource>      resourceId="robotTexture"
    />
  >
>;
</code>

in unsere 3D -Szene aufnehmen!

<robot></robot>

Sie können weitere API -Beispiele im R3R Github -Repository oder die vollständigen Beispieleinstellungen im mitgelieferten Projekt anzeigen.

<code><scene>></scene>
  …
  <mesh>></mesh>…>
  <robot></robot>    position={…}
    rotation={…}
  />
>
</code>

Game Logic

organisieren

Die andere Hälfte der Gleichung besteht darin, mit der Spiellogik umzugehen. Fügen wir unserem Roboter -Sitepointy einige einfache Animationen hinzu.

Wie funktioniert die traditionelle Spielschleife? Sie akzeptieren Benutzereingaben, analysieren den alten "Weltstaat" und kehren zum Rendern in den New World State zurück. Lassen Sie uns aus Gründen einer Einfachheit das "Spielstatus" -Objekt im Komponentenzustand speichern. In einem ausgereifteren Projekt können Sie den Spielstatus in den Redux- oder Flussspeicher verschieben.

Wir werden den Browser -API -Rückruf des Browsers verwenden, um unsere Spielschleife zu fahren und die Schleife in requestAnimationFrame auszuführen. Um den Roboter zu animieren, berechnen wir einen neuen Ort basierend auf dem Zeitstempel, der an GameContainer.js übergeben wurde, und speichern Sie dann den neuen Standort im Bundesstaat. requestAnimationFrame

<code><scene>></scene>
  <perspectivecamera>    position={ new THREE.Vector3( 1, 1, 1 )
  />
>
</perspectivecamera></code>

Aufruf

löst den Wiederumrender der untergeordneten Komponente aus und aktualisiert die 3D-Szene. Wir übergeben den Zustand von Containerkomponente an Demo -Komponente: setState() <game></game>

Wir können ein nützliches Muster anwenden, um diesen Code zu organisieren. Die Aktualisierung des Roboterorts ist eine einfache zeitbasierte Berechnung. In Zukunft könnte es auch frühere Roboterorte aus früheren Spielstaaten berücksichtigen. Eine Funktion, die einige Daten akzeptiert, sie verarbeitet und neue Daten zurückgibt, wird häufig als Reduzierer bezeichnet. Wir können den sich bewegenden Code in eine Reduzierfunktion abstrakt!

<code><scene>></scene>
  …
  <mesh>></mesh>
    <boxgeometry></boxgeometry>      width={ 1 }
      height={ 1 }
      depth={ 1 }
    />
    <meshbasicmaterial></meshbasicmaterial>      color={ 0x00ff00 }
    />
>
</code>

Jetzt können wir eine kurze und klare Spielschleife schreiben, die nur Funktionsaufrufe enthält:

Um der Spielschleife mehr Logik hinzuzufügen, z. B. die Handhabung der Physik, erstellen Sie eine andere Reduzierfunktion und geben Sie sie an das Ergebnis des vorherigen Reduzers:

<code>const Robot = ({ position, rotation }) => <group></group>  position={ position }
  rotation={ rotation }
>
  <mesh> rotation={ localRotation }></mesh>
    <geometryresource></geometryresource>      resourceId="robotGeometry"
    />
    <materialresource></materialresource>      resourceId="robotTexture"
    />
  >
>;
</code>

Als Wachstum von Spielemotoren wird es entscheidend, Spiellogik in separate Funktionen zu organisieren. Mit dem Reduziermodus ist diese Organisation sehr einfach.

<code><scene>></scene>
  …
  <mesh>></mesh>…>
  <robot></robot>    position={…}
    rotation={…}
  />
>
</code>

Ressourcenverwaltung

Dies ist immer noch ein Entwicklungsbereich für R3R. Für Texturen können Sie eine URL -Eigenschaft auf dem JSX -Tag angeben. Mit WebPack können Sie nach dem lokalen Bildpfad fragen:

Mit dieser Einstellung wird Ihre 3D -Szene in Echtzeit aktualisiert, wenn Sie das Bild auf der Festplatte ändern! Dies ist von unschätzbarem Wert für schnell iterierendes Spieldesign und Inhalt.

<code>// …
gameLoop( time ) {
  this.setState({
    robotPosition: new THREE.Vector3(
      Math.sin( time * 0.01 ), 0, 0
    )
  });
}
</code>

Für andere Ressourcen (z. B. 3D-Modelle) müssen Sie noch den integrierten Lader (wie JSONLOADER) von drei.js verwenden, um sie zu verarbeiten. Ich habe versucht, einen benutzerdefinierten Webpack -Loader zu verwenden, um 3D -Modelldateien zu laden, hat aber zu viel Arbeit und ohne Nutzen. Es ist einfacher, Modelle als binäre Daten zu betrachten und einen Dateiload zu verwenden, um sie zu laden. Dies kann weiterhin Echtzeitüberladungen von Modelldaten implementieren. Sie können dies im Beispielcode sehen.

debugg

r3r unterstützt React Decess Decess Developer Tool -Extensionen für Chrom und Firefox. Sie können Ihre Szene so überprüfen, wie Sie einen normalen DOM überprüfen würden! Wenn Sie über Elemente im Inspektor schweben, zeigt sie ihre Begrenzungsboxen in der Szene an. Sie können auch über die Texturdefinition schweben, um zu sehen, welche Objekte in der Szene diese Texturen verwenden.

Sie können sich auch dem React-Drei-Renderer-Gitter-Chatraum anschließen, um die Anwendung zu debuggen.

Leistungsvorkehrungen

Beim Aufbau von Chamäleon -Charme habe ich auf einige Leistungsprobleme gestoßen, die in diesem Workflow einzigartig sind.

• Ich benutze WebPack für eine heiße Reload -Zeit von bis zu 30 Sekunden! Dies liegt daran, dass jede Überladung große Ressourcen in das Paket schreiben muss. Die Lösung besteht darin, das DLLPLUGIN von WebPack zu implementieren, wodurch die Nachladezeit auf weniger als 5 Sekunden verkürzt wird.
• Idealerweise sollte Ihre Szene nur einmal pro Rendering aufgerufen werden. Nachdem React selbst mein Spiel analysiert hat, ist er der Hauptgutball. Das Aufrufen von setState() mehrmals pro Rahmen führt zu einer doppelten Renderung und der Abbauleistung. setState()
Nachdem die Leistung von R3R eine bestimmte Anzahl von Objekten überschritten hat, ist die Leistung von R3R schlechter als der gewöhnliche drei.js -Code. Für mich sind es ungefähr 1000 Objekte. Sie können R3R mit drei.Js im "Benchmark" im Beispiel vergleichen.
Die Timeline -Funktionalität von

Chrome Devtools ist ein hervorragendes Instrument für die Debugging -Leistung. Sie können die Spielschleife einfach und intuitiv überprüfen und es ist einfacher zu lesen als das "Profil" -Funktion von Devtools.

Das ist es!

Schauen Sie sich den Chamäleon -Charme an, um zu erfahren, was Sie mit dieser Einstellung tun können. Während diese Toolchain noch jung ist, stellte ich fest, dass die Verwendung von R3Rs React von entscheidender Bedeutung ist, um meinen WebGL -Spielcode klar zu organisieren. Sie können auch die kleine, aber wachsende R3R-Beispielseite überprüfen, um einige gut organisierte Code-Beispiele zu sehen.

Dieser Artikel wurde von Mark Brown und Kev Zettler überprüft. Vielen Dank an alle Peer -Rezensenten bei SitePoint für die Erhöhung der Inhalte von SitePoint -Inhalten!

FAQ zum Erstellen von Spielen mit ReactJs und WebGL

Was sind die Voraussetzungen für den Bau von Spielen mit ReactJs und WebGL?

Um Spiele mit ReactJs und WebGL zu erstellen, benötigen Sie ein grundlegendes Verständnis von JavaScript, HTML und CSS. Sie müssen auch ReactJs kennen (eine beliebte JavaScript -Bibliothek zum Erstellen von Benutzeroberflächen). Darüber hinaus ist es entscheidend, WebGL (Web Graphics Library) zu verstehen, einer JavaScript -API zum Rendern interaktiver 3D- und 2D -Grafiken. Es wird auch von großem Nutzen sein, mit ES6 Syntax, NPM (Node Package Manager) und der Befehlszeile vertraut zu sein.

Wie kann man Einheit in ReactJs integrieren?

Einheit kann mit dem React-Unity-Webgl-Paket in ReactJs integriert werden. Mit diesem Paket können Sie Unity WebGL -Builds in ReactJS -Anwendungen einbetten. Sie können es mit NPM installieren und in Ihr Projekt importieren. Sie können dann die vom Paket bereitgestellte Einheitskomponente verwenden, um Ihr Unity -Spiel in Ihre ReactJS -Anwendung einzubetten.

Was sind die verschiedenen Möglichkeiten, 3D -Anwendungen mit React zu erstellen?

Es gibt verschiedene Möglichkeiten, eine 3D -Anwendung mit React zu erstellen. Eine der beliebtesten Methoden ist die Verwendung von drei.js, einer Cross-Browser-JavaScript-Bibliothek zum Erstellen und Anzeigen animierter 3D-Computergrafiken. Ein weiterer Ansatz ist die direkte Verwendung von WebGL, aber dies kann komplizierter sein. Andere Bibliotheken wie React-Drei-Faser und React-Unity-WebGL können auch zum Erstellen von 3D-Anwendungen mithilfe von React verwendet werden.

Wie erstelle ich interaktive 3D -Grafiken mit WebGL?

Mit

WebGL können Sie interaktive 3D-Grafiken direkt in Ihrem Browser ohne Plug-Ins erstellen. Sie können die API von WebGL verwenden, um komplexe 3D -Grafiken, Animationen und Spiele zu erstellen. Die API von WebGL ist jedoch niedrig und es kann kompliziert sein, direkt zu verwenden. Daher bevorzugen viele Entwickler Bibliotheken wie drei.js, die eine höhere Schnittstelle zu WebGL bieten.

Welche Rolle spielen React-Unity-Webgl in der Spielentwicklung?

Mit

React-Unity-Webgl-Paket können Sie Unity-WebGL-Builds in ReactJS-Anwendungen einbetten. Dies bedeutet, dass Sie komplexe 3D -Spiele mit Einheit erstellen und sie dann einfach in Ihre ReactJS -Anwendung integrieren können. Dies ist besonders nützlich, wenn Sie ein webbasiertes Spiel oder eine interaktive 3D-Anwendung erstellen möchten.

Wie optimieren Sie meine ReactJs und WebGL -Spiele für die Leistung?

Optimierung von Spielen, die mit ReactJs und WebGL erstellt wurden, können mehrere Strategien beinhalten. Zu diesen Strategien gehört die Minimierung der Anzahl der Rerender in React, indem Sie die integrierten Leistungsfunktionen von WebGL wie requestAnimationFrame verwenden, um reibungslose Animationen zu erzielen, und die Optimierung von 3D-Modellen und -texturen für das Web.

Kann ich mobile Spiele mit ReactJs und WebGL erstellen?

Ja, Sie können ReactJs und WebGL verwenden, um Spiele zu erstellen, die in einem Webbrowser auf Ihrem mobilen Gerät ausgeführt werden. Für native mobile Spiele möchten Sie jedoch in Betracht ziehen, Spielentwicklungsplattformen wie Unity oder Unreal Engine zu verwenden, die direkt in iOS und Android exportiert werden können.

Wie verarbeitet man Benutzereingaben in meinen ReactJs und WebGL -Spielen?

Benutzereingaben können in ReactJs und WebGL -Spielen mit Standard -JavaScript -Ereignishandlern verarbeitet werden. Sie können Tastatur-, Maus- und Mausereignisse anhören und dann den Spielstatus entsprechend aktualisieren. ReactJs bietet auch Syntheseereignisse, mit denen Benutzereingaben über verschiedene Browser konsistent verarbeitet werden können.

Kann ich andere JavaScript -Bibliotheken mit ReactJs und WebGL verwenden?

Ja, Sie können andere JavaScript -Bibliotheken mit ReactJs und WebGL verwenden. Beispielsweise können Sie drei.Js für 3D -Grafiken, Howler.js für Audio oder Matter.js für die physische Verarbeitung verwenden. Der Schlüssel ist, sicherzustellen, dass diese Bibliotheken in Ihrem Spiel nahtlos funktionieren.

Wie kann ich meine ReactJs und WebGL -Spiele debuggen?

Spiele, die mit ReactJs und WebGL erstellt wurden, können mit Entwicklertools in einem Webbrowser debuggen werden. Mit diesen Tools können Sie HTML-, CSS- und JavaScript -Code überprüfen, Konsolenprotokolle anzeigen und den Code Schritt für Schritt debuggen. Darüber hinaus ist React Developer Tools eine Browser -Erweiterung, mit der Sie die React -Komponentenhierarchie, Requisiten und den Zustand überprüfen können.

Das obige ist der detaillierte Inhalt vonErstellen eines Spiels mit drei.Js, React und WebGL. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!