Erste Schritte mit Unity - Beenden Sie unser Spiel mit einem Menü

Es gibt verschiedene Methoden, um Menüs in Unity zu erstellen. Die beiden wichtigsten sind das integrierte GUI-System und die Verwendung von GameObjects mit Collidern, die auf Interaktionen mit der Maus reagieren. Das GUI-System von Unity kann schwierig zu handhaben sein, daher werden wir den GameObject-Ansatz verwenden, der meiner Meinung nach auch ein bisschen mehr Spaß macht für das, was wir hier erreichen wollen.

Endergebnis Vorschau

Schritt 1: Bestimmen Sie Ihre Spielauflösung

Bevor Sie ein Menü entwerfen, sollten Sie immer festlegen, für welche Auflösung Sie es bereitstellen möchten.

Öffnen Sie die Player-Einstellungen über das Hauptmenü Bearbeiten > Projekteinstellungen > Player und geben Sie Ihre Standardwerte für Bildschirmbreite und -höhe in den Inspektor ein. Ich habe mich dafür entschieden, meine als Standard 600x450px zu belassen, wie unten gezeigt.

Sie müssen dann die Größe Ihrer Spielansicht vom Standard "Free Aspect" auf "Web (600 x 450)" anpassen, da Sie sonst Ihre Menüelemente möglicherweise außerhalb des Bildschirms positionieren.

Schritt 2: Auswählen eines Menühintergrunds

Wie Sie in der Vorschau gesehen haben, wird unsere Spielumgebung in unserer Menüszene im Hintergrund angezeigt, sodass Sie nahtlos in das Spiel eintreten, wenn Sie auf "Spielen" klicken.

Dazu müssen Sie Ihren Player irgendwo in der Szene positionieren, in der Sie den Hintergrund mögen, und den Y-Rotationswert aufrunden. Auf diese Weise ist es einfacher, sich zu erinnern und später zu replizieren, sodass der Übergang vom Menü ins Spiel nahtlos erfolgen kann.

Lassen Sie uns nun mit der Erstellung der Menüszene fortfahren!

Schritt 3: Erstellen der Menüszene

Stellen Sie sicher, dass Ihre Szene gespeichert ist und "game" heißt - Sie werden später sehen, warum.

Wählen Sie die Spielszene in der Projektansicht aus und duplizieren Sie sie mit Strg/Befehl + D, benennen Sie die Kopie in "menu" um und doppelklicken Sie darauf, um sie zu öffnen.

Hinweis: Sie können bestätigen, welche Szene geöffnet ist, indem Sie oben auf dem Bildschirm auf "Unity - menu.unity - ProjectName - Web Player / Stand Alone" klicken. Sie möchten nicht versehentlich Teile aus Ihrer Spielszene löschen!

Wählen Sie nun die GUI und PickupSpawnPoints GameObjects aus der Hierarchie aus und löschen Sie sie. Erweitern Sie den "Player" und ziehen Sie die "Main Camera", damit sie nicht mehr dem Player untergeordnet ist. Löschen Sie dann den Player.

Wählen Sie als Nächstes das Gelände aus und entfernen Sie die Terrain Collider-Komponente, indem Sie mit der rechten Maustaste klicken und Komponente entfernen auswählen.

Wählen Sie abschließend die "Main Camera" aus und entfernen Sie die MouseLook-Komponente, indem Sie mit der rechten Maustaste klicken und Komponente entfernen auswählen.

Wenn Sie das Spiel jetzt ausführen, sollte nichts passieren und Sie sollten sich überhaupt nicht bewegen können. Wenn Sie sich bewegen oder drehen können, wiederholen Sie die obigen Schritte.

Schritt 4: Anpassen der Build-Einstellungen

Derzeit ist das einzige Level, das in diesem Build enthalten ist, wenn Sie Ihr Spiel erstellen oder spielen, die "game" -Szene. Dies bedeutet, dass die Menüszene niemals angezeigt wird. Damit wir unser Menü testen können, passen wir jetzt die Build-Einstellungen an.

Wählen Sie im oberen Menü Datei > Build-Einstellungen und ziehen Sie die Menüszene aus Ihrer Projektansicht in die Liste "Szenen im Build" der Build-Einstellungen, wie unten gezeigt

(Stellen Sie sicher, dass Sie die Szenen neu anordnen, um "menu.unity" oben zu platzieren, sodass die Szene zuerst geladen wird, wenn das Spiel gespielt wird.)

