Übungen

Um vertraut mit p5.js und den Möglichkeiten, welche die Bibliotek mit sich bringt, zu werden, sollten wir Skizzen (mal eigene, mal die der anderen Kursteilnehmern) mit Code umsetzten. In der nachfolgenden Gallerie meine Ergebnisse...

Schwierigkeiten die auftraten.. 

• Aufeinander abstimmen der Winkelangaben der Kreisbögen
• die richtigen Angaben für Start und Ziel in einer for-Schleife für parallele Linien
• die Krümmung der Kurve (Kreisbogen oder Kurven-Funktion verwenden)

Weitere Übungen

Nun wurde es schwieriger es sollten nicht mehr nur ein Bild erstellt werden sondern einmal ein parametrisiertes Regal oder Layout und dann etwas, das sich über Zeit verändert.

Auch hier traten wieder Schwierigkeit auf, die einen eine Zeit lang verzweifeln lassen haben….

• Beim Regal war die größte Schwierigkeit eine maximal Höhe für das gesamte Regal zu definieren in dem drei Teilhöhen vorkommen. 
• Bei der „bouncing“ Pfote wollte ich eigentlich, dass die Pfote in die Richtung zeigt, in die sie sich bewegt, aber irgendwie hat es nicht funktioniert

Projekt

→ Konzept

Ich tat mich schwer eine Idee fürs Projekt zu finden. Gerne hätte ich etwas Dreidimensionales erstellt, aber hatte keine konkrete Idee.

Nach dem ich Carlas Pac-Man Spiel gesehen hatte, entstand und festigte sich die Idee ein kleines Spiel als Abschlussprojekt zu programmieren.  

Die Frage war nur, was für eins… schlussendlich entschied ich mich für ein Platformer.

→ Prozess

Zu Beginn hab ich mir Gedanken gemacht, was ich alles im Spiel haben möchte bzw. brauche und erstellte daraus eine Liste.

Nach und nach arbeitete ich dann die einzelnen Bausteine ab..

1| Spielermechanik

→ Bewegung durch Tasteneingabe

→ Schwerkraft + Springen

Alles hat angefangen mit einem schwarzen 400x400px großen Canvas und einem Rechteck in lightgreen. Ich programmierte, dass man sowohl mit WASD als auch mit den Pfeiltasten das Rechteck in alle vier Richtungen steuern kann. Im Zuge der Programmierung der Schwerkraft erstellte ich eine Spieler-Klasse. Das hatte zur Folge, dass die Steuerung überarbeitet werden musste. 

2| Gegnermechanik

→ automatisches hin und her „laufen“

Neben der Spieler-Klasse erstellte ich nun eine fast identische Gegner-Klasse. Der Unterschied lag allein in der Bewegungs-Funktion. Die Funktion ist wie, wenn man den Bouncing-Effekt programmiert: Ist ein max bzw. min erreicht ändert man das Vorzeichen der Bewegungsschritte.

3| Level Erstellung

→ Levelaussehen

→ Kollisionserkennung

Die Levelerstellung hat mir am meisten Schwierigkeiten gemacht. Zu erst hab ich es nicht hinbekommen eine Funktion zu schreiben, die das Array ausliest und die Blöcke zeichnet. Und dann hatte ich die Schwierigkeit eine passene Kollisionserkennung zu finden und anzuweden.

4| Itemmechanik

→ Item Erstellung

→ Einsammeln

Das Programmieren der verschiedenen Items (Münze, Schlüssel, Portal (aktiv & inaktive), (Spieler & Gegner)) war super, wenn man gerade mal wieder nicht weiter kam mit den Mechaniken des Spiels. In meinem Spiel hab ich zwei Arten des „Einsammels“ eingebaut. Bei der einfachen Art wird das Item transparent gemacht, sodass man glaubt, es ist nicht mehr da. Für die Andere braucht man ein leeres Array, in das man über .push die Items hinzufügt und durch .splice die Items entfernt. Bei der Zweiten Variante sind die Items wirklich von der Spielfläche entfernt.

→ Ressourcen

https://parametric-design.fh-potsdam.de/

https://p5js.org/reference/

----------------------------------------------------------------------

https://www.youtube.com/watch?v=MA_aFQV9vss

 (2:55-3:52) -> für Spielerbewegung trotz „Class“

https://www.youtube.com/watch?v=Lcdc2v-9PjA

 (23:00-32:25) -> für Schwerkraft

https://www.youtube.com/watch?v=a1fEbc0R1RA

 (7:22-7:42) -> Level aus Blöcken, die durch Punkte definiert sind

https://github.com/pothonprogramming/pothonprogramming.github.io/blob/master/content/tile-types/tile-types.js

-> für die Kollisionserkennung

→ Skizzen

→ Ergebnisse

Spielbar auf dem Laptop → Aneye

Fazit

Ich hab viel gelernt und bin oft verzweifelt. Ich merkte, dass die Schwierigkeit nicht unbedingt darin besteht, eine Lösung für ein Problem zu finden, denn es gibt meist mehrere für ein und dasselbe Problem, sondern die Übersetzung der Lösung ins eigene Projekt.

Den ganzen Prozess hätte ich mir einfacher machen können, indem ich Bibliotheken, wie p5.play oder p5.collide2D genutzt hätte. Jedoch hab ich mich dagegen entschieden, weil ich wissen wollte, was wie funktioniert, was ich da programmiere. Im Prozess geholfen hat die Aufteilung des Codes auf mehrere Dateien, denn so hatte ich stets den Überblick, wo ich was finde.

Beim letzten Kurstermin 18.01.23 war vieles noch nicht so, wie ich es gerne hätte. Der Spieler läuft nicht im Spielfeld, Items können nicht eingesammelt werden und Gegner nicht besiegt werden. Es war/ist noch viel zu überarbeiten.

Immer mal wieder hab ich mich in den kleinen Details verloren, anstatt mich mit dem Wesentlichen auseinander zu setzen, dem, mit dem ich nicht weiter kam. Jedoch gab es auch Tage, an denen ich sehr unproduktiv war, weil ich eben nicht an irgendwelchen Extras gearbeitet habe.

Im Grunde hab ich nicht nur ein kleines Spiel programmiert (wie es das Erscheinungsbild zeigt), sondern eine einfache Spiel-Engine. Jedoch fehlt noch ein Baustein, um sie komplett zu haben, nämlich der Screenwechsel (für z. B. Level zu Level).

Selbst mit unendlich viel Zeit und täglichem arbeiten am Projekt, werde ich nie fertig werden. Es gibt immer etwas zu überarbeiten.

Dennoch, wenn ich die Zeit dafür finde, möchte ich den letzten Baustein der Engine programmieren, sowie Kleinigkeiten wie Hintergrundmusik hinzufügen und den Figuren ihr Aussehen geben. Vielleicht das Ganze auch etwas abwandeln, dass man es auch auf dem Handy spielen kann…. wer weiß, was die Zukunft bringt.

Update

Ein Jahr später hat das kleine Spiel endlich sein Aussehen bekommen. Ein paar keine Änderungen wurden auch getätigt, wie zum Beispiel die Größe der Münzen angepasst.

Der Screenwechsel ist noch in Arbeit. Des Weiteren muss das Springen überarbeitet werden, da der Spieler durch Blöcke springt. Und, wenn der Screenwechsel funktioniert, dass der Spieler sterben kann, wenn er in einen Gegner läuft.

Spielbar auf dem Laptop → Aneye