So erstellen Sie ein einfaches Unity-Plattformspiel

Das Erstellen von browserbasierten Spielen in Unity WebGL kann sehr lohnend sein - es gibt viele Spieleportal-Websites, die Werbeeinnahmen mit Ihnen teilen oder Ihre Spiele direkt bei Ihnen kaufen. Wenn Sie talentiert sind, können Sie problemlos mehrere tausend Dollar pro Monat an Werbeeinnahmen verdienen. Die Einheit mit WebGL ist eines der besten Tools dafür. Mit WebVR-Plugins können Sie Ihren Spielen auch ganz einfach VR-Unterstützung geben.

Wenn Sie sich also fragen, wie Sie Unity WebGL-Spiele erstellen können, lesen Sie weiter!

Bedarf

• Einheit
• HTML5 / JavaScript-Kenntnisse
• (Optional) Ein guter Texteditor wie NotePad ++

Laden Sie zunächst Unity herunter, installieren Sie es und stellen Sie sicher, dass Sie die WebGL-Unterstützungskomponente installieren.

Wenn Unity zum ersten Mal gestartet wird, nehmen Sie sich eine Minute Zeit, um sich an die Benutzeroberfläche und die Menüs zu gewöhnen, insbesondere an die Hierarchie panel - enthält alle aktuellen Szenenelemente. Es ist im Grunde die Hauptansicht dessen, woran Sie gerade arbeiten, sei es ein Spiellevel oder das Hauptmenü.

Sie haben auch die Spiel Registerkarte (zum Testen des Spiels im Editor) und rechts die Inspektor Panel. Hier können Elemente bearbeitet werden, z. B. Lichter, Schauspieler usw.

Wenn Sie auf klicken Richtungslicht Wenn Sie im Menü 'Hierarchie' auf die Schaltfläche klicken, erhalten Sie eine Reihe von Informationen zu diesem bestimmten Licht, und Sie können die von ihm geworfenen Schatten aktivieren / deaktivieren.

Endlich haben Sie die Projekt Fenster unten, in dem nur die Dateien angezeigt werden, die zum Erstellen Ihres Projekts verwendet werden.

Nachdem Sie sich ein wenig mit der Benutzeroberfläche vertraut gemacht haben, speichern Sie die aktuelle Szene. Gehe zu Datei> Szene speichern Daraufhin wird ein Dialogfeld für einen Ordner 'Assets' geöffnet. Es ist üblich, Dinge bei der Entwicklung von Spielen in Unterordnern zu organisieren. Erstellen Sie daher einen Unterordner mit dem Namen ' Szenen ” und speichern Sie die Szene darin.

Jetzt werden wir etwas wirklich Einfaches erschaffen - eine Art 'Plattformer' -Spiel, bei dem unser Charakter nur um Plattformen herumhüpft. Fallen bedeutet Tod. Wir werden dies in der 3D- / First-Person-Ansicht tun, sodass ein Charakter wirklich nicht modelliert. Tatsächlich verwenden wir nur ein einfaches 'Kugel' -Objekt für unseren Charakter, da es am einfachsten zu erstellen ist.

Also in der Hierarchie Klicken Sie im Bedienfeld auf „Erstellen“ und bearbeiten Sie die folgenden Eigenschaften:

• Position {X: 0, Y: 2,5, Z: 0}
• Maßstab {X: 0,3, Y: 0,3, Z: 0,3}

Wenn Sie die Taste „ abspielen ”Sollte eine einfache Kugel in der Kameraansicht angezeigt werden. Jetzt wollen wir unserem „Charakter“ Schwerkraft und Sprungphysik hinzufügen.

Also in der Inspektor Fügen Sie der Kugel eine Komponente hinzu und wählen Sie Starrer Körper - Wir wollen auch nicht, dass die Kugel es tut drehen Gehen Sie also zu Konstanten> wählen Sie alle Achsen in der Drehung Bereich.

Jetzt müssen wir eine Art Plattform schaffen, damit unser Charakter nicht endlos durch das Spiel fällt. Fügen Sie also einen Würfel hinzu und setzen Sie den Skala Y. Wert zu 0,1 - Wenn Sie die Szene jetzt erneut „spielen“, sollte unser Charakter auf den Würfel „fallen“.

Jetzt werden wir etwas Physik hinzufügen, damit unser Charakter ein wenig 'hüpft', wenn er auf die Würfelplattform trifft. Wir müssen ein neues Physikmaterial erstellen und es auf die Kugel anwenden, damit unser Charakter federnde Eigenschaften hat.

