Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. 3D
Gamedevelopment

Erstellen Sie einen Weltraum-Shooter mit PlayCanvas: Teil 2

by
Length:LongLanguages:
This post is part of a series called Create a Space Shooter with PlayCanvas.
Create a Space Shooter With PlayCanvas: Part 1

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Dies ist der zweite Teil unserer Suche nach einem 3D-Weltraum-Shooter. Im ersten Teil haben wir uns angesehen, wie man ein grundlegendes PlayCanvas-Spiel mit Physik und Kollision, eigenen Modellen und einer Kamera aufbaut.

Als Referenz hier noch einmal eine Live-Demo unseres Endergebnisses.

In diesem Teil konzentrieren wir uns auf das dynamische Erstellen von Objekten mit Skripts (zum Erzeugen von Aufzählungszeichen und Asteroiden) sowie auf das Hinzufügen von Elementen wie einem FPS-Zähler und In-Game-Text.  Wenn Sie den vorherigen Teil bereits befolgt haben und mit dem, was Sie getan haben, zufrieden sind, können Sie mit dem Aufbau beginnen und den folgenden Abschnitt zum Mindest-Setup überspringen. Andernfalls, wenn Sie von Grund auf neu starten müssen:

Minimales Setup

  1. Starten Sie ein neues Projekt.
  2. Löschen Sie alle Objekte in der Szene mit Ausnahme von Kamera, Box und Licht.
  3. Setzen Sie das Licht und die Kamera in das Rahmenobjekt in der Hierarchie.
  4. Platzieren Sie die Kamera in Position (0,1.5,2) und drehen (-20,0,0).
  5. Stellen Sie sicher, dass sich das Lichtobjekt in einer Position befindet, die gut aussieht (ich lege es auf die Box).
  6. Befestigen Sie eine starre Karosseriekomponente an der Box. Setzen Sie den Typ auf dynamisch. Stellen Sie die Dämpfung auf 0,95 (sowohl linear als auch winklig).
  7. Bringen Sie eine Kollisionskomponente an der Box an.
  8. Stellen Sie die Schwerkraft auf 0 (aus den Szeneneinstellungen).
  9. Platzieren Sie eine Kugel bei (0,0,0), um diese Position im Raum zu markieren.
  10. Erstellen Sie dieses Skript und hängen Sie es an die Box, und nennen Sie es Fly.js:

Testen Sie, dass alles funktioniert hat. Sie sollten in der Lage sein, mit Z zu fliegen und Pfeiltasten zu drehen!

8. Laichen von Asteroiden

Das dynamische Erstellen von Objekten ist für fast jede Art von Spiel von entscheidender Bedeutung. In der von mir erstellten Demo bringe ich zwei Arten von Asteroiden hervor. Die erste Art schwebt einfach herum und fungiert als passives Hindernis.  Sie spawnen, wenn sie zu weit weg sind, um ein konstant dichtes Asteroidenfeld um den Spieler zu erzeugen. Die zweite Art spawn von weiter weg und bewegt sich in Richtung des Spielers (um ein Gefahrengefühl zu erzeugen, auch wenn sich der Spieler nicht bewegt).

Wir brauchen drei Dinge, um unsere Asteroiden hervorzubringen:

  1. Ein AsteroidModel-Objekt, aus dem alle anderen Asteroiden geklont werden sollen.
  2. Ein AsteroidSpawner-Skript, das an das Stammobjekt angehängt ist und als unser Werk / Kloner fungiert.
  3. Ein Asteroid-Skript zur Definition des Verhaltens jedes Asteroiden.

Erstellen eines Asteroidenmodells

Erstellen Sie eine neue Entität aus einem Modell Ihrer Wahl. Dies könnte etwas aus dem PlayCanvas-Store oder etwas von BlendSwap oder nur eine grundlegende Form sein.  (Wenn Sie Ihre eigenen Modelle verwenden, sollten Sie sie zuerst in Blender öffnen, um die Anzahl der verwendeten Gesichter zu prüfen und gegebenenfalls zu optimieren.)