Perfekt!

Schritt 5: Hinzufügen der Wiedergabetaste

Wir werden 3D-Text für unser Menü verwenden. Erstellen Sie also ein 3D-Text-GameObject über das Hauptmenü: GameObject > Andere erstellen > 3D-Text und benennen Sie es dann in "PlayBT" um. Stellen Sie die Y-Drehung des PlayBT-Textes so ein, dass sie mit dem Y-Drehwert Ihrer Hauptkamera übereinstimmt, sodass sie direkt darauf zeigt und daher leicht lesbar ist.

Ändern Sie bei ausgewähltem PlayBT die Texteigenschaft Text Mesh von Hello World in "Play", reduzieren Sie die Zeichengröße auf 0,1 und erhöhen Sie die Schriftgröße auf 160, um den Text schärfer zu machen.

Hinweis: Wenn Sie eine andere als die Standardschriftart verwenden möchten, wählen Sie entweder die Schriftart aus, bevor Sie den 3D-Text erstellen, oder ziehen Sie die Schriftart auf die TextMesh-Eigenschaft "TextMesh" des 3DText und ziehen Sie die Schriftarten "Font Material" in die Liste "Mesh Renderers Materials" das vorhandene Schriftmaterial. Ein ziemlicher Ärger, den ich kenne!

Fügen Sie abschließend über das Hauptmenü einen Box Collider hinzu: Komponente > Physik > Box Collider. Passen Sie die Größe des Box Colliders an den Text an, wenn er nicht gut passt.

An diesem Punkt im Tutorial müssen sowohl die Szenen- als auch die Spielansicht gleichzeitig geöffnet sein, da Sie das PlayBT jetzt in der Szenenansicht so verschieben, dass es in Ihrer Spielansicht zentriert ist (siehe unten). Ich empfehle, es zuerst horizontal mit einer Ansicht von oben nach unten zu positionieren und dann wieder eine perspektivische Ansicht zu verwenden, um es vertikal mit den Achsengriffen zu positionieren.

Das ist also unser Play-Button. Jetzt lass es uns spielen!

Schritt 6: Das Mouse-Handler-Skript

Erstellen Sie ein neues JavaScript-Skript in Ihrem Skriptordner, benennen Sie es in "MenuMouseHandler" um und fügen Sie es als Komponente des PlayBT-GameObject hinzu, indem Sie es entweder direkt in PlayBT ziehen oder PlayBT auswählen und das Skript in den Inspector ziehen.

Ersetzen Sie den Standardcode durch Folgendes:

1

/**

2

	Mouse Down Event Handler

3

*/

4

function OnMouseDown()

5

{

6

	// if we clicked the play button

7

	if (this.name == "PlayBT")

8

	{

9

		// load the game

10

		Application.LoadLevel("game");

11

	}

12

}

Wir verwenden die MonoBehaviour OnMouseDown(...) -Funktion, die jedes Mal aufgerufen wird, wenn der BoxCollider mit der Maus angeklickt wird. Wir prüfen, ob die angeklickte Schaltfläche "PlayBT" heißt, und verwenden in diesem Fall Application.LoadLevel(...), um die "game"-Szene zu laden.

Genug geredet - lass es laufen und sieh zu, wie dein Spiel zum Leben erweckt wird, wenn du auf "Play" klickst!

Hinweis: Wenn Sie auf "Abspielen" klicken und einen Fehler bei den Build-Einstellungen festgestellt haben, ärgern Sie sich nicht. Sie müssen nur Ihre Build-Einstellungen überprüfen - wiederholen Sie Schritt 4.

Schritt 7: Beenden des Spiels

Das Menü zum Starten des Spiels ist also großartig, aber das Spiel endet technisch nie, da nichts mehr passiert, wenn der Timer abgelaufen ist. Lassen Sie uns das jetzt beheben.

Öffnen Sie das CountdownTimer-Skript und fügen Sie am Ende der Funktion Tick() die folgende Zeile hinzu:

1

Application.LoadLevel("menu");

Führen Sie jetzt Ihr Spiel erneut aus und wenn der Timer abgelaufen ist, kehren Sie zum Menü zurück! Kinderleicht!

Los geht's - ein Grundmenü, das unserem Spiel hinzugefügt wurde. Lassen Sie es uns jetzt mit einem Hilfebildschirm etwas benutzerfreundlicher gestalten, um zu erklären, wie man spielt.