Erstellen Sie einen neuen Unterordner in der Vermögenswerte Verzeichnis und nennen Sie es so etwas wie 'Materialien', und erstellen Sie dann ein neues Physikmaterial. Nennen Sie es 'Bouncy_blob' oder was auch immer Sie wollen.

Jetzt in der Inspektion Fügen Sie dem Sprungmaterial folgende Werte hinzu:

• Dynamische Reibung: 10
• Statische Fiktion: 10
• Bounciness: 1
• Reibungskombinat: Maximum
• Bounce Combine: Maximum

Wir sollten der Plattform unter unserer Kugel auch ein physikalisches Material hinzufügen - dies wird so sein, dass unsere Kugel bei jedem Sprung mit zunehmender Höhe abprallt. Erstellen Sie also ein anderes Material, nennen Sie es 'Platform_bouncing' und geben Sie ihm die folgenden Werte:

• Dynamische Reibung: 0,9
• Statische Fiktion: 0,9
• Bounciness: 1
• Reibungskombinat: Durchschnitt
• Bounce Combine: Multiplizieren

Wenn Sie jetzt die 'Play' -Taste drücken, werden Sie feststellen, dass unser Charakter bei jedem Sprung höher springt.

Um der Plattform Farbe / Textur hinzuzufügen, erstellen Sie ein neues Material, klicken Sie auf die Registerkarte „Albedo“ und geben Sie ihr eine Farbe. Sie können dieses Material per Drag & Drop auf die Plattform ziehen und es ändert seine Farbe.

Für eine Perspektive aus der ersten Person müssen Sie die Kamera nur per Drag & Drop in die Kamera ziehen Hierarchie Panel auf unsere Kugel - dies wird dazu führen, dass die Kamera jederzeit unserem Charakter folgt. Diese Prämisse bleibt für jede Art von Unity-Spiel aus der ersten Person gleich - aber wenn Sie ein Multiplayer-FPS-Spiel wie dieses erstellen Leader Strike Wird etwas fortgeschrittener, da pro Modell mehrere Kameras eingerichtet sind.

In jedem Fall müssen Sie die Kamera wie folgt bearbeiten:

• Position {X: 0, Y: 1, Z: 0}
• Drehung {X: 90, Y: 0, Z: 0}
• Maßstab {X: 2,5, Y: 2,5, Z: 2,5}
• Klare Flaggen: Volltonfarbe
• Hintergrund: # 000
• Sichtfeld: 80.3

Um uns ein Gefühl für die Perspektive der Sprunghöhe zu geben, werden wir einen Scheinwerfer hinzufügen. Passen Sie die Spotlight-Werte an:

• Drehung {X: 90, Y: 0, Z: 0}

Jetzt wollen wir die Steuerung des Spiels so programmieren, dass wir mit unserer Maus die Bewegung des Charakters steuern können. Dafür brauchen wir ein Skript.

In dem Projekte Fügen Sie einen neuen Ordner hinzu und nennen Sie ihn 'Skripte'. Fügen Sie nun ein JavaScript zum hinzu Kamera Nennen Sie es 'InputController' und fügen Sie es dem soeben erstellten Ordner 'Scripts' hinzu. Wenn Sie jetzt auf das Skript doppelklicken, können Sie dessen Eigenschaften bearbeiten.

Wenn Sie das Skript im Standard-Skripteditor von Unity öffnen, sollte es folgendermaßen aussehen:

Wir möchten, dass die Variable „GameObject“ auf unseren Charakter verweist. Dazu können Sie einfach zur Unity-Kameraansicht zurückkehren und unsere Kugel auf das Eingabefeld ziehen / ablegen.

Jetzt wollen wir zuweisen halb der Bildschirmbreite und -höhe auf die Startfunktion. Bearbeiten Sie das Skript so, dass es folgendermaßen aussieht:

Jetzt brauchen wir nur noch die Mauswerte (für jede Zeit, in der sie vom Spieler bewegt werden). Wir müssen die Update-Funktion aufrufen, um dies zu erreichen. So optimieren Sie das Skript unter der Update-Variablen:

