Erstellen eines WebGL -Spiels mit Unity 5 und JavaScript

Einfache Anleitung zum Erstellen von WebGL -Spielen mit Unity 5 und JavaScript

Kernpunkte:

Der WebGL -Exporteur von Unity 5 vereinfacht den Prozess der Veröffentlichung von Spielen im Web mit WebGL und ASM.JS, um interaktive 3D -Grafiken direkt im Browser zu rendern.
Dieses Tutorial leitet Sie, wie Sie mit JavaScript (UnityScript) ein einfaches Spiel in Einheit erstellen, das Projekte eingerichtet, Heldencharaktere erstellt, die auf der Plattform springen, und eine Perspektive der ersten Person für ein immersives Spielerlebnis hinzuzufügen.
Scripting in Unity ermöglicht ein dynamisches Spielverhalten, z.
Die wichtigsten Schritte zum Ausfüllen des Spiels umfassen das Hinzufügen einer Benutzeroberfläche mit einer Startschaltfläche im Spielmenü und Konfigurieren von Build-Einstellungen, um das Projekt als WebGL-Anwendung zu exportieren, damit es in einem WebGL-fähigen Browser abgespielt werden kann.
Dieses Tutorial endet mit weiteren Verbesserungsvorschlägen wie dem Hinzufügen von Bewertungen, mehr Plattformtypen und zusätzlichen Eingabemethoden und zeigt die Vielseitigkeit von Unity als plattformübergreifende Spielentwicklungstool.

Dieser Artikel wurde von Nilson Jacques Collins, Marc Towler und Matt Burnett überprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, um SitePoint -Inhalte in den Besten zu bringen!

Unity ist eine plattformübergreifende Spieleima-Engine, mit der Videospiele für PCs, Spielekonsolen, mobile Geräte und Websites entwickelt werden. Die neueste Version (Unity 5) wird mit einem WebGL -Exporteur ausgestattet, was bedeutet, dass Entwickler ihre Spiele problemlos im Web veröffentlichen können. Wie der Name schon sagt, verwendet der WebGL -Exporteur WebGL (eine JavaScript -API zur Wiedergabe interaktiver 3D -Computergrafiken) und ASM.JS (eine von Mozilla entwickelte JavaScript -JavaScript, die als "Montagesprache für das Web" angepriesen wird). Hier finden Sie mehr über ASM.JS und WebGL für Unity und Unreal Engine.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie mit Einheit beginnen. Ich werde Ihnen auch zeigen, wie Sie mit JavaScript einfache Spiele in Einheit erstellen und wie Sie Ihre Spiele in das Web exportieren.

Sie können fertige Spiele hier anzeigen (Sie benötigen einen Desktop -Browser, der WebGL unterstützt) oder Sie können Spieldateien und Projektdateien aus unserem GitHub -Repository herunterladen.

Beginnen wir ...

Anweisungen zu JavaScript in Einheit

Wenn wir in Einheit über JavaScript sprechen, sprechen wir tatsächlich über UnityScript, was eine Art JS -Dialekt ist. Die Einheit selbst erwähnt dieses JavaScript oft, aber zynische Beobachter glauben jedoch, dass "Einheit JavaScript" eine Marketingstrategie ist. In jedem Fall sollten wir klarstellen, dass UnityScript keine ECMAScript -Spezifikationen entspricht - es hat auch nicht versucht, dies zu tun. Hier finden Sie einen guten Überblick über die Unterschiede.

Installation der Einheit

Um dieses Tutorial zu starten, müssen wir die Unity -Version ausführen, die von hier heruntergeladen werden kann. Unity verfügt über einen Installateur für Windows und Mac OS X. Linux -Benutzer können Einheit über Wein ausführen, Ihre Ergebnisse können jedoch variieren.

Nach Abschluss der Installation können wir beginnen! Lassen Sie uns Einheit öffnen und ein neues 3D -Projekt erstellen.

Projekteinstellungen

Nachdem die Einheit zum ersten Mal geöffnet wurde, sollten wir uns einen Moment Zeit nehmen, um das Hauptfenster zu verstehen:

1. Das Panel in der linken Seite ist Hire , wodurch alle Elemente in der aktuellen Szene beschrieben werden. Die Szene ist wie ein Blick auf das Spiel, wie z. B. ein Level oder ein Menü. Derzeit sollte ein Hauptkamera Element und ein -Richtungslicht -Elements vorhanden sein.
Die Mitte ist die
2. -Szene Ansicht, die die Kamera und die Lichter im 3D -Bereich in Form eines Symbols veranschaulicht.
neben der Registerkarte
3. szene ist eine Registerkarte Spiel , die das Spiel selbst anzeigt, genau wie der Spieler sieht. Dies soll das Spiel im Herausgeber testen. Rechts befindet sich das Panel
Inspector
4. , in dem Sie die Elementeinstellungen ändern können. Versuchen wir es aus, klicken Sie auf das Richtungslicht in der Hierarchie . Jetzt sollten wir viele Informationen über dieses Licht sehen und in der Lage sein, seinen Schatten mit Schattentyp auszuschalten: No Shadow . Unten befindet sich das Fenster Projekt , in dem die zur Entwicklung des Spiels erforderliche Dateiansicht angezeigt wird.
5. Jetzt, da wir mit der Schnittstelle der Einheit vertraut sind, gibt es noch eine Sache, bevor wir mit der Entwicklung beginnen: Speichern Sie die aktuelle Szene. Datei & gt; Szene Öffnen Sie ein
Szene