Schritt 8: Hinzufügen der Hilfeschaltfläche

Die Hilfeschaltfläche ist in praktisch jeder Hinsicht mit der PlayBT identisch. Duplizieren Sie also die PlayBT, benennen Sie sie in HelpBT um und positionieren Sie sie unter der Wiedergabetaste. Passen Sie die Texteigenschaft so an, dass "Hilfe" statt "Wiedergabe" angezeigt wird, und verkleinern Sie die Schriftgröße möglicherweise ein wenig, wie unten gezeigt - ich habe 100 verwendet.

Öffnen Sie nun das MenuMouseHandler-Skript und fügen Sie else if Block Ihrer vorhandenen if-Anweisung hinzu.

1

// if we clicked the help button

2

else if (this.name == "HelpBT")

3

{

4

    // rotate the camera to view the help "page"

5

6

}

Wenn Sie die Vorschau überprüfen, sehen Sie, dass sich die Kamera dreht, wenn Sie auf Hilfe klicken, um das Hilfemenü anzuzeigen. Wie machen wir das?

Schritt 9: Gott schütze iTween

Dank iTween kann unsere Kameradrehung in einer Zeile schön und sauber durchgeführt werden. Ohne iTween wäre das Leben nicht annähernd so lustig. Wie der Name vielleicht verrät, handelt es sich um eine Tweening-Engine, die für Unity entwickelt wurde. Es ist auch kostenlos.

Öffnen Sie iTween im Unity Asset Store, klicken Sie auf Herunterladen/Importieren und importieren Sie alles in Ihr Projekt. Nach dem Import müssen Sie das Verzeichnis iTween/Plugins in das Stammverzeichnis Ihres Assets-Ordners verschieben.

Sie sind jetzt bereit, Ihr Leben zu vertreiben!

Schritt 10: Drehen der Kamera

Nehmen Sie ein Stück Papier und einen Stift (oder öffnen Sie ein leeres Dokument) und notieren Sie sich den Y-Rotationswert Ihrer Hauptkamera, wie unten eingekreist.

Drehen Sie die Kamera in der Szenenansicht in die gewünschte Richtung um die Y-Achse, sodass der Text für Wiedergabe und Hilfe nicht sichtbar ist und Sie einen anständigen Hintergrund für Ihre Hilfeseite haben. Sie können meine unten sehen: Ich habe von -152 auf -8 gedreht.

Kehren Sie zu Ihrem MenuMouseHandler-Skript zurück und fügen Sie die folgende Zeile in die else if-Anweisung ein:

1

iTween.RotateTo(Camera.main.gameObject, Vector3(0, -8, 0), 1.0);

Wir verwenden Camera.main, um die Hauptkamera (definiert durch das Tag "MainCamera") aus der Szene abzurufen, und verwenden iTween.RotateTo(...), um die Kamera in einen bestimmten Winkel zu drehen - in meinem Fall -8.

(Sie müssen die -8 in der obigen Zeile durch die aktuelle Drehung Ihrer Kamera ersetzen.)

Kehren Sie nun zu Ihrer Szene zurück und bringen Sie Ihre Kamera wieder in die ursprüngliche Drehung zurück, die Sie am Anfang dieses Abschnitts notiert haben, sodass sie dem PlayBT zugewandt ist. Führen Sie Ihr Spiel aus, klicken Sie auf Hilfe und die Kamera sollte sich drehen. Woo!

Hinweis: Wenn Sie eine Fehlermeldung erhalten, dass iTween nicht vorhanden ist, haben Sie es nicht ordnungsgemäß importiert. Wiederholen Sie Schritt 9.

Jetzt erstellen wir unsere Hilfeseite.

Schritt 11: Erstellen der Hilfeseite

Drehen Sie Ihre Kamera zurück zur Y-Drehung Ihrer Hilfeseite - in meinem Fall -8.

Jetzt werden wir einen kleinen Erklärungstext sowie einen weiteren Text hinzufügen, um die verschiedenen Tonabnehmer und ihre Ergebnisse zu erklären. Schließlich fügen wir eine Zurück-Schaltfläche hinzu, um zum Hauptmenü zurückzukehren. Sie können Ihre Seite so gestalten, wie Sie möchten. Sie können also kreativ werden. Auf geht's...

