28. November 2023
StartMagazinWie macht man eigentlich ein Spiel? - Teil 3

Wie macht man eigentlich ein Spiel? – Teil 3

In der letzten Woche hatten wir uns mit der Grundidee, dem Konzept und den einzelnen Level beschäftigt bzw. wie das Spiel an sich überhaupt ablaufen soll. In diesem Kapitel geht es nun um die Grafiken, Animationen und wie sich unser Alien überhaupt fortbewegen kann.

Der Player

Da ein Spielercharakter nicht einfach nur stumm in einer Ecke steht müssen wir uns überlegen, welche Aktionen dieser im Spiel ausführen können soll. Das könnte beispielsweise sein:

  • Laufen
  • Stehen bleiben (Idle)
  • Schießen
  • Springen

Grundsätzlich ist es so, dass man für jede dieser Aktionen in 2D-Spielen eine eigene Animation erstellt. Möchte man es gerne etwas aufwändiger betreiben, so erstellt man für das Springen eine Animation, und dann für das Fallen wiederum eine andere. Genauso könnte es sein, dass der Spielercharakter einmal langsam läuft, und dann rennt. Das wären auch hier zwei verschiedene Animationen. Und bleibt der Charakter stehen brauchen wir eine Idle-Animation, bei der sich nur der Brustkorb etwas hebt, um eine Atmung nachzustellen.

Wir wollen es bei unserem Alien aber etwas einfacher halten. Daher beschränken wir uns auf die folgenden Aktionen:

  • Stehen bleiben (Idle)
  • Laufen
  • Springen

Sobald man einen neuen Level erreicht hat läuft das Alien noch nicht gleich los. Es befindet sich erst einmal in einer Idle-Animation. Das Alien wird dann nach Levelstart automatisch loslaufen und dabei nicht wieder anhalten. Daher folgt hier dann die Lauf-Animation. Wenn der Spieler dann einen Sprung ausführt wechselt das Alien zur Sprung-Animation. Und wenn das Alien anschließend wieder “Boden unter den Füßen” hat, geht es zurück zur Lauf-Animation.

Soviel zur Theorie. Wie erstellt man aber nun diese Grafiken?

Auch hier gibt es 2 unterschiedliche Vorgehensweisen:

SpriteSheets

Bei SpriteSheets versucht man die Bewegung eines Charakters Stück für Stück wie in einem Daumenkino abzubilden. Um das zu verdeutlichen hier einmal die Lauf- und Angriffsanimation eines kleinen Drachen:

Für die Laufanimation haben wir hier 16 Bilder erstellt, die in einer Schleife abgespielt werden. Ist das letzte Bild erreicht, startet die Animation wieder beim ersten Bild. So bekommt der Spieler den Eindruck, dass die Figur läuft.

Die Angriffsanimation ist hierbei weniger aufwändig, weshalb wir hier nur 8 Bilder benötigen. Je mehr Bilder man aber in so eine Animation einfügt, desto flüssiger bewegt sich der Charakter dann letztendlich im Spiel.

Die Verwendung von SpriteSheets hat gewisse Vor- aber auch Nachteile. Ein riesiger Vorteil ist, dass man Animationen sehr detailliert gestalten kann. Allerdings kann der Grafikaufwand hierbei enorm groß werden. Möchte man eine Spielfigur z.B. mit einem Helm ausrüsten, müsste man sämtliche Grafiken noch einmal mit einem Helm neu zeichnen. Und kommt dann noch ein Brustpanzer hinzu, benötigen wir einmal die Grafiken komplett ohne Rüstung, dann nur mit Helm, nur mit Brustpanzer und schließlich mit Helm UND Brustpanzer. Du siehst, so ein Vorgehen kann schnell in enorme Arbeit ausarten.

Die andere Möglichkeit, die wir hier stattdessen einsetzen können, ist das Unity3D Animation Framework.

Unity3D Animation-Framework

Das Konzept hinter dem Animation-Framework ist schnell erklärt: Teilen wir unser Alien doch einmal auf. Es hat also einen Kopf, einen Rumpf, 2 Arme und 2 Beine. Und wir brauchen vielleicht noch einen Helm, damit das Alien nicht im Weltraum erstickt :-) Für jedes dieser Elemente erstellen wir nun eine eigene Grafik:

Soweit so gut. Nun erstellen wir in Unity3D das Hauptelement Alien und darunter dann Unterelemente für Kopf, Rumpf, Arm links, Arm rechts, Bein links und Bein rechts. Den Helm bringen wir dann in dem Element Kopf unter.

Und nun weisen wir jedem dieser Elemente die entsprechende Grafik zu.

Nach dem Hinzufügen sehen die Elemente noch etwas durcheinander gewürfelt aus. Deshalb müssen wir die Elemente jetzt händisch in die richtig Grundposition verschieben, damit ein adrettes Alien dabei herauskommt.

Geschafft! Nun haben wir ein Alien, aufgeteilt in einzelne Elemente (auch Objekte genannt). Was man jetzt mit dem Unity3D Animation Framework macht ist, jedes einzelne dieser Elemente zeitgesteuert in der X- und Y-Achse zu verschieben. So erstellt man nun eine Animation Laufen und bestimmt in dieser, wie sich jedes einzelne der Elemente während dieser Animation bewegen soll.

Eine Laufanimation. Auch wenn sie hier noch etwas ruckelig aussieht. Im Spiel läuft diese dann flüssig.

Der große Vorteil bei dieser Vorgehensweise ist, dass man deutlich weniger Grafiken für eine Spielfigur benötigt. Auch wenn man Rüstungsteile oder Waffen hinzufügen möchte erstellt man dazu einfach ein neues Unterelement in dem Alien und fügt diesem die jeweilige Grafik hinzu und erweitert anschließend einfach die Animation.

Der große Nachteil ist allerdings, dass die Figuren weniger detailliert aussehen. Für unser kleines Casual Games mag das aber lange genügen.

Weitere Grafiken

Unser Alien steht jetzt schon einmal in den Startlöchern. Nun brauchen wir aber noch ein paar weitere Grafiken wie Planeten, Sterne und vielleicht noch ein paar Hindernisse, die uns im Laufe des Spiels begegnen. Die Planeten sind schnell gemacht und hierfür brauchen wir auch gar keine Animationen. Genauso wenig für die Sterne.

Durch einfache Kreise, ein paar handgezeichnete Linien sowie einem halbtransparenten Overlay kann man ganz einfach Planeten designen.

Hier sind wir nun auch schon am Ende unseres dritten Teils angelangt. Im nächsten Teil schauen wir uns an, wie man unser Alien zum Laufen bekommt und wie das mit der verflixten Gravitation funktioniert. Das ist nämlich ganz einfach :-)

Andre Zechmeister
Andre Zechmeister
Als Software-Entwickler kümmere ich mich um die eigenen Apps und um das Backend von Android User.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

EMPFEHLUNGEN DER REDAKTION

MAGAZIN

APPS & SPIELE