Dialogfeld "Szene", das auf einen Ordner mit dem Namen Assets verweist. Eine häufige Möglichkeit, Dateien in Einheit zu organisieren, besteht darin, Unterordner zu verwenden. Fügen Sie also einen neuen Ordner mit dem Namen Szenen zum Assets -Ordner hinzu und speichern Sie die Szene in diesem Ordner namens Level.unity.

Erstellen Sie einen Helden Unser Spiel wird aus einem Helden bestehen, der von einer Plattform zur anderen springt und immer höher springt. Wenn es einen vermisst und ins Nichts fällt, wird das Spiel scheitern. Beginnen wir also mit der Erstellung eines Helden. Da der Spieler das Spiel aus der Perspektive aus der ersten Person beobachten wird, ist das Erscheinungsbild des Helden nicht wichtig. Wir können die Standardkugelgeometrie verwenden. Der Vorteil der Sphäre besteht darin, dass sie in mehreren Schritten erstellt werden kann und die physikalischen Eigenschaften passt, die wir zum Springen benötigen. Erstellen Sie in der

Hierarchie

und bearbeiten Sie die folgenden Eigenschaften mit dem Inspektor:

Testen wir, was wir tun, indem wir die Wiedergabetaste drücken. Wir sollten eine Kugel im 3D -Raum sehen, das sich vor der Skyline befindet.

Damit der Held fallen kann, muss es Gewicht hinzufügen. Daher müssen wir der Kugel eine Komponente hinzufügen, indem wir auf die entsprechende Schaltfläche in der Inspector und die Auswahl starres Körper klicken. Und da wir nicht wollen, dass sich der Held dreht, werden wir die Helden in der starren Körperkomponente einfrieren, indem wir die Einschränkung einschalten und alle Achsen in der Zeile rotieren. Wenn die Szene wieder gespielt wird, sollten wir in der Lage sein, den Helden fallen zu sehen.

Um den Helden vor endlosen Falls zu retten, werden wir eine flache Box erstellen, die als Plattform dient. Dazu müssen wir einen Würfel hinzufügen und den Wert der Skala auf 0,1 einstellen. Die Wiederholung der Szene bestätigt, dass der Held sicher auf der Plattform landet, obwohl ich zugeben muss, dass er nicht natürlich aussieht. Wie bringen wir den Helden ab? Durch Hinzufügen einiger physischer Materialien.

Machen Sie den Helden Rebound

Erstens müssen wir ein neues physikalisches Material für die Sphäre erstellen, um es elastisch zu machen. Erstellen Sie dazu einen neuen Ordner namens Materialien im Ordner Assets und erstellen Sie hier ein neues physisches Material. Nennen wir es Bouncy_Sphere. Der Wert, den wir im

Inspektor anpassen müssen :

<code>位置 { X: 0, Y: 2.5, Z: 0 }
缩放 { X: 0.3, Y: 0.3, Z: 0.3 }</code>

Wenn wir dieses Material zu

kollider hinzufügen, wird die Kugel auf und ab springen, aber immer die gleiche Höhe erreicht. Damit die Sphäre mit jedem Sprung immer höher springen kann, müssen wir der Plattform auch etwas physisches Material hinzufügen. Dazu erstellen wir ein anderes Material namens bouncy_platform und ändern seinen Wert auf:

<code>动态摩擦：10
静态摩擦：10
弹性：1
摩擦组合：最大
弹跳组合：最大</code>

Um hier Konsistenz zu erreichen, sollten wir auch das Cube-Element in Plattform umbenennen, indem wir es in der

Hierarchie doppelklicken. Wenn wir das Spiel jetzt starten, können wir feststellen, dass die Kugel jedes Mal immer höher springt.

Wir werden auch ein neues Standardmaterial namens Plattform erstellen, um der Plattform eine bestimmte Farbe zu verleihen. Verwenden Sie nach dem Erstellen dieses Materials #C8FF00 als

Albedo Farbe (Albedo ist ein Etikett in der UI der Einheit) und ziehen Sie dieses Material auf das Plattformelement. Es sollte jetzt gelb sein.

Fügen Sie eine Perspektive der ersten Person

hinzu