Um es ein wenig zu erklären, die Variablen X und Z gelten für die Controller-Achse. Wir möchten, dass diese die Position unseres Charakters manipulieren, wenn wir Controller-Eingaben an das Spiel senden. Wir müssen auf die Variable Input.mousePosition verweisen, die uns einen 2D-Vektor gibt. Dieser 2D-Vektor muss zu unserer Koordinationsverfolgung hinzugefügt werden, damit wir eine Funktion aufrufen setHeroPosition mit den Werten als Argumente.

Erstellen Sie also ein neues Skript und rufen Sie es auf HeroController und befestige es an unserer Sphäre / Charakter. Bearbeiten Sie das Skript so, dass es so aussieht:

Wenn Sie jetzt die 'Play' -Taste drücken, sollten Sie in der Lage sein, den Charakter mit der Maus auf der Plattform zu navigieren und sogar von der Plattform zu fallen! Unser Endziel ist es, ein Plattformspiel ähnlich wie zu erstellen Kurzes Leben Daher werden wir dieses Spiel in der nächsten Anleitung etwas näher erläutern.

Damit sind die Grundlagen für das Erstellen eines sehr einfachen Gameplays in Unity abgeschlossen. Im nächsten Teil dieses Handbuchs erfahren Sie, wie Sie dem Level mehr Landschaften hinzufügen, ein Spielmenü hinzufügen und alles mithilfe von WebGL auf eine Website exportieren , zum Spielen in einem Browser.

Prozedurale Plattformen erstellen

In Teil 1 dieses Tutorials haben wir gerade eine grundlegende Plattform erstellt, auf der Ihr Charakter herumspringen kann ( und fallen in den Untergang) - aber für einen echten Plattformer müssen wir zusätzliche Plattformen hinzufügen. Wir möchten jedoch nicht eine Million Plattformen hinzufügen, sondern Unity automatisch erstellen Plattformen, während unser Charakter mitspringt.

Dafür benötigen wir eine Plattformvorlage - auch als „Fertighaus“ bekannt. Prefab ist die Abkürzung für vorgefertigt, und es bedeutet einfach 'vorgefertigt' - normalerweise eine Kopie eines Spielobjekts, das Sie immer wieder verwenden können. In der Tat können Fertighäuser enthalten Hierarchien von Spielobjekten, was bedeutet, dass Sie eine ganze Szene von Spielobjekten „vorgefertigen“ können.

Sie müssen also einen neuen Assets-Ordner mit dem Namen erstellen Fertighäuser , dann ziehen Sie unsere Plattform per Drag & Drop von der Hierarchie Panel in diesen neuen Ordner. Fertighäuser sind im Hierarchiebedienfeld an der Farbe Blau zu erkennen.

Um Unity anzuweisen, prozedurale Plattformen zu erstellen, müssen wir ein Skript namens GameManager erstellen und es an die Kamera anhängen. GameManager-Skripte enthalten im Wesentlichen wichtige Anweisungen, die die Engine an das Gameplay weiterleiten soll. In diesem Fall werden Plattformen generiert, wenn unser Charakter voranschreitet.

Der Grund, warum wir es an die Kamera anhängen, ist, dass die Kamera niemals zerstört wird und konstant bleibt. Das Skript wird also niemals zerstört und bleibt konstant, indem es an die Kamera angehängt wird.

Folgendes muss in das Skript aufgenommen werden:

Um diesen Code ein wenig zu erklären, müssen wir einen Verweis sowohl auf das Fertighausbedienfeld als auch auf die Kugel (unseren Charakter) erstellen. Sie müssen sie also in die entsprechenden Steckplätze Ihres Editors ziehen und dort ablegen.

Dieser Code enthält auch drei private Variablen - die Zeilen, die mit beginnen private var. Dadurch wird das vorgefertigte Bedienfeld auf folgende Weise instanziiert (referenziert):

• Private Var-Grenze: float setzt der y-Achse eine Grenze, also wenn unser Charakter springt höher Als diese Grenze wird ein neues Panel erstellt.
• Private Var-Rotation: Quaternion; Fügt einfach eine notwendige Rotation hinzu, um unsere Fertighäuser zu instanziieren. Wir fügen jedoch hinzu Rotation = Quaternion.identify; weil Dies weist die Engine an, das Spielobjekt nicht zu drehen. Das Objekt (unsere vorgefertigten Paneele) wird buchstäblich „perfekt auf die Welt ausgerichtet“.
• Die letzte private Variable lastPlatformPosition merkt sich die Position der letzten Plattform und speichert sie als 3D-Vektor (im Grunde verschwinden die Plattformen nicht hinter Ihnen, sodass Sie rückwärts durch die Spielwelt gehen können, wenn Sie möchten).