Duplizieren Sie das HelpBT, benennen Sie es in HelpHeader um, stellen Sie die Drehung auf die Ihrer Kamera ein, ändern Sie den Ankerwert in "obere Mitte" und reduzieren Sie die Schriftgröße - ich habe 60 verwendet.

Kopieren Sie als Nächstes den folgenden Absatz und fügen Sie ihn in die texteigenschaft ein:

"Sammle so viele Würfel wie möglich innerhalb des Zeitlimits.
Achtung, sie ändern sich im Laufe der Zeit!

Hinweis: Beachten Sie, dass Sie keinen mehrzeiligen Text in die Texteigenschaft eingeben können. Sie müssen es in ein anderes Programm eingeben und dann kopieren und einfügen, da durch Drücken der Eingabetaste das Feld zugewiesen wird.

Entfernen Sie schließlich die Box Collider- und MenuMouseHandler-Komponenten im Inspektor, da dieser Text nicht anklickbar sein muss. Hoffentlich haben Sie so etwas:

Ziehen Sie nun ein Pickup-Fertighaus in die Szene und positionieren Sie es auf dem Bildschirm. Ich habe meine wie unten gezeigt.

Duplizieren Sie als Nächstes den HelpHeader, benennen Sie ihn in HelpPowerups um, ändern Sie den Anker in "oben links" und kopieren Sie den folgenden Absatz und fügen Sie ihn in das Textfeld ein.

"Grün: + 2 Punkte

Pink: +/- zufällige Punkte

Blau: Random Speed Boost"

Positionieren Sie es so, dass Sie so etwas wie das Folgende haben.

Jetzt müssen Sie nur noch die Schaltfläche Zurück hinzufügen, um zum Hauptmenü zurückzukehren.

Schritt 12: Die Hilfeseite Zurück-Schaltfläche

Dupliziere das HelpBT, benenne es in BackBT um, ändere seinen Text in "Back", stelle seine Drehung auf die deiner Kamera ein und verwende die Szenenansicht, um es in der Spielansicht neu zu positionieren. Ich habe meine wie hier gezeigt in die untere Ecke gestellt:

Jetzt müssen wir nur noch unser MenuMouseHandler-Skript aktualisieren, um auch Mausklicks vom BackBT zu verarbeiten. Fügen Sie den folgenden else if-Block am Ende der if-Anweisungen von OnMouseDown() hinzu:

1

	// if we clicked the Back button

2

	else if (this.name == "BackBT")

3

	{

4

		// rotate the camera to view the menu "page"

5

		iTween.RotateTo(Camera.main.gameObject, Vector3(0, -152, 0), 1.0);

6

	}

Dies ist fast identisch mit der vorherigen iTween-Anweisung. Der einzige Unterschied besteht in dem Winkel, in dem die Kamera in meinem Fall auf - -152 gedreht wird. Sie müssen diese Zahl auf die ursprüngliche Y-Drehung Ihrer Kamera ändern (die, die Sie notiert haben, erinnern Sie sich?).

Jetzt müssen Sie nur noch Ihre Kamera auf die ursprüngliche Drehung zurücksetzen - den Wert, den Sie gerade zur iTween-Anweisung hinzugefügt haben -, damit sie wieder zum Hauptmenü zeigt.

Führen Sie das Spiel aus, und Ihre Kamera sollte sich drehen, um die Hilfeseite anzuzeigen, und zum Hauptmenü zurückkehren. Herzlichen Glückwunsch, Sie sind fertig!

Abschluss

Ich hoffe, Ihnen hat diese Sitzung "Erste Schritte mit Unity" gefallen!

In diesem Teil haben wir die Verwendung von GameObjects als Menüelemente und die unglaublich leistungsstarke Tweening-Bibliothek iTween behandelt.

Wenn Sie eine zusätzliche Herausforderung wünschen, verwenden Sie iTween, um die Textfarbe in MouseOver und dann wieder in MouseExit zu ändern. (Auf dieser Seite finden Sie eine Liste der Maushandler.)

Oder fügen Sie eine iTween CameraFade hinzu und blenden Sie sie dann aus, wenn der Timer abgelaufen ist. Laden Sie dann das Menü, anstatt das Spiel abrupt zu beenden. Sie können dann den Aufruf von Application.LoadLevel(...) mit yield WaitForSeconds(...) verzögern.

Lass mich in den Kommentaren wissen, wie es dir geht!