Um eine Perspektive der ersten Person hinzuzufügen, ziehen wir die Kamera (in der

Hierarchie ) auf die Kugel. Dadurch wird die Kamera zu einem Kind des Helden und veranlasst die Kamera, der Kugel zu folgen, wenn sie sich bewegt. Die Kameraeigenschaften müssen ebenfalls angepasst werden an:

<code>动态摩擦：0.9
静态摩擦：0.9
弹性：1
摩擦组合：平均
弹跳组合：相乘</code>

Wir werden auch ein Scheinwerfer als zweites untergeordnetes Element der Kugel erstellen. Dies gibt dem Spieler eine Vorstellung von der aktuellen Sprunghöhe des Helden. Passen Sie den Wert des Rampenlichts an:

<code>位置 { X: 0, Y: 1, Z: 0 }
旋转 { X: 90, Y: 0, Z: 0 }
缩放 { X: 2.5, Y: 2.5, Z: 2.5 }
清除标志：纯色
背景：#000
视野：80.3</code>

(Die nachfolgenden Schritte werden aufgrund von Platzbeschränkungen kurz beschrieben, und die Kernlogik- und Schlüsselcode -Snippets werden beibehalten)

Fertigkeit Die Programmiercontroller, programmatische Erstellungsplattform, Spielmenü hinzufügen, Startspiel -Schaltfläche hinzufügen, das Projekt als WebGL -Browser -Spiel usw. veröffentlichen usw. Weitere Informationen finden Sie im Originaldokument. Aufgrund von Platzbeschränkungen werde ich es hier nicht wiederholen. Der Schlüssel besteht darin, die Kernkonzepte des Skriptsystems, des Spielsmanagements, des Physik -Engine und des UI -Systems von Unity zu verstehen und sie in Kombination mit den Code -Beispielen im Tutorial zu üben.

FAQ (FAQ)

(Der FAQ -Abschnitt wird auch aufgrund von Platzbeschränkungen vereinfacht, Kernfragen und kurze Antworten beibehalten)

Wie optimieren Sie mein WebGL -Spiel für eine bessere Leistung?

Reduzieren Sie die Anzahl der Ziehanrufe, verwenden Sie weniger Material und kombinatorisches Netz, verwenden Sie Detailstufe (LOD), komprimieren Texturen und Audio -Dateien und verwenden Sie den Profiler von Unity, um Leistungs Engpässe zu identifizieren und zu beheben.

Kann ich WebGL für die Entwicklung des Handys verwenden?

Ja, aber WebGL -Spiele konsumieren möglicherweise mehr Ressourcen als native Anwendungen und erfordern sorgfältige Optimierung.

Wie kann ich mein WebGL -Spiel debuggen?

Sie können die Browser -Tools wie Chrome's Developer Tools oder die Webkonsole von Firefox debuggen.

Wie füge ich meinen WebGL -Spielen Multiplayer -Funktionen hinzu?

Der Backend-Server ist erforderlich, um die Kommunikation zwischen den Spielern zu verwalten, und Sie können das integrierte Netzwerksystem von Unity oder eine Lösung von Drittanbietern (z. B. Photon) verwenden.

Wie kann ich mit meinem WebGL -Spiel Geld verdienen?

In-Game-Anzeigen, In-App-Käufe oder Freemium-Modelle sind verfügbar.

Wie verbessern Sie die Grafiken meines WebGL -Spiels?

hochwertige Texturen, fortschrittliche Beleuchtungstechniken und Shader sind verfügbar.

Wie kann meine WebGL -Spiele auf verschiedene Bildschirmgrößen reagieren?

Erstellen Sie eine flexible und skalierbare Benutzeroberfläche mit dem UI -System von Unity und verwenden Sie die Bildschirmklasse, um die Bildschirmgröße von Spielern zu erhalten und das Spiel entsprechend anzupassen.

Wie füge ich meinem WebGL -Spiel Soundeffekte und Musik hinzu?

Verwenden Sie das Audio -System von Unity, importieren Sie Audiodateien und steuern Sie die Wiedergabe mit AudiOSource- und Audioklip -Klassen.

Wie schützt ich mein WebGL -Spiel vor Betrug?

Wir können die serverseitige Überprüfung von Spieldaten implementieren, den JavaScript-Code verschleiern und sichere Kommunikationsprotokolle verwenden.

Wie aktualisiere ich mein WebGL -Spiel nach dem Posten?

das Spiel neu kompilieren und Änderungen in der Einheit vornehmen und den neuen Build auf den Server hochladen.

hoffe, diese vereinfachte Version hilft Ihnen! Denken Sie daran, dass das Verständnis der Kernkonzepte und der praktischen Erfahrung der Unity Engine für die erfolgreiche Entwicklung von WebGL -Spielen von wesentlicher Bedeutung ist.

Das obige ist der detaillierte Inhalt vonErstellen eines WebGL -Spiels mit Unity 5 und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!