In diesem nächsten Skript fügen wir eine Prüfung für hinzu jeder Rahmen ob sich unsere Kugel (Charakter) über der Grenze befindet oder nicht (was neue Plattformen erzeugt) - wenn sich unser Charakter über der Grenze befindet, werden wir es tun Erhöhen Sie die Grenzgrenze um ein neues Panel / eine neue Plattform zu erstellen, die höher als die letzte ist.

Unser nächster Schritt ist das Hinzufügen von Code, der die nächste Bedienfeldposition bestimmt:

Wir verwenden a mach während Führen Sie eine Schleife in diesem Code durch, um sicherzustellen, dass die X- und Z-Werte des Vektors (seine Position in der Spielwelt) nicht mit den vorherigen Plattformen identisch sind. Daher werden unsere prozedural generierten Plattformen immer höher.

Natürlich wollen wir diese Werte nicht streng platziert - ein bisschen Zufälligkeit ist eine gute Sache, sonst machen wir nur eine perfekte Treppe. Wir verwenden also die Random.Range Funktion zwischen den Werten -1 und 2, um zufällige Werte für X und Z aufzurufen. Sie können ein wenig mit diesen Zahlen spielen, wenn Sie herumalbern möchten.

Erstellen eines Spielmenüs

Bisher haben wir ein 'Spiel' erstellt, in dem Sie mit zunehmender Höhe springen und die Maus bewegen können, um die Richtung zu steuern. Das Problem ist, dass Sie, wenn Sie von der Plattform fallen, nur endlos fallen - wir müssen ein Skript für ein 'Tod' / Spielmenü erstellen, um von vorne zu beginnen.

Im Grunde schreiben wir ein Skript, das prüft, ob unsere Kugel (Zeichen) darunter fällt die erste Plattform des Spiels . In diesem Fall lädt das Skript eine neue Szene.

Unser erster Schritt wird darin bestehen, zu überprüfen, ob die Kugel einen bestimmten Schwellenwert unterschritten hat. Geh in die GameManager Skript haben wir früher gemacht und schauen auf die wenn Aussage der aktualisieren Funktion.

Wir werden eine verwenden sonst wenn Aussage hier, um zu überprüfen, ob die Position unserer Kugel unter -2,0 Einheiten der Y-Position liegt - wenn ja, unsere private Funktion Spiel ist aus wird ... nun, dieses Stück Skript ist selbsterklärend.

Dieses letzte Skript ist die Funktion, mit der Sie einen 'Game Over' -Zustand behandeln und unser Spielmenü laden können.

Dies entspricht der von Unity Anwendung Klasse - wir können die anrufen LoadLevel Funktion, um eine neue Szene aufzurufen, die in diesem Fall einfach unser Spielmenü ist - denken Sie daran, dass im Grunde alles in Unity „Levels“ sind. Hauptmenüs (Spiel starten - Optionen - Credits - usw.) sind im Grunde nur Ebenen / Szenen mit anklickbaren Textteilen. Ein bisschen wie Skyrims Ladebildschirme, oder? Es handelt sich lediglich um 3D-Modelle in einem leeren Weltraum mit einer Ladeleiste.

In jedem Fall müssen wir eine Szene durch erstellen Datei> Neue Szene und gib ihm den Namen Speisekarte beim Speichern. Dann werden wir beide Szenen zum Erstellungsprozess hinzufügen. Dies geschieht durch Datei> Build-Einstellungen .

Unsere Menüszene sollte noch geöffnet sein. Klicken Sie einfach auf die Schaltfläche 'Aktuelle hinzufügen' und fügen Sie die Szene zu Ihrer hinzu Build-Einstellungen - Mach das nochmal mit der Levelszene.

Wenn wir im Spiel sterben, sollte das von uns erstellte Skript uns von der Spielebene in die Menüszene überführen.

Fügen Sie eine Startschaltfläche für Spieler hinzu

Jetzt können wir das Spiel im Testmodus spielen, aber ab sofort haben die Spieler keine Möglichkeit, das Spiel zu starten, wenn wir dieses Spiel irgendwo hochladen. Wir müssen also ein Spielmenü erstellen, das eine Schaltfläche zum Starten des Spiels enthält.

Wechseln Sie also zur Spielmenüszene und fügen Sie dieses Bit der Kamera hinzu ( Denken Sie im Inspektorfenster an Punkt. 1 dieses Tutorials?).

