Inspiration

Als eine Person, die im jungen Alter gerne Videospiele gespielt hat, wollte ich in diesem Kurs als Endprojekt etwas Ähnliches replizieren. Also habe ich mich dazu entschieden, eine Art RPG zu bauen, welches auf die simpelsten Funktionen reduziert ist.

Das Programm sollte lediglich in der Lage sein, eine Spielfigur auf einer Map bewegen zu lassen. Die Bewegungen sollen da aufhören, wo sich Objekte befinden.

Prozess

Zunächst habe ich begonnen, eine Map mithilfe von Tilesets zu gestalten. Dazu habe ich mich thematisch für eine Art Küstenstadt entschieden, dessen Preset auf itch.io erhältlich war.

Bildschirmfoto 2022-08-17 um 00.57.10.png

Mit diesem Set habe ich zunächst im Programm „Tiled“ die Map mit ihren verschiedenen Ebenen, welche in der Zukunft angewendet werden, erstellt und diese in mein Dokument reingeladen.

Anschließend habe ich einen Hauptcharakter ausgesucht, der sich dann auf dieser Map bewegen sollte und habe die Frames dann zu einem Spritesheet zusammengelegt. Um diesen bewegen zu lassen, habe ich die jeweiligen Koordinaten der jeweiligen Frames aneinander gereiht, um die Illusion der Bewegung zu kreieren. Diese wurden jeweils für die Bewegungen in die jeweiligen Richtungen angelegt und werden dann aufgerufen, wenn die entsprechende Taste gedrückt wird.

Den Charakter habe ich dann auf der Leinwand zentriert, sprich, dass sich nicht die Figur selbst auf der map bewegt, sondern die Map um den Charakter.

Als letzten Schritt habe ich dann Collisions an den Stellen eingebaut, an denen die Bewegung nicht weitergehen soll, z.B. bei Häusern oder Bäumen. Diese habe ich anhand von einem Overlay und dem dazugehörigen Array festgelegt.

overlay.png

Das Ergebnis

Der Code

Das Canvas Setup

Bildschirmfoto 2022-08-31 um 23.25.41.png

Die Klassen

Bildschirmfoto 2022-08-31 um 23.25.16.png

Index.js

Trial & Error

Die Umsetzung des Projektes hat mir wirklich viel Spaß gemacht, auch wenn es an so manchen Stellen gehackt hat. Manchmal lag es an der Syntax, meistens aber an meiner unregelmäßigen Klammersetzung, aber ich schätze mal, dass ich mit die korrekte Technik mit der Zeit angewöhne.  

Die größte Lehre, die ich mitnehmen konnte ist Trial and Error. Manchmal haben Sachen nicht funktioniert oder es wurden Fehler hervorgerufen, bei denen eigentlich alles funktionieren sollte. Manchmal war die Fehlerbehebung nicht greifbar. Und genau da musste ich mir systematisch nachschauen woran es liegen könnte. Manchmal musste ich ganze Absätze löschen. Werte ändern. Alles zurücksetzen und von da anfangen, wo es noch funktioniert hat. Viel Zeit hat man damit verbracht, zu recherchieren und dabei neue Wege zu entdecken. Das Lernen durch Fehler machen hat mir eine gewissen Selbstsuffizienz gelehrt und gleichzeitig konnte durch Sebastians Unterstützung Techniken mitnehmen, die ich zukünftig auch für mich selbst nutzen kann.