Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Little Hachiko

Kleiner Freund, der sich in der großen Stadt an der Küste wiederfindet. Aber sowas muss erstmal entstehen.

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.

Game_Boy_Advance_-_Pokemon_Fire_Red_Leaf_Green_-_Attack_Effects_-_Cpia_-_Cpia.pngGame_Boy_Advance_-_Pokemon_Fire_Red_Leaf_Green_-_Attack_Effects_-_Cpia_-_Cpia.png
pokemon-ruby-screenshot-3.jpgpokemon-ruby-screenshot-3.jpg

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.pngBildschirmfoto 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.

Bildschirmfoto 2022-08-17 um 00.55.44.pngBildschirmfoto 2022-08-17 um 00.55.44.png
map.pngmap.png

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.

down.pngdown.png
left.pngleft.png
right.pngright.png
up.pngup.png

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.pngoverlay.png

Das Ergebnis

Der Code

Das Canvas Setup

Bildschirmfoto 2022-08-31 um 23.25.41.pngBildschirmfoto 2022-08-31 um 23.25.41.png

Die Klassen

Bildschirmfoto 2022-08-31 um 23.25.16.pngBildschirmfoto 2022-08-31 um 23.25.16.png

Index.js

Bildschirmfoto 2022-08-31 um 23.26.14.pngBildschirmfoto 2022-08-31 um 23.26.14.png
Bildschirmfoto 2022-08-31 um 23.28.29.pngBildschirmfoto 2022-08-31 um 23.28.29.png
Bildschirmfoto 2022-08-31 um 23.30.09.pngBildschirmfoto 2022-08-31 um 23.30.09.png
Bildschirmfoto 2022-08-31 um 23.31.08.pngBildschirmfoto 2022-08-31 um 23.31.08.png
Bildschirmfoto 2022-08-31 um 23.31.45.pngBildschirmfoto 2022-08-31 um 23.31.45.png

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.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuer_in

foto: Prof. Dr. Sebastian Meier

Zugehöriger Workspace

Parametric Design

Entstehungszeitraum

Sommersemester 2022