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!