Vergeben Sie eine geeignete Kollisionsform und eine starre Körperkomponente (stellen Sie sicher, dass sie dynamisch ist). Wenn Sie damit zufrieden sind, deaktivieren Sie das Kontrollkästchen Aktiviert:

Where to toggle the Enabled property

Wenn Sie ein Objekt wie dieses deaktivieren, entspricht es dem Player aus der Welt zu entfernen. Dies ist nützlich, um Objekte vorübergehend zu entfernen oder in unserem Fall, um ein Objekt mit all seinen Eigenschaften beizubehalten, es aber nicht im Spiel erscheinen zu lassen.

Erstellen des Asteroid Spawner-Skripts

Erstellen Sie ein neues Skript namens AsteroidSpawner.js und hängen Sie es an das Stammobjekt in der Hierarchie an. (Beachten Sie, dass der Stamm nur ein normales Objekt ist, an das beliebige Komponenten angehängt werden können, genau wie die Kamera.)

Öffnen Sie nun das soeben erstellte Skript.

Die allgemeine Art, eine Entität zu klonen und sie per Skript der Welt hinzuzufügen, sieht folgendermaßen aus:

So würden Sie ein Objekt klonen, wenn Sie bereits ein "oldEntity" -Objekt hätten. Damit bleibt eine Frage unbeantwortet: Wie greifen wir auf das von uns erstellte AsteroidModel zu?

Dafür gibt es zwei Möglichkeiten. Die flexiblere Methode besteht darin, ein Skriptattribut zu erstellen, das die zu klonende Entität enthält, sodass Sie Modelle problemlos austauschen können, ohne das Skript zu berühren. (Genau so haben wir das Kamera-LookAt-Skript in Schritt 7 durchgeführt.)

Die andere Möglichkeit ist, die Funktion findByName zu verwenden. Sie können diese Methode für jede Entität aufrufen, um untergeordnete Objekte zu finden. So können wir es auf dem Wurzelobjekt aufrufen:

Und so wird unser Code von oben vervollständigt. Das vollständige AsteroidSpawner-Skript sieht jetzt so aus:

Testen Sie, ob dies funktioniert hat, indem Sie starten und prüfen, ob Ihr Asteroidenmodell vorhanden ist.

Hinweis: Ich habe newEntity.rigidbody.teleport anstelle von newEntity.setPosition verwendet. Wenn eine Entität einen starren Körper hat, überschreibt der starre Körper die Position und Rotation der Entität. Denken Sie also daran, diese Eigenschaften auf den starren Körper und nicht auf die Entität selbst zu setzen.

Bevor Sie fortfahren, versuchen Sie, zehn oder mehr Asteroiden rund um den Spieler zu erzeugen, entweder zufällig oder auf systematische Weise (vielleicht sogar im Kreis?). Es würde helfen, Ihren gesamten Laichcode in eine Funktion zu integrieren, so dass er ungefähr so aussieht:

Erstellen des Asteroid-Skripts

Sie sollten sich jetzt wohl mit dem Hinzufügen neuer Skripts vertraut machen. Erstellen Sie ein neues Skript (Asteroid.js) und hängen Sie es an das AsteroidModel an. Da alle unsere erzeugten Asteroiden Klone sind, haben sie alle das gleiche Skript.

Wenn wir viele Asteroiden schaffen, ist es eine gute Idee, sicherzustellen, dass sie zerstört werden, wenn wir sie nicht mehr brauchen oder wenn sie weit genug entfernt sind. Hier ist eine Möglichkeit, dies zu tun:

Debugging-Tipp: Wenn Sie etwas ausdrucken möchten, können Sie die Browserkonsole immer wie eine normale JavaScript-App verwenden. Sie könnten so etwas wie console.log (distance.toString ()) tun; um den Entfernungsvektor auszudrucken, wird er in der Konsole angezeigt.

Bevor Sie fortfahren, überprüfen Sie, ob der Asteroid verschwunden ist, wenn Sie sich von ihm entfernen.

