PlayCanvas ist eine visuelle Plattform für die Entwicklung interaktiver Webanwendungen. Alles, was mit PlayCanvas entwickelt wird, basiert auf den Funktionen von HTML5. PlayCanvas ist eine Webanwendung, dh Sie müssen keine speziellen Programme installieren und können von jedem Gerät auf der ganzen Welt über das Internet auf Ihr Projekt zugreifen. Alle von Ihnen erstellten Projekte können mit nur einem Klick im Netzwerk platziert werden.
Workflow in PlayCanvas
Alles in PlayCanvas beginnt mit einem visuellen Editor.
Auf der linken Seite des Bildschirms befindet sich ein Abschnitt der Entitätshierarchie. Sie können sowohl leere als auch vordefinierte Objekte erstellen, z. B. Kameras, Lichter, Grundelemente, Audio, Schnittstellen, Partikelsysteme oder Modelle. Jede der Hierarchie hinzugefügte Entität betritt automatisch die Szene.
In der Mitte des Bildschirms befindet sich der Szeneneditor. Hier können Sie die Anordnung von Entitäten ändern, sie zum Bearbeiten auswählen und einfach anzeigen, wie Ihre Anwendungsszene aussehen wird.
Am unteren Rand des Szeneneditors befindet sich der Asset-Bereich. Assets sind alle Dateien und andere Elemente, die Ihren Entitäten hinzugefügt werden können. In PlayCanvas gibt es verschiedene Arten von Assets: Ordner, CSS, Cubemap, HTML, JSON, Material, Skript, Shader und Text. Alle von ihnen haben unterschiedliche Zwecke.
Und schließlich befindet sich auf der rechten Seite des Bildschirms ein Abschnitt der Entitätseigenschaften. Eine Entität verfügt über grundlegende Eigenschaften: Position, Drehung, Skalierung, Name, Tags, Einstellungen der hinzugefügten Komponenten. Die Eigenschaften ändern sich je nachdem, welche Entität hinzugefügt wird. Wenn wir beispielsweise einen Würfel hinzufügen, hat dieser die folgenden Eigenschaften: Typ, Material, Schatteneinstellungen, Ebenen und Gruppen.
Der allgemeine Prozess zum Entwickeln von Anwendungen und Spielen in PlayCanvas sieht ungefähr wie folgt aus:
- Wir fügen die notwendigen Vermögenswerte hinzu. Zum Beispiel: Modelle, Materialien, Audio, Video.
- Wir schaffen die Umgebung unserer Szene. Zum Beispiel: Stadt, Haus, Landschaft.
- Fügen Sie interaktive Elemente hinzu. Zum Beispiel: ein Spieler und seine Feinde.
- Fügen Sie Anwendungslogik mithilfe von Skripten hinzu.
- Veröffentlichen Sie ein Spiel oder eine Anwendung online.
PlayCanvas und JavaScript
Um unserem Spiel oder unserer Anwendung in PlayCanvas Logik hinzuzufügen, gibt es eine spezielle Komponente: ein Skript. Skripte können global sein. In diesem Fall müssen sie der Stammentität der Szenenhierarchie hinzugefügt werden. Lokale Skripte werden direkt zur Entität innerhalb der Hierarchie hinzugefügt (z. B. zum Modell des Spielcharakters). Alle Skripte müssen seitdem in JavaScript geschrieben sein Schließlich schreiben wir Spiele im Browser. ES6-Liebhaber werden leider enttäuscht sein, weil PlayCanvas verwendet immer noch ES5, und wenn Sie versuchen, ein Design aus ES6 zu schreiben, beginnt der eingebaute Linter zu schwören. Im Allgemeinen entspricht die Anatomie des Skripts der folgenden Vorlage:
var NewScript = pc.createScript('newScript'); NewScript.attributes.add('someString', { type: 'string', default: 'any', title: 'Some string' }); NewScript.prototype.initialize = function() { this.startPosition = this.entity.getPosition(); }; NewScript.prototype.update = function(dt) { this.entity.setLocalPosition(this.newPosition); }; NewScript.prototype.calcaulateNewPosition = function() { this.newPosition = this.startPosition.dot(pc.Vec3.ZERO) };
Hier erstellen wir ein neues Skript. Er erhält zwei Hauptmethoden: initialize - wird aufgerufen, wenn die Entität zur Szene hinzugefügt wird. Update - Jeder Render-Frame wird aufgerufen. Der Parameter dt in update ist die Deltazeit -% der Sekunde, für die der letzte Frame gezeichnet wurde. Dies wird durch das folgende Beispiel gut veranschaulicht: Sie müssen ein Objekt in einer Sekunde um 360 Grad drehen. Wir schreiben den folgenden Code:
this.entity.rotate(0, 360 * dt, 0);
Schließlich ist die letzte
calcaulateNewPosition- Methode eine benutzerdefinierte Methode und kann zum Strukturieren von Code verwendet werden.
Auch im Code gibt es die Möglichkeit, ein neues Attribut
someString hinzuzufügen . Mit diesem Design können Sie Parameter definieren, die über die Editoroberfläche weiter spezifiziert werden können. Um der ausgewählten Entität ein Skript hinzuzufügen, klicken Sie auf die Schaltfläche
"Analysieren" . Wenn das Skript eine Konstruktion mit Attributen hatte, wird ein spezielles Feld angezeigt, um den Wert auszufüllen. Dieser Wert überschreibt den Standardwert. PlayCanvas unterstützt viele verschiedene Arten von Attributen für ein Skript. Mehr dazu lesen Sie
hier .
Skripte können sowohl im integrierten Editor als auch auf Ihrem lokalen Computer in einer für Sie geeigneten IDE bearbeitet werden. Im zweiten Fall müssen Sie jedoch mit den Einstellungen herumspielen, da Sie den mit PlayCanvas gekoppelten Server erhöhen müssen.
Nun, da wir die Hauptfunktionen von PlayCanvas behandelt haben, können wir darüber sprechen, wie Virtual-Reality-Szenen in PlayCanvas erstellt werden.
VR aus der Box
Mit PlayCanvas können Sie sofort eine VR-Szene erstellen. Wählen Sie dazu beim Erstellen eines neuen Projekts die entsprechende Option (VR Starter Kit). Mal sehen, was uns die Standard-PlayCanvas bieten (Spoiler: nicht so viele, wie wir möchten).
Wenn Sie die Szene laufen lassen, sehen Sie drei Würfel vor sich. Wenn Sie sie betrachten (Blicksteuerung), wird ein Fortschrittsbalken gestartet, der den Würfel transparent macht. Keine Controller oder WASD-Steuerungen für PC. Im Wesentlichen können Sie mit dieser Verwaltung eine kleine Anwendung für Kartons erstellen, da dort standardmäßig Berührungsereignisse unterstützt werden.
Der Code unseres Starter-VR-Kits ist in der Tat nicht sehr gut strukturiert und einige seiner Teile sind direkt mit der Logik dieser Szene verbunden. Das heißt, um etwas anderes zu tun, müssen Sie herausfinden, wie alles funktioniert, und sich an Ihre Bedürfnisse anpassen. Es gibt keine API, mit der Sie Funktionen separat verbinden können.
Lassen Sie uns nun versuchen, die Starter-Kit-Dateien durchzugehen, um herauszufinden, wofür verantwortlich ist und wie Sie es für Ihre eigenen Zwecke verwenden können.
- look-camera.js . Hier ist die Logik, die für das Koppeln von VR-Display und Kamera verantwortlich ist. Darüber hinaus können wir mit mouse-controller.js oder touch-controller.js Tonhöhe und Gieren übertragen, um die Kamera von einem PC oder Mobiltelefon aus zu steuern.
- selector-camera.js . Diese Datei verfügt über eine versteckte Logik zum Implementieren der Blicksteuerung. Jedes Element, das für die Interaktion verfügbar ist, muss über die Auswahlkamera hinzugefügt werden: Ereignis hinzufügen. Außerdem muss der AABB manuell berechnet werden. Auch hier finden Sie die Strahlenlogik (ray \ raycaster). PlayCanvas hat ein spezielles Objekt this._ray = new pc.Ray (); die weiß, wie man Schnittpunkte mit BoundingBox oder BoundingSphere findet .
- web-vr-ui.js . Fügt einfach eine VR-Anmeldeschnittstelle hinzu. Ehrlich gesagt ist das nicht sehr elegant. Alle Stile und HTML befinden sich direkt in diesem Skript. Anscheinend liegt dies daran, dass der 2D-Bildschirm für Schnittstellen seine eigenen Einschränkungen hat und sich die Schaltfläche ausschließlich in der unteren rechten Ecke befinden sollte.
- box.js. Hier finden Sie die gesamte Logik, die mit der Cube-Verwaltung des Fortschrittsbalkens usw. verbunden ist.
Wie Sie oben sehen können, gibt es im VR-Startkit nicht viel, worauf Sie sich verlassen können. Alles, was getan werden kann, ist eine Pappanwendung, und dies ist meiner Meinung nach nicht sehr interessant, da Pappen eine Art Spielzeug sind, das keine Vorstellung von der normalen Erfahrung mit VR vermittelt. Mit Oculus Go, Oculus Rift oder HTC Vive können Sie wirklich in die virtuelle Realität eintauchen.
Lassen Sie uns nun darüber sprechen, wie wir unserer Anwendung Controller-Unterstützung hinzufügen können.
VR-Controller
Es wäre schön, wenn PlayCanvas seinen
Speicher so anpassen würde, dass verschiedene Elemente, die mit der erforderlichen Logik verbunden sind, mit einer Taste mit der Anwendung verbunden werden könnten. Aber heute ist dies nicht möglich. Versuchen wir es also anders. Um nicht die gesamte Logik zum Vergleichen der Position der Steuerungen zu schreiben, können wir vorhandene Lösungen verwenden. Es gibt ein großartiges Beispiel für ein
Web VR Lab . Es gibt viele interessante Dinge, aber der Code ... der Teufel selbst wird sich das Bein brechen. Es gibt auch eine kleine
VR Tracked Controller- Szene - nur eine einfache Szene mit zwei Controllern. Hier ist es genauso und eignet sich zum Ausleihen von Elementen in Ihr Projekt.
Öffnen Sie die VR Tracked Controller-Szene zur Bearbeitung. Zuerst müssen wir den Controller übertragen:
- Wir wählen den Controller aus, im Abschnitt Eigenschaften finden wir das Modell, klicken darauf und greifen als Asset darauf zu.
- In den Einstellungen befindet sich eine Schaltfläche zum Herunterladen, auf die wir klicken und das Modell und die Texturen herunterladen.
- Entpacken Sie die Assets und laden Sie sie in Ihre Anwendung. Ziehen Sie sie dazu einfach in das Asset-Fenster, das sich unten befindet. Sie müssen alles übertragen: ein Modell im JSON-Format und alle Texturen.
- Das Modell wird in unserer Liste der Assets angezeigt. Ziehen Sie es auf die Bühne. Und hier ist sie schon da. Nennen wir es Left Controller.
Jetzt müssen wir das Material hinzufügen:
- Erstellen Sie ein neues Material, indem Sie im Asset-Bereich auf die Schaltfläche „+“ klicken. Nennen Sie das Material Controller Material.
- Jetzt müssen wir das Quellprojekt öffnen und dort das Tracked-Controller-Material finden und alle Einstellungen in unser Material kopieren, einschließlich normaler, emittierender, spiegelnder und diffuser Karten (Karten).
Jetzt können Sie den Controller mit der speziellen Schaltfläche Duplizieren im Hierarchiefenster kopieren und den zweiten Controller als richtigen Controller bezeichnen.
Das war's, die Controller auf unserer Bühne. Bisher sind dies jedoch nur zwei Modelle. Damit alles funktioniert, müssen die Skripte übertragen werden. Lassen Sie uns genauer sehen, was dort benötigt wird und wie es funktioniert:
- vr-gamepad-manager.js - enthält im Wesentlichen die gesamte Logik, die Ihre Controller benötigen , um die Position und Drehung des realen Controllers zu ermitteln. Hier wird die Fake-Elbow-Logik für 3-Dof-Helme wie Oculus Go, Gear VR oder Daydream implementiert. _updatePadToHandMappings ist hier dafür verantwortlich, Controller zu lokalisieren und sie unseren Controllern zuzuordnen. Die gesamte Logik zum Abgleichen des realen und des virtuellen Controllers befindet sich in der Funktion _poseToWorld. Tatsächlich werden hier die Daten von der WebXR-API über die Instanz des Controllers selbst übernommen - padPose.position, padPose.poseRotation. Die folgende Logik ist für die Nuancen verantwortlich, die mit verschiedenen Gerätetypen verbunden sind. Das Skript selbst muss global sein (d. H. Zum Stamm der Hierarchie hinzugefügt werden).
- input-vr.js - ist verantwortlich für die Registrierung unserer Controller und die Arbeit mit Tasten. Tatsächlich bestimmt es einfach den Tastendruck und sendet die Nummer des gedrückten Knopfes. Dies ist nicht sehr praktisch, da verschiedene Geräte möglicherweise unterschiedliche Tasten und eine GamePad-API haben und es keine Tatsache ist, dass die erste Taste in Oculus Go ein Auslöser für den HTC Vive-Controller ist. Daher müssen Sie manuell graben. Dieses Skript muss mit dem Controller-Element verbunden sein.
Wenn alles richtig gemacht ist, können Sie in die virtuelle Realität eintreten und Ihre Controller winken lassen. Nicht schlecht, obwohl der Prozess der Integration der erforderlichen Funktionalität ziemlich unpraktisch und langwierig ist.
Insgesamt
PlayCanvas ist eine hervorragende Engine, mit der Sie WebGL-Spiele oder -Anwendungen erstellen können. Aber ich muss zugeben, dass es für WebVR schlecht angepasst ist. Es scheint, dass das Ziel darin bestand, zu demonstrieren, was PlayCanvas tun kann, um das öffentliche Interesse zu fördern. Aber diese Richtung hat offenbar keine Entwicklung erhalten. Daher können Sie ein VR-Spiel oder eine VR-Anwendung erstellen, müssen jedoch viel kopieren und den komplizierten Code verstehen, der nur zur Demonstration erstellt wurde (Web VR Lab).
Im nächsten Artikel möchte ich eine kleine Lektion zum Erstellen einer Teleport-Steuerung durchführen, damit wir zumindest ein kleines Set haben, mit dem Sie ein Web-VR-Spiel oder eine Web-VR-Anwendung starten können. Vielen Dank für Ihre Aufmerksamkeit!