[Tutorialreihe] Dein erstes Spiel mit Game Maker Studio 2 - Beispiel: Onna Gokoro

[Schotti]

Lektion 3: Transition - Part I!

In der letzten Lektion haben wir unseren Titelbildschirm gebastelt und einen Cursor implementiert, der sich mit den Pfeiltasten steuern lässt. Sehr gut! Heute werden wir uns an einen Bildschirmübergang setzen, der richtig schön retro ist! Wir lernen:

• Import von animierten Sprites
• Steuerung der Animation
• Der Einsatz von Grids

Auf gehts! Als erstes erstellen wir einen animierten Sprite. Dieser Spritestrip besteht aus 11 Sprites mit einer Größe von 16x16 Pixel. Ziel der Animation ist es, aus einem transparentem 16x16 Sprite ein komplett schwarz gefülltes 16x16 Sprite werden zu lassen. In welcher Art und Weise oder Form ihr dies tut, ist euch selber überlassen. In diesem Beispiel ist es eine Kreisform, in SANTRIA nutze ich z.B. einen Rhombus. Eurer Kreativität ist keine Grenze gesetzt! Fügt die einzelnen Sprites anschließend in folgender Weise zu einer png aneinander:



Als nächstes importieren wir dieses File. Wir fügen es wie immer per Drag n Drop in den Sprite-Ordner des Ressourcenbaums. Folgendes Fenster erscheint:


Wir klicken nun doppelt auf das Vorschaubild des Sprites (neben dem großen Plus), um den Image-Editor des GMS2 zu öffnen. Über den Reiter Image -> Convert to Frames können wir unser Bild nun zuschneiden und GMS2 beibringen, wieviele und wie groß die Einzelbilder für die Animation sind. Fancy! Füllt das Fenster nun mit den nötigen Daten aus:



Wir haben 11 Einzelbilder, die 16x16 groß sind. Soweit so gut! Fertig ist unser animierter Sprite mit dem Namen spr_transition. Herzlichen Glückwunsch, du weißt nun, wie man Animationen einpflegt! Nun wollen wir diese Sprites gleichmäßig über unseren Bildschirm verteilen und ihre Animation abspielen lassen. Lasst uns erstmal ein Objekt mit dem Namen obj_transition_controller erstellen und folgende Code-Zeilen in das Create-Event schreiben:



Folgende Überlegungen stecken hinter diesem Code:
Wir speichern die Pixel-Höhe und Pixel-Breite unseres Spielbildschirms in die Variablen resolution_x und resolution_y. Wie ihr aus den Daten sehen könnt, hat unser Spielfeld die Größe 320x240. Anschließend speichern wir die Größe unseres Transition-Sprites, welches praktischerweise 16 Pixel hoch und breit ist. gridsize ist damit 16. Der nächste Schritt ist zu bestimmen, wie oft nun unser Sprite in Höhe und Breite auf unseren Bildschirm passt. Wir teilen also unsere Bildschirmbreite durch die Sprite-Breite bzw. die Bildschirmhöhe durch die Sprite-Höhe und stellen fest, dass unser Sprite 20 mal in die Breite und 15 mal in die Höhe passt. Diese Werte sind in heightgrid und widthgrid gespeichert. Warum Grid? Wir teilen nun unseren Bildschirm in Zeilen und Spalten auf, jede Zelle entspricht der Größe unseres Transitionsprites. Nun wollen wir jede Zelle mit einem Objekt füllen, welches unseren Transition-Sprite trägt. Wir könnten nun 20x15 Objekte an die richtige Stelle manuell setzen... oder wir machen es uns einfacher und lassen dies GMS tuen! Dazu nutzen wir zwei verschachtelte for-Schleifen. Die erste for-Schleife ist folgendermaßen aufgebaut:

for (j = 0; j < heightgrid; j++){}

