Discord: Start an Activity
Bringen Sie den Teamgeist in Ihrem Unternehmen auf das nächste Level!
Point-and-Click Flockes Labyrinth
Spieleproduktion
Kurzbeschreibung
In diesem Tutorial wird ein Point-and-Click Spiel programmiert. Dabei wird das Spiel Flockes Labyrinth Schritt für Schritt durchgegangen.
2 Flockes Labyrinth
Zuerst wird das Spiel Flockes Labyrinth näher beschrieben.
2.1 Spielidee
Die kleine Hündin Flocke jagte in einer großen Stadt einer Katze hinterher. Da bemerkte sie, dass sie sich verirrt hatte. Als sie versuchte den Weg nach Hause zu finden, entdeckte sie böse Hundefänger. Nun muss sie den richtigen Weg wählen, um den Hundefängern zu entkommen.
2.2 Game Design Document
Flockes Labyrinth ist ein 2D-Spiel und wird aus der 3rd-Person Perspektive gespielt. Flocke steht immer an einer Kreuzung und wählt einen Weg durch Antippen aus. Sie kann auf ihrem Weg Futternäpfe und Schmuck einsammeln. Durch diese kann sie vor dem Hundefänger flüchten oder eine Elster um Hilfe bitten.
3 Die ersten Schritte
In diesem Abschnitt werden zuerst die Basics beschrieben. Hier wird erklärt wie Szenen und Buttons erstellt und anschließend mit Bildern verschönert werden.
3.1 Projekt in Unity anlegen
Als Erstes wird der Unity Hub geöffnet. Über den “New”-Button (oben rechts) wird ein neues Projekt angelegt. Danach wird (links) bei Template “3D” ausgewählt und (auf der rechten Seite) der Name und der Speicherort eingetragen. Über “Create” (unten rechts) wird das Projekt erstellt.
3.2 Szenen erstellen
Im Projektordner (unten links) wird zuerst der Ordner “Assets” geöffnet. Darin befindet sich der “Scenes” Ordner. Um eine neue Szene zu erstellen, wird mit Rechtsklick auf “Create” und danach auf “Scene” geklickt.
3.3 Canvas erstellen
Jede Szene hat (auf der linken Seite) eine “Hierarchy”. Dort wird ein Canvas (Leinwand) erstellt mit Rechtsklick “UI”, “Canvas”. Das Canvas wird immer im Sichtfeld der aktiven Kamera gezeigt. Im “Inspector” (auf der rechten Seite) wird beim “Canvas Scaler” unter “UI Scale Mode” der Mode “Scale With Screen Size” ausgewählt.
3.4 Hintergrund erstellen
Unter “Canvas” wird ein Panel erstellt mit Rechtsklick “UI”, “Panel”. Dieses Game Objekt ist der Hintergrund.
3.5 Hintergrund einfügen
Die Bilder können im “Assets” Ordner unter “2D-Assets” angelegt werden. Im “Inspector” (rechts) wird für jedes Bild bei “Texture Type” “Sprite (2D and UI)” ausgewählt. Mit Rechtsklick wird auf den Hintergrund geklickt und “2D Object”, “Sprite” ausgewählt. Im Inspector erscheint ein “Image” Feld. Über Drag and Drop wird das gewünschte Bild genommen und in das Feld “Source Image” reingezogen.
3.6 Buttons erstellen
Die Buttons werden ebenfalls in der “Hierarchy” unter “Canvas” erstellt. Dazu wird mit Rechtsklick “UI” und danach “Button” ausgewählt.
3.7 Buttons gestalten
Nun werden die Buttons mit einem Bild verschönert. Mit Rechtsklick wird auf den Button geklickt und “2D Object”, “Sprite” ausgewählt. Das gewünschte Bild muss nur noch (rechts) im Inspector in das Feld “Source Image” reingezogen werden.
3.8 Kamera einstellen
Wird (links) in der “Hierarchy” auf die “Main Camera” geklickt, öffnet sich (rechts) der “Inspector”. In den Einstellungen der “Camera” wird bei “Clear Flags” “Solid Color” ausgewählt und die gewünschte Farbe ausgesucht. Die “Projection” wird auf “Orthographic” umgestellt.
4 Flocke zum Laufen bringen
Im nächsten Abschnitt geht es darum, Flocke von einer Position zur anderen zu bewegen. Und natürlich darf das Flüchten vor dem Hundefänger nicht vergessen werden.
4.1 Map erstellen
In der “Hierarchy” wird das Game Objekt “Map” mit Rechtsklick “Create Empty” erzeugt. Darunter wird mit Rechtsklick das “3D Object”, “Plane” erstellt. Dies ist der Boden für unsere Karte, er wird um -90° auf der x-Achse gedreht. Anschließend werden mit Rechtsklick “3D Object”, “Cube” verschiedene Würfel erzeugt und auf der Karte positioniert. Die Würfel stellen die Gebäude auf der Karte dar.
4.2 ScenePoints festlegen
ScenePoints sind Punkte, die die Position von Flocke festlegen. Sie stehen in der “Map” unter “ScenePoints” und werden mit Rechtsklick “3D Object”, “Sphere” erstellt. Danach müssen sie nur noch in der Map auf die richtige Position gebracht werden.
4.3 Dog-Klasse
Nun wird das Skript für unseren Hund erstellt. Im “Scripts” Ordner wird mit Rechtsklick auf “Create”, “C# Skript” die Dog-Klasse erzeugt. Diese Klasse gehört dem Hund und allen Variablen und Methoden, die er benötigt. Beispielsweise stehen hier seine aktuelle Position und sein aktueller SceneView drin.
4.4 Position festlegen
Zum Laufen benötigt Flocke einen Startpunkt. Zuerst wird ein Array aus Game Objekten in der Dog-Klasse erstellt. Anschließend werden die gewünschten Startpunkte auf der Karte ausgewählt. Jetzt fehlt nur noch die Methode, die einen zufälligen Startpunkt aussucht.
4.5 Game Objekt Dog erstellen
In der Hierarchie (links) wird unter der “Map” ein Game Objekt erzeugt mit Rechtsklick “3D Object”, “Cylinder”. Dieses Game Objekt ist der Hund. Das Skript “Dog” muss nur noch auf das Game Objekt “Dog” gezogen werden. Dadurch können die Methoden, die im Skript geschrieben wurden, benutzt werden.
4.6 Dog-Icon hinzufügen
Mit Rechtsklick auf das Game Objekt Dog wird “2D Object” und danach “Sprite” ausgewählt. Das gewünschte Icon wird aus dem “2D Assets” Ordner im Inspector unter “Sprite Renderer” in das Feld “Sprite” gezogen.
4.7 Dog-Klasse im Inspektor konfigurieren
Im Skript (rechts) im “Inspector” wird der leere Array angezeigt. Dieser kann nun mit den gewünschten Startpunkten gefüllt werden. Dazu wird im Array die Größe des Arrays bzw. die Anzahl der Punkte eingetragen. Die Punkte in der “Map” werden über Drag and Drop in den Array gezogen.
4.8 SceneView-Klasse erstellen
Diese Klasse benötigt Flocke, um ihre aktuelle Sicht auf dem Bildschirm anzeigen zu können. Dafür wird im “Scripts” Ordner die SceneView-Klasse erstellt (siehe 4.3).
4.9 SceneView-Klasse konfigurieren
Für jeden ScenePoint müssen die Nachbarpunkte festgelegt werden. Auf jeden ScenePoint wird das “SceneView” Skript gezogen (siehe 4.5). Anschließend müssen die Nachbarpunkte aus der “Hierarchy” in die entsprechenden Felder für die Nachbarpunkte im “Inspector” gezogen werden.
4.10 ScenePointManager-Klasse
Im “Scripts” Ordner wird die ScenePointManager-Klasse erstellt (siehe 4.3). Der ScenePointManager ist für das Laufen des Hundes und für die Aktivierung des neuen SceneViews zuständig.
4.11 Game Objekt ScenePointManager erstellen
In der “Hierarchy” wird unter der “Map” das Game Objekt des ScenePointManger erstellt (siehe 4.1). Alle ScenePoints müssen sich unterhalb des ScenePointMangers befinden. Schließlich wird dem ScenePointManager nur noch sein Skript übergeben (siehe 4.5).
4.12 Hund laufen lassen
In der ScenePointManager-Klasse werden die Methoden für das Laufen des Hundes geschrieben. Flocke muss sich auf den oberen, unteren, linken und rechten Punkt bewegen können.
! Wird eine Instanz eines anderen Game Objekts benötigt, muss das entsprechende Game Objekt aus der “Hierarchy” (links) über Drag and Drop in das entsprechende Feld im “Inspector” (rechts), wo es benötigt wird, gezogen werden. Dies muss bei allen Game Objekten wiederholt werden. !
4.13 Hund flüchten lassen
Außerdem darf Flocke nicht vom Hundefänger eingefangen werden. Dafür wird in der ScenePointManager-Klasse die Flucht-Methode geschrieben. Flocke flüchtet auf ihre vorherige Position zurück. (Hat sie jedoch nicht genügend Snacks, kann sie diese Methode nicht verwenden.)
4.14 Neuen SceneView aktivieren
Wenn Flocke läuft, muss sich auch ihre Sicht (der SceneView) ändern. Dazu wird eine Methode in der ScenePointManager-Klasse angelegt. Diese deaktiviert zuerst alle SceneViews, um danach den aktuellen SceneView zu aktivieren.
5 Buttons zum Szenenwechsel
Als nächstes wird das Navigieren durch die Szenen beschrieben. Hierfür werden Buttons verwendet.
5.1 ButtonManager-Klasse
Zuerst wird die ButtonManager-Klasse im “Scripts” Ordner erzeugt (siehe 4.3). Diese Klasse enthält alle Methoden, die über einen Button-Klick aufgerufen werden sollen. Zum Beispiel das Navigieren durch die Szenen.
5.2 Navigieren durch die Szenen
Dies erfolgt durch das Laden der neuen Szene. Dafür wird in der ButtonManager-Klasse eine Methode erstellt, in der der SceneManager die neue Szene lädt. Die Szene, die neu angezeigt werden soll, wird in den Klammern von der Methode LoadScene angegeben.
5.3 Code mit Buttons verknüpfen
Anschließend wird bei den einzelnen Buttons (rechts) im “Inspector” die Methode eingetragen. Unter dem Feld “On Click ()” gibt es ein ausklappbares Menü. Zuerst wird der “ButtonManager” und danach die gewünschte Methode ausgewählt.
5.4 Startmenü: PlayGame(), ExitGame()
Mit der PlayGame Methode wird das Spiel gestartet. Die neue Szene (im Bsp.: 1) wird geladen und zeigt den aktuellen SceneView von Flocke. Die ExitGame Methode wird benutzt, um das Spiel zu verlassen.
5.5 Spielerbildschirm: BackToMenu()
BackToMenu ist eine Methode, die vom Spielerbildschirm (im Bsp.: 1) zurück ins Startmenü (im Bsp.: 0) wechselt.
Bist Du bereit, Deine Spielevision zum Leben zu erwecken? Setze Dich noch heute mit uns in Verbindung, um mehr darüber zu erfahren, wie wir Dir mit unseren Spieleentwicklungsdiensten dabei helfen können, deine Vorstellungen und Ideen erfolgreich zu verwirklichen!
6 Zielpunkt festlegen
In diesem Abschnitt wird die Erstellung eines Zielpunkts betrachtet. Befindet Flocke sich auf dem Zielpunkt, ist das Spiel gewonnen. Es wird der Gewinnerbildschirm (Win Screen) angezeigt.
6.1 Home-Klasse
Die Home-Klasse wird zuerst im “Scripts” Ordner erzeugt (siehe 4.3). Genauso wie beim Bestimmen des Startpunktes, wird in der Home-Klasse ebenfalls ein Array erstellt (siehe 4.4). Dieser wird im “Inspector” mit den gewünschten Zielpunkten gefüllt (siehe 4.6). Anschließend wird nur noch eine Methode gebraucht, die einen zufälligen Punkt auswählt.
6.2 Game Objekt Home erstellen
In der “Hierarchy” wird unter “Map” das Game Objekt “Home” erstellt und mit dem entsprechenden Skript verknüpft (siehe 4.5).
6.3 Home-Icon hinzufügen
Mit Rechtsklick auf das Game Object Home wird “2D Object”, “Sprite” ausgewählt. Jetzt wird nur noch das Icon im “Inspector” unter “Sprite Renderer” in das Feld “Sprite” gezogen.
6.4 Win Screen
6.5 Win Screen laden
Flocke muss zu jeder Zeit überprüfen, ob sie schon zu Hause ist. In der Dog-Klasse wir eine Methode angelegt, die genau das überprüft. Damit die Methode zu jeder Zeit ausgeführt wird, muss sie in der Update-Methode der Dog-Klasse stehen.
7 Zur Karte wechseln
Nun wird der Perspektivenwechsel betrachtet. Wird die Elster um Hilfe gebeten, kann in die Top-Down Ansicht gewechselt werden. In dieser Ansicht sieht man, wo sich Flocke und die Hundefänger auf der Karte befinden. (Für diese Funktion muss Flocke aber die Elster mit Schmuck bezahlen.)
7.1 ButtonManager: OpenMap(), CloseMap()
Diese Methoden befinden sich in der ButtonManager-Klasse. Mit der OpenMap-Methode wird der aktuelle Canvas deaktiviert und die Ansicht auf die Karte aktiviert. Die CloseMap-Methode sorgt für das Deaktivieren der Karte und aktiviert wieder den aktuellen Canvas.
8 Hundefänger erstellen
Im nächsten Abschnitt wird die Erstellung der Hundefänger näher betrachtet. Diese jagen Flocke durch die Stadt und wollen sie einfangen. Wurde Flocke gefangen, ist das Spiel vorbei und der Verliererbildschirm (Lose Screen) wird angezeigt.
8.1 Enemy-Klasse
Dazu wird im “Scripts” Ordner die Enemy-Klasse erstellt (siehe 4.3). Diese enthält eine Methode, die für das Laufen eines einzigen Hundefängers zuständig ist. Zusätzlich wird in der “Hierarchy” unter “Map” das Game Objekt “EnemyContainer” erzeugt (siehe 4.1). Unter dem EnemyContainer werden später im Spiel alle Hundefänger aufgelistet.
8.2 Enemy Prefabs anlegen
In der “Hierarchy” wird ein Game Objekt mit “Create Empty” erstellt. Dieses Game Objekt bekommt ein Enemy-Icon (siehe 4.6) und das Enemy-Skript (siehe 4.5) übergeben. Es ist eine Vorlage für die Erstellung der Hundefänger. Im “Assets” Ordner wird ein “Prefab” Ordner erstellt. In diesen Ordner wird das Game Objekt reingezogen.
8.3 EnemyManager- Klasse
In der EnemyManager-Klasse befinden sich die Methoden zum Erstellen und Bewegen aller Hundefänger. Auch hier wird wieder ein Game Objekt erstellt (siehe 4.1). Dieses muss sich jedoch auf der gleichen Ebene wie “Map” befinden.
8.4 Hundefänger laufen lassen
Die Hundefänger bewegen sich um einen Schritt in eine zufällige Richtung. Sie laufen immer nach dem Hund. Dafür wird die Lauf-Methode aus der EnemyManager-Klasse in der ScenePointManager-Klasse aufgerufen. Wenn der SceneView gewechselt wird, laufen die Hundefänger.
8.5 Hundefänger begegnen
Flocke muss nach jedem Schritt überprüfen, ob ein Hundefänger vor ihr steht. Dafür wird eine Methode in der Dog-Klasse angelegt. Steht der Hundefänger vor ihr, muss er auch auf dem Spielerbildschirm angezeigt werden.
8.6 Hundefänger anzeigen
Damit der Hundefänger im SceneView angezeigt wird, wird ein Game Objekt “Catcher” unterhalb der “Canvas” erstellt (siehe 4.1). Auf dieses Game Objekt wird das Bild des Hundefängers als Sprite draufgelegt (siehe 4.6). Das Bild kann nun über das Feld “Rect Transform” im “Inspector” skaliert und positioniert werden.
8.7 BackgroundController-Klasse
Diese Klasse wird benötigt, um zu bestimmen, wann der Hundefänger auf dem SceneView angezeigt wird. Dazu wird eine Methode angelegt, die überprüft, ob der Hundefänger im SceneView zu sehen sein soll. Soll er gezeigt werden, wird das Game Objekt “Catcher” aktiviert.
8.8 Game Objekt BackgroundController
Das Game Objekt wird in der “Hierarchy” unterhalb der “Canvas” erzeugt (siehe 4.1). Danach wird ihm nur noch sein Skript übergeben (siehe 4.5).
8.9 Coroutine starten und beenden
Bevor Flocke vom Hundefänger eingefangen wird, soll sie etwas Zeit zum Flüchten bekommen. Dafür wird eine “Coroutine” in der BackgroundController-Klasse eingesetzt. Diese ermöglicht es die Ausführung des Codes zu stoppen und nach einer gewissen Zeit wieder aufzunehmen. Schafft Flocke es zu flüchten, wird die Coroutine gestoppt. Sie befindet sich auf einem anderen SceneView ohne den Hundefänger.
8.10 Lose Screen
8.11 Lose Screen laden
Schafft Flocke es nicht vor dem Hundefänger zu flüchten, ist er auf dem SceneView zu sehen. Dadurch wird der Verliererbildschirm (im Bsp.: 3) geladen. Das Spiel ist vorbei.
9 Items erstellen
Im vorletzten Abschnitt werden die Items Futternapf (Snack) und Schmuck (Jewelry) betrachtet. Diese können überall auf der Karte eingesammelt werden. Am Anfang des Spiels besitzt Flocke einen Futternapf und ein Schmuckstück. Sie kann jedoch nur maximal drei Stück von jedem Item mitnehmen.
9.1 Snack-Klasse
Nachdem die Snack-Klasse erstellt wurde (siehe 4.3), wird das Game Objekt “SnackContainer” in der “Hierarchy” unter der “Map” erzeugt (siehe 4.1). In der Snack-Klasse wird eine Methode zum Einsammeln der Futternäpfe angelegt. Wird ein Futternapf eingesammelt, spawnt ein neuer zufällig auf der Karte. Hat Flocke schon genügend Futternäpfe, kann der Futternapf nicht eingesammelt werden.
9.2 Snack Prefabs anlegen
Die Vorlage des Snacks beinhaltet die gleichen Schritte wie die Vorlage der Hundefänger (siehe 8.2). Zuerst wird ein Game Objekt erstellt. Diesem wird sein Skript übergeben. Anschließend wird es in den “Prefab” Ordner reingezogen.
9.3 Jewelry-Klasse
Nach dem Vorbild der Snack-Klasse wird zuerst die Jewelry-Klasse erzeugt und danach der Container (siehe 9.1). In der Jewelry-Klasse befindet sich ebenfalls eine Methode zum Einsammeln der Schmuckstücke. Nach dem Einsammeln eines Schmuckstücks, spawnt ein neues Schmuckstück zufällig auf der Karte. Hat Flocke schon genügend Schmuck, kann das Schmuckstück nicht eingesammelt werden.
9.4 Jewelry Prefabs anlegen
Für die Schmuck-Vorlage wird ebenfalls ein Game Objekt erzeugt. Es bekommt sein Skript übergeben und wird im “Prefab” Ordner abgelegt (siehe 8.2).
9.5 ItemManager-Klasse
Die ItemManager-Klasse wird erstellt (siehe 4.3) und in der “Hierarchy” auf derselben Ebene wie “Map” erzeugt (siehe 4.1). Sie ist für das Erstellen von Snacks und Jewelry zuständig. Außerdem enthält der ItemManager Methoden, die überprüfen, ob Flocke genügend Snacks und Schmuckstücke besitzt.
9.6 Items erkennen
Die ItemManager-Klasse wird erstellt (siehe 4.3) und in der “Hierarchy” auf derselben Ebene wie “Map” erzeugt (siehe 4.1). Sie ist für das Erstellen der Snacks und Jewelry zuständig. Außerdem enthält der ItemManager Methoden, die überprüfen, ob Flocke genügend Snacks und Schmuckstücke besitzt.
9.7 Items anzeigen
Die im SceneView angezeigten Items werden nach dem Vorbild des Hundefängers erstellt (siehe 8.6). In der “Hierarchy” werden unter dem “Canvas” zwei Game Objekte erzeugt. Anschließend wird das Bild des Futternapfs und des Schmucks als Sprite auf das entsprechende Game Objekt gezogen.
10 Spielen!
Jetzt werden noch die letzten und abschließenden Schritte betrachtet. Danach kann das Spiel auf dem Smartphone gespielt werden.
10.1 Spiel testen
Das Spiel sollte zuerst in Unity getestet werden. Dazu wird (in der Mitte oben) auf den Play-Button gedrückt. Wenn (rote) Fehlermeldungen kommen, sollten die entsprechenden Meldungen überprüft und verbessert werden. Erscheinen keine Fehlermeldungen beim Spielen, kann das Spiel gebuildet werden.
10.2 Build Settings
Die Build Settings stehen in Unity unter “File” (oben links), “Build Settings”. Über “Add Open Scenes” werden alle Szenen hinzugefügt. Bei der Plattform wird “Android” ausgewählt und danach auf “Switch Platform” (unten rechts) geklickt.
10.3 Player Settings
In den “Player Settings” (unten links) wird der Name des Spiels “Flockes Labyrinth” und ein Icon hinzugefügt. Bei “Resolution and Presentation” wird unter “Allowed Orientation for Auto Rotation” nur Landscape (Left and Right) angekreuzt.
10.4 Spiel builden
In den “Build Settings” wird bei “Run Device” “All compatible Devices” ausgewählt. Danach wird (unten rechts) auf “Build” geklickt und ein Speicherort ausgesucht.
10.5 Spiel auf Handy testen
Das Spiel wurde in einer APK-Datei (Android Package) gespeichert. Sie muss nur noch auf das Smartphone gezogen und installiert werden.
10.6 Spielen!
Nun kann das Spiel Flockes Labyrinth in der Freizeit gespielt werden. Das Studio Merkas Team wünscht viel Spaß dabei!
Fragen & Wünsche
Wir hoffen, dass Dir unser Artikel gefällt und möchten Dich dazu einladen, uns Deine Gedanken und Fragen zu dem Thema mitzuteilen. Wenn Du Fragen, Kommentare oder Feedback zum Inhalt dieses Artikels hast, zögere bitte nicht, uns auch diese im Kommentarbereich anzuvertrauen. Wir freuen uns immer, von unseren Lesern zu hören und uns an sinnvollen Diskussionen über die Spieleentwicklung zu beteiligen.
Frage uns einfach alles was Du wissen willst und wir werden unser Bestes tun, um die Antworten zu geben, nach denen Du suchst. Vielen Dank für Deine Unterstützung und wir freuen uns darauf, von Dir zu hören!
Kommentar Formular
Kommentare
Comments
No Comments
Weitere spannende Beiträge
Ein Überblick über Virtual Reality Attraktionen
VR-Attraktionen sind spezielle Einrichtungen, in denen Besucher fesselnde Virtual-Reality-Erfahrungen machen können. In diesem Artikel konzentrieren…
Ein Überblick über Fighting Games
Dieser Artikel soll den Begriff Fighting Game erklären und einige Beispiele von bekannten Fighting Games aufzählen.
Write comment