• Klare Flaggen: Volltonfarbe
• Hintergrund: # 000
• Breite: 200
• Höhe: 60

Dies gibt uns einen festen schwarzen Hintergrund für unser Spielmenü - dies geschieht in RGB-Werte , nicht hex - Blau wäre also 001, Grün ist 010, Rot ist 100 usw. Ich könnte dies für Sie erklären, aber alles, was Sie tun müssen, ist Google „RGB Picker“, wenn Sie eine bestimmte Farbe wünschen.

Weiter müssen wir unseren Button hinzufügen, um das Spiel zu starten. Dies geschieht durch UI-Elemente - Grundsätzlich können wir UI-Elemente auf die gleiche Weise hinzufügen wie 3D-Elemente über die Hierarchie Panel. Also mach weiter und erstelle ein UI-Schaltfläche und Sie werden einige neue Elemente in der Hierarchie Panel:

• EventSystem
• Segeltuch
• Taste
• Text

Um dies zu brechen - die Segeltuch ist unser Container für alle UI-Elemente und wir können ihn reaktionsfähig machen ( Mit 'reaktionsschnell' meine ich 'Skalieren auf Bildschirmgröße', nicht reaktionsschnell, da es Fragen beantwortet, die Sie stellen. Das ist am besten AI-Skripten überlassen. In jedem Fall ändern wir die Position der Schaltfläche wie folgt:

• Rechtecktransformation {Pos X: 0, Pos Y: 0, Pos Z: 0}
• Rechteckentransformation {Breite: 200, Höhe: 60}

Um dies etwas eleganter zu gestalten, können Sie das „Quellbild“ der Schaltfläche entfernen und eine Farbe dafür festlegen. Um den Text der Schaltfläche zu ändern, bearbeiten Sie einfach die Text Element zu etwas wie 'START GAME', und geben Sie ihm eine Schriftgröße um 16.

Um den Knopf zu machen anklickbar Wir werden dem UIController-Skript im eine Funktion hinzufügen Taste Element. Fügen Sie einfach diesen Code unten hinzu:

Wenden Sie diese Funktion auf die Schaltflächen an Inspektor Einstellungen und in der Button (Skript) Bei den Komponenteneinstellungen fügen wir einfach eine Funktion hinzu, die ausgeführt wird, wenn der Player auf die Schaltfläche Start klickt. Fügen Sie einfach eine Funktion zum hinzu On Click () Ereignis, und ziehen Sie die Schaltfläche 'Spiel starten' in das Eingabefeld. Wählen Sie abschließend die neu erstellte Funktion aus dem UIController-Skript aus ( UIController.StartGame)

Wir können diese Funktion in den Schaltflächen anwenden Inspektor die Einstellungen. In den Komponenteneinstellungen der Schaltfläche (Skript) können wir eine Funktion ausführen, wenn ein Spieler darauf klickt. Dazu fügen wir dem Ereignis On Click () eine neue Funktion hinzu, indem wir auf klicken + Symbol. Jetzt können wir die Schaltfläche selbst auf das Eingabefeld ziehen und dort ablegen. Dann wählen wir die Funktion, die wir gerade geschrieben haben, aus dem UIController-Skript (UIController.StartGame) aus.

Exportieren / Veröffentlichen als WebGL-Browsergame

Öffnen Sie die Build-Einstellungen und wählen Sie WebGL als Ihre Zielplattform. Klicken Sie nun auf die Plattform wechseln Klicken Sie auf die Schaltfläche und klicken Sie schließlich auf Bauen Knopf und geben Sie Ihrem Spiel einen Titel. Nach dem Erstellen wird es als HTML-Datei exportiert / gespeichert, die in jedem WebGL-fähigen Browser geöffnet / angezeigt werden kann. Obwohl, wenn Sie wollen veröffentlichen In Ihrem Spiel gibt es zwei Methoden, um dies zu erreichen:

• Laden Sie Ihr Spiel auf einen Dateihost hoch (Dropbox, Google Drive usw.) und teilen Sie den Link. Dies ist nützlich für kleine Demos Sie möchten Freunden oder potenziellen Kunden zeigen ( Spieleportal-Websites, die entweder Ihr Spiel kaufen oder mit Ihnen einen Umsatz mit Anzeigenfreigaben erzielen).
• Laden Sie Ihr Spiel auf einen FTP-Server hoch, den Sie besitzen, und binden Sie es in einen ein