9. Laichen von Kugeln

Laichengeschosse sind in etwa die gleiche Idee wie das Laichen von Asteroiden, mit einem neuen Konzept: Wir möchten erkennen, wenn das Geschoss auf etwas trifft, und es entfernen. Um unser Geschosssystem zu erstellen, benötigen wir:

  1. Ein Modell zum Klonen.
  2. Ein Shoot.js-Skript zum Auftauchen von Kugeln, wenn Sie X drücken.
  3. Ein Bullet.js-Skript zum Definieren des Verhaltens der einzelnen Kugeln.

Erstellen eines Aufzählungsmodells

Sie können eine beliebige Form für Ihre Kugel verwenden. Ich habe eine Kapsel verwendet, nur um eine Vorstellung davon zu haben, in welche Richtung die Kugel gerichtet ist.  Erstellen Sie wie zuvor Ihr Element, skalieren Sie es und geben Sie ihm einen dynamischen, steifen Körper und eine geeignete Kollisionsbox. Gib ihm den Namen "Bullet", damit er leicht zu finden ist.

Wenn Sie damit fertig sind, müssen Sie sie unbedingt deaktivieren (mit dem Kontrollkästchen Aktiviert).

Erstellen eines Shoot-Skripts

Erstellen Sie ein neues Skript und hängen Sie es an Ihr Spielerschiff an. Dieses Mal verwenden wir ein Attribut, um einen Verweis auf unsere Aufzählungsentität zu erhalten:

Gehen Sie zurück zum Editor und klicken Sie auf "parse", um das neue Attribut anzuzeigen. Wählen Sie dann das von Ihnen erstellte Aufzählungselement aus.

Nun wollen wir in der Update-Funktion:

  1. Klonen Sie es und fügen Sie es der Welt hinzu.
  2. Wende eine Kraft in die Richtung an, in die der Spieler zeigt.
  3. Legen Sie es vor den Spieler.

Sie wurden bereits in all diese Konzepte eingeführt. Sie haben gesehen, wie man Asteroiden klont, wie man eine Kraft in eine Richtung ausübt, um das Schiff in Bewegung zu setzen, und wie man Dinge positioniert.  Ich lasse die Implementierung dieses Teils als Herausforderung. (Wenn Sie jedoch nicht weiterkommen, können Sie immer sehen, wie ich mein eigenes Shoot.js-Skript in mein Projekt implementiert habe).

Hier einige Tipps, die Ihnen Kopfschmerzen ersparen könnten:

  1. Verwenden Sie keyboard.wasPressed anstelle von keyboard.isPressed. Beim Erkennen, wenn die X-Taste gedrückt wird, um einen Schuss abzufeuern, ist der erstere eine bequeme Möglichkeit, ihn nur dann zu zünden, wenn Sie drücken, statt zu feuern, solange die Taste gedrückt gehalten wird.

  2. Verwenden Sie rotateLocal, anstatt eine absolute Drehung festzulegen. Damit das Geschoss immer parallel zum Schiff erscheint, war es schwierig, die Winkel korrekt zu berechnen.  Eine viel einfachere Methode besteht darin, die Drehung der Kugel einfach auf die Schiffsdrehung einzustellen und dann die Kugel in ihrem lokalen Raum um 90 Grad auf der X-Achse zu drehen.

Erstellen des Bullet-Verhaltens-Skripts

An diesem Punkt sollten Ihre Kugeln laichen, die Asteroiden treffen und einfach in den leeren Raum abprallen. Die Anzahl der Kugeln kann schnell überwältigen, und zu wissen, wie eine Kollision erkannt wird, ist für alle möglichen Dinge nützlich.  (Sie haben beispielsweise festgestellt, dass Sie Objekte erstellen können, die nur eine Kollisionskomponente, aber keinen starren Körper haben. Diese wirken als Auslöser, reagieren jedoch nicht physisch.)

Erstellen Sie ein neues Skript namens Bullet und hängen Sie es an Ihr Bullet-Modell an, das geklont wird. PlayCanvas bietet drei Arten von Kontaktereignissen.  Wir werden auf Kollision warten, die ausgelöst wird, wenn sich die Objekte trennen (sonst würde die Kugel zerstört, bevor der Asteroid eine Chance hat, zu reagieren).

Um ein Kontaktereignis anzuhören, geben Sie Folgendes in Ihre init-Funktion ein:

Und dann den Listener selbst erstellen:

Hier wird der Name relevant, den Sie Ihren Asteroiden gegeben haben, als Sie sie erzeugt haben. Wir möchten, dass die Kugel nur zerstört wird, wenn sie mit einem Asteroiden kollidiert. result ist die Entität, mit der es beendet wurde.

Alternativ können Sie den Scheck entfernen und ihn bei einer Kollision mit irgendetwas zerstören lassen.

Es ist wahr, dass es auf der Welt keine anderen Objekte gibt, mit denen man kollidieren könnte, aber ich hatte schon früh einige Probleme mit dem Spieler, der die Kugelkollision des Geschosses für ein Bild auslöste, und es verschwindet, bevor es starten kann. Wenn Sie kompliziertere Kollisionsanforderungen haben, unterstützt PlayCanvas Kollisionsgruppen und Masken, die jedoch zum Zeitpunkt des Schreibens nicht sehr gut dokumentiert sind.

10. FPS-Meter hinzufügen

An diesem Punkt sind wir im Wesentlichen mit dem Spiel selbst fertig. Natürlich gibt es viele kleine polnische Dinge, die ich zur finalen Demo hinzugefügt habe, aber da gibt es nichts, was Sie mit dem bisher Erlernten nicht machen können.

Ich wollte Ihnen zeigen, wie Sie eine FPS-Anzeige erstellen (obwohl PlayCanvas bereits über einen Profiler verfügt; Sie können den Mauszeiger über den Abspiel-Button bewegen und das Kontrollkästchen aktivieren), da dies ein gutes Beispiel für das Hinzufügen eines DOM-Elements ist, das sich außerhalb der PlayCanvas-Engine befindet.

Wir werden diese glatte FPSMeter-Bibliothek verwenden. Zuerst müssen Sie zur Website der Bibliothek gehen und die reduzierte Produktionsversion herunterladen.

Gehen Sie zurück zu Ihrem PlayCanvas-Editor, erstellen Sie ein neues Skript und kopieren Sie den Code fpsMeter.min.js. Hängen Sie dieses Skript an das Stammobjekt an.

Nachdem die Bibliothek geladen wurde, erstellen Sie ein neues Skript, das die Bibliothek initialisiert und verwendet. Nennen Sie es meter.js, und aus dem Verwendungsbeispiel auf der Website der Bibliothek haben wir:

Fügen Sie auch das Zähler-Skript zum Stammobjekt hinzu und starten Sie es. Sie sollten den FPS-Zähler in der oberen linken Ecke des Bildschirms sehen!

11. Text hinzufügen

Zum Schluss wollen wir noch etwas Text in unsere Welt einfügen. Dieses ist ein wenig involviert, da es verschiedene Möglichkeiten gibt, dies zu tun.  Wenn Sie nur eine statische Benutzeroberfläche hinzufügen möchten, besteht eine Möglichkeit darin, direkt mit dem DOM zu arbeiten, indem Sie Ihre Benutzeroberflächenelemente über das Canvas-Element von PlayCanvas legen. Eine andere Methode ist die Verwendung von SVGs. Dieser Beitrag beschreibt einige dieser unterschiedlichen Möglichkeiten.

Da dies alles Standardmethoden für den Umgang mit Text im Web sind, habe ich mich entschieden, zu prüfen, wie Text erstellt werden soll, der im Raum der Spielwelt vorhanden ist. Stellen Sie sich das als Text vor, der auf ein Zeichen in der Umgebung oder auf ein Objekt im Spiel verweisen würde.

