Idee und Umsetzung
Im letzten Semester hatte ich das Glück, ein Semester an der KEA - Copenhagen School of Design and Technology studieren zu dürfen. Dort habe ich das Wahlfach “Casual Games” besucht, welches mir anfänglich viel Ärger, nach einer gewissen Zeit immer mehr Freude bereitet hat. Das Ziel des Kurses war es, mithilfe von “CreateJS” einfache Web Games selbst zu programmieren.
Anfänglich habe ich während dem Kurs “Casual Games” realisieren müssen, dass ich meine vergessenen Basiskenntniss in HTML5, CSS und JavaScript unbedingt wieder auffrischen musste, um dem Unterricht folgen zu können. Nachdem ich mich überwunden hatte, die Materie aufzuarbeiten, ging es bergauf und ich ging der Aufgabe nach, mein eigenes Spiel zu konzipieren.
Ohne mir genügend Gedanken zu Logik und Umsetzbarkeit zu machen, habe ich mich kurzerhand dazu entschlossen, ein Spiel zu bauen, dass die gleiche Funktionaliät wie “Snake” hat. Ein Fehler! Bald hat sich nämlich herausgestellt, dass ich doch besser mit einem noch einfacheren Spiel hätte anfangen sollen. So kam mir die Idee für «Le Cordon Rouge», dessen Konzept ich von Anfang an simpel gehalten und klar durchdacht habe. Die Umsetzung dieses Spiels hat mir sehr geholfen, da ich dadurch mit CreateJS üben und dazulernen konnte. Ich möchte nun in dieser Kritik nicht genauer auf das erste Spiel, sondern ausschliesslich auf die Umsetzung von “Plantasia” eingehen, da dies meiner Meinung nach das besser gelungene und auch das komplexere Projekt war, das mehr Zeit in Anspruch genommen hat.
Konzept
Nach dem ich das erste Spiel “Le Cordon Rouge” umgesetzt hatte, war ich motiviert, eingearbeitet mit CreateJS und wollte ein grösseres Projekt umsetzen. Es war aber gar nicht so leicht, eine neue Idee zu entwickeln. Ich suchte nach Inspiration und fand sie hier: “Dumb Ways to Die”. Dieses YouTube Video enstand aus einer Sicherheitskampagne der Metro Trains in Melbourne, Australien. Diese wurde lanciert um Unfälle zu verhindern, bei denen Menschen zu nahe am Bahnsteigrand stehen und durch den Sog durchfahrender Züge in den Tod gerissen werden.
Im Jahr 2013 wurde im Rahmen dieser Kampagne eine Mobile App mit 15 verschiedenen Minispielen veröffentlicht. Als ich davon las, habe ich die App heruntergeladen und installiert. Sofort haben mich die unterschiedlichen, humorvoll inszenierten Spiele mit übergeordneter Geschichte gepackt. Sie sind im ersten Moment einfach zu bewältigen. Die Schwierigkeit der Spiele besteht aber darin, dass diese sich nie in gleicher Reihenfolge abspielen und dass der Zeitrahmen, den der Spieler zur Verfügung hat, stetig kleiner wird. Von diesem Konzept war ich begeistert und entwarf meine eigene Version davon: “Plantasia”.
Zielsetzung
Ich wollte mit diesem Projekt, ausserhalb des obligatorischen Unterrichts meine Web -Programmierkenntnisse in HTML, CSS und JavaScript verbessern und das Programm Adobe Illustrator zum Erstellen von Grafiken besser kennenlernen. Aus diesen Zielen resultierte die Idee ein Online Game zu kreieren, das aus vier MiniGames besteht und am Schluss ein in sich abgeschlossenes Spiel, mit einer einheitlichen Designsprache und einer übergeordneten Geschichte werden sollte.
Vor der Programmierung
- Die übergeordnete Geschichte und Kontext ausdenken: Heidi und Peter sind Bauern und leben auf ihrer grossen, grünen Farm “Plantasia”. Die Mini Games sollten verschiedene Tätigkeiten ihres Alltags abbilden. Jedes MiniGame soll aus einer einzigen Aufgabe bestehen, in die entweder Heidi oder Peter oder beide gemeinsam involviert sind.
- Als erstes habe ich die Logik der einzelnen MiniGames klar notiert und durchdacht, sodass ich vor der Umsetzung sicherstellen konnte, dass ich auch alle meine Ideen umsetzen kann.
- Im nächsten Schritt habe ich die Programmierumgebung aufgesetzt und eine klare Ordnerstruktur definiert.
- Was brauche ich? Welche png’s, welche jpg’s, welche Musik für welche Interaktion, wie soll der Canvas aussehen, brauche ich verschiedene Hintergundbilder? Alle diese Fragen musste ich mir stellen und mit deren Hilfe habe ich eine Liste mit benötigtem Material erstellt.
- Grafiken erstellen: Fast alle davon habe ich selbständig mit Adobe Illustrator erstellt, weil ich dieses Programm besser kennenlernen und einen einheitlichen grafischen Stil des ganzen Spiels garantieren wollte.
Während der Umsetzung
Obwohl ich versucht habe, die Schritte minutiös vorauszuplanen und alles benötigte Material bereitzustellen, ging der Prozss leider nicht immer reibungslos voran. Ich musste auch während der Programmierung immer wieder neue Grafiken erstellen, weil etwas fehlte oder ich einen Schritt im Spiel verändern wollte, ein neues Musikstück suchen und auch Logiklösungen immer wieder neu durchdenken. Ich habe viel Zeit in Foren online verbracht, wenn ein Schritt nicht funktioniert hat und konnte glücklicherweise immer wieder von dem grossen Wissen meines damaligen Lehrers Jonas Holbech profitieren.
Learnings
- Die Logik vor dem Spiel klar durchdenken! Spart Zeit und hilft, Schwierigkeiten vorher zu erkennen und im besten Fall zu eliminieren.
- Skizzen erstellen: Diese helfen um aufkommenden Fragestellungen nachzugehen und ebenfalls Fehler zu vermeiden.
- Pseudo- Code schreiben: Dieser half mir persönlich, als “eher nicht linear denkende” Person, einzelne Schritte der Programmierung nachvollziehen und planen zu können.
- Vom Grossen zum Kleinen: Sobald man mit dem Programmieren beginnt, ist es wichtig immer nur ein Ziel zu verfolgen und die Reihenfolge der Schritte ungefähr im Kopf zu haben. Ansonsten droht die Gefahr, dass man sich verliert.
- Das Spiel regelmässig testen lassen: Im Endeffekt bin ich zufrieden mit den Spielen, denke aber, dass ich noch mehr hätte optimieren können, wenn ich User-Testings durchgeführt hätte (z.B das Timing von Plantasia).
- Wenn man sich vornimmt, mit einer noch unbekannten Code-Bibliotheck zu arbeiten, ist es von Vorteil, sich genügend Zeit für die Einarbeitung zu nehmen. Den Start mit einem kleinen, simplen Projekt, wie ich es mit “Le Cordon Rouge” gemacht habe, hat sich als sehr hilfreich entpuppt.
Fazit
Studenten wie ich, die sich nicht auf Anhieb für die Web-Programmierung begeistern können, gerne aber mehr davon verstehen möchten, kann ich ein solches Projekt nur weiterempfehlen. Für mich war es sehr hilfreich, da ich gelernt habe, mit einem klaren Ziel mit Code zu experimentieren. Die Logik habe ich durch den spielerisches, visuellen Output sehr viel schneller begriffen, als das bisher mit gewöhnlichen Webseiteninhalten der Fall war. Ich habe viel Zeit, Geduld und besonders Nerven gebraucht, aber die Arbeit hat sich im Nachhinein gelohnt. Nicht wegen der Resultate, denn ich finde die Spiele immernoch sehr ausbaufähig, aber der Lerneffeckt war für mich sehr hoch.