Zuerst wird die Variable j initialisiert und auf 0 gesetzt. Diese Variable nutzen wir, um unsere x-Position auf dem Grid zu zählen. Anschließend wird überprüft, ob die Bedingung noch erfüllt ist, in dem Fall, dass j kleiner ist als die maximale Anzahl an Objekten in x-Richtung, heightgrid. Wenn dies der Fall ist, wird der Code in den geschwungenen Klammern ausgeführt und abschließend das letzte Statement der for-Schleife ausgeführt, j++, gleichbedeutend mit der Erhöhung von j um 1. Was wir mit der for-Schleife bewerkstelligen, ist einmal durch alle Zeilen durchzugehen! Sehr gut. Wir wollen aber nicht nur stumpf die Zeilen durchgehen sondern bei jeder Zeile zuerst die Spalte einmal durcharbeiten, bevor es zur nächsten Zeile geht. Deswegen arbeiten wir mit zwei ineinander verschachtelten for-Schleifen und arbeiten uns durch das Grid. j entspricht also der Zeilenposition und i die Spaltenposition! Das ganze Prozedere kann man sich so vorstellen:



Die Transitionobjekte werden über die Funktion instance_create_layer(x, y, Layer, Objektname); auf den Bildschirm gesetzt. Die nötige x und y-Position wissen wir durch die Variabeln i und j, welche mit der Sprite-Breite bzw. Höhe multipliziert werden. Wir nutzen den default Layer für Objekte, also "Instances". Voila! 300 Objekte werden ins Spiel geworfen, ohne diese mühsam per Hand in den Raum reinzusetzen! Ok, nun wollen wir das eigentliche Transition-Objekt basteln. Erstellt ein Objekt mit dem Namen obj_transition und schreibt folgendes in das Create-Event, nachdem ihr dem Objekt unser Transition-Sprite zugewiesen habt:



Mit image_speed setzen wir fest, wie schnell den einzelnen Frames unserer Animation abgespielt werden. Anschließend lernen wir ein neues Event kennen, das Animation End-Event, welches wir über Add Event und Other hinzufügen. Der Code im Animation End-Event wird einmal abgerufen, wenn die Animation des Sprites, welches dem Objekt zugewiesen ist, durch ist. Hier schreiben wir folgendes rein:



Wir sorgen hier dafür, dass der image_speed auf 0 gesetzt wird, der Sprite also nicht zum nächsten Frame springt und das animieren beendet und setzen fest, dass ab jetzt nur noch image_index = 10; also der letzte Sprite der Animation angezeigt wird (unser Strip hat 11 Bilder und wir zählen von 0, also ist das letzte Bild 10!). Fertig ist das Transition-Objekt. Damit kommen wir nun auch zum letzten Teil des Tutorials. Geht hierfür in das Stepevent des allerersten Objekts, welches ihr erschaffen habt und schreibt folgendes rein (rotes Kästchen):



Über die Entertaste erschaffen wir nun das Controller-Objekt, welches in seinem Create-Event die einzelnen Transition-Objekte an die richtige Position setzt. Diese Objekte spielen ihre Animation einmal ab und bleiben beim letzten Frame ihrer Animation stehen... TOTALE FINSTERNIS auf dem Bildschirm

Das Endergebnis sieht nach Enterdruck wie folgt aus:



Wunderschön! Ich hoffe, ihr habt ein wenig mehr über GMS2 gelernt und hattet Spaß beim Durcharbeiten des Tutorials. In den nächsten Parts lernen wir, wie wir die Objekte zeitversetzt erschaffen und die Transition so umbauen, dass wir wirklich in einen anderen Raum übergehen!

[Stoep]

Hey Schotti, ich habe nun endlich mal etwas Zeit gefunden und mich mit der Hilfe deiner Tutorialreihe ein klein wenig mit dem Game Maker 2 auseinandergesetzt. Bei dem Script im ersten Teil habe ich auch nicht durchgeblickt, weshalb ich die Schatten jetzt nur mit Nagasakis Variante darstelle. Davon abgesehen habe ich aber auch gleich versucht ein bisschen herumzuexperimentieren, da ich so mehr lerne als nur durch simples Nachbauen. Mein bisheriger Stand sieht folglich so aus:

Bis jetzt sind deine Tutorials echt eine riesige Hilfe und ich freue mich schon auf weitere Teile

Gruß
Stoep

[BDraw]

Ich hab gehört, Schottis Tutorial ist voll toll und so und dass er unbedingt weitermachen muss da mein Testprojekt sonst niemals eine steuerbare Figur bekommt