Auf diese Weise erstellen wir ein Material für jeden Text, den wir rendern möchten.  Dann erstellen wir eine unsichtbare Leinwand, auf die wir den Text mithilfe der bekannten Canvas-Methode fillText rendern. Zum Schluss rendern wir die Leinwand auf das Material, damit sie im Spiel erscheint.

Beachten Sie, dass diese Methode für mehr als nur Text verwendet werden kann. Sie können dynamisch Texturen zeichnen oder alles tun, was eine Leinwand tun kann.

Erstellen Sie das Textmaterial

Erstellen Sie ein neues Material und nennen Sie es so etwas wie "TextMaterial". Setzen Sie die diffuse Farbe auf Schwarz, da unser Text weiß ist.

Erstellen Sie ein ebenes Element und hängen Sie dieses Material daran an.

Erstellen Sie das Textskript

Das vollständige text.js-Skript finden Sie in dieser Übersicht:

https://gist.github.com/OmarShehata/e016dc219da36726e65cedb4ab9084bd

Sie können sehen, wie die Textur so eingerichtet wird, dass die Leinwand als Quelle verwendet wird, insbesondere an der Linie: this.texture.setSource(this.canvas);

Erstellen Sie dieses Skript und hängen Sie es an Ihr Flugzeug an. Beachten Sie, wie zwei Attribute erstellt werden: Text und Schriftgröße. Auf diese Weise könnten Sie dasselbe Skript für jedes Textobjekt in Ihrem Spiel verwenden.

Starten Sie die Simulation und Sie sollten den großen Text "Hello World" irgendwo sehen. Wenn Sie es nicht sehen, stellen Sie sicher, dass a) es eine Lichtquelle in der Nähe hat und b) Sie auf die richtige Seite schauen.  Der Text wird nicht gerendert, wenn Sie ihn von hinten betrachten. (Es hilft auch, ein physisches Objekt in der Nähe der Ebene zu platzieren, um es zunächst zu lokalisieren.)

12. Veröffentlichung

Wenn Sie Ihren fantastischen Prototyp zusammengestellt haben, können Sie auf das PlayCanvas-Symbol in der oberen linken Ecke des Bildschirms klicken und "Publishing" auswählen. Hier können Sie neue Builds veröffentlichen, die auf PlayCanvas gehostet werden, und sie mit der ganzen Welt teilen!

Dialog box for publishing on PlayCanvas

Fazit

Das war es für diese Demo. In PlayCanvas gibt es noch viel mehr zu entdecken, aber hoffentlich können Sie sich mit den Grundlagen vertraut machen, um eigene Spiele zu erstellen.  Es ist eine wirklich schöne Maschine, die meiner Meinung nach mehr Leute verwenden sollten. Eine Menge von dem, was damit erstellt wurde, waren eher Tech-Demos als vollständige Spiele, aber es gibt keinen Grund, warum Sie nicht etwas wirklich tolles damit erstellen und veröffentlichen können.

Eine Funktion, über die ich nicht wirklich gesprochen habe, aber offensichtlich gewesen sein könnte, ist, dass der Editor von PlayCanvas Ihnen erlaubt, Ihr Spiel in Echtzeit zu aktualisieren. Dies gilt für das Design, indem Sie Elemente im Editor verschieben können, und sie werden im Startfenster aktualisiert, wenn Sie sie geöffnet haben, sowie für Code, der das Hot-Reloading unterstützt.

Während der Editor wirklich praktisch ist, können Sie alles, was Sie damit machen können, mit reinem Code erledigen.  Wenn Sie PlayCanvas für ein Budget verwenden müssen, ist der Beispieleordner auf GitHub eine gute Referenz. (Ein guter Anfang wäre dieses einfache Beispiel eines sich drehenden Würfels.)

Wenn etwas verwirrend ist, lass es mich bitte in den Kommentaren wissen! Oder nur, wenn Sie etwas Cooles gebaut haben und teilen möchten oder einen einfacheren Weg finden, etwas zu tun, würde ich es gerne sehen!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.