Wie wird ein HTML5 Spiel entwickelt

Ein Space Ritter auf deinem Raumschiff fordert dich auf, zu spielen und sobald du dich dafür entscheidest, sitzt du auch schon am Steuer eines Raumschiffes und mit Projektilen an Board greifst du deine zahlreichen Feinde an. So beginnt das neue HTML5 Spiel von Spritted, welches War Games: Space Dementia heißt. „Die Idee kam uns, als wir ein Arcade Action Spiel machen wollten. Robotron 2084 ist cool; es ist einfach und lustig, also habe ich mich davon inspirieren lassen“, erklärt Eduardo Ortega, Chef des Spritted Projektes. Er und sein Team wollen einige der Geheimnisse lüften, die der Entwurf eines Videospieles verbirgt.

Eduardo beschreibt sich selbst als “leidenschaftlichen Fan von Videospielen, dem das einfache Gameplay der klassischen Spiele gefällt“. Er hatte die Idee, War Games: Space Dementia als ein “einfaches waerable Arcade Spiel“ zu machen. Der erste Schritt im Kreativprozess eines Videospieles ist es, eine Idee zu haben und sobald dies entschieden ist, wird festgelegt, worum es im Spiel gehen soll. Um dem Spiel Leben einzuhauchen, versammelt sich das Team und macht einen Plan.  

„Sobald klar ist, welche Art Spiel wir wollen, versammeln wir uns und skizzieren eine allgemeine Idee, worum es im Spiel gehe soll“, erklärt Ortega. Er arbeitet mit einem Programmiere und einem Designer zusammen. Letzterer entwickelt ein Schema für die Benutzeroberfläche, also das Menü, die Buttons und den Übergang der Bildschirme. Er kümmert sich auch um die Nutzererfahrung, wobei es darum geht, „den Flow zwischen den Bildschirme und Ereignisse intuitiv und nutzerfreundlich zu gestalten“, so Ortega. Die eigentliche Entwicklung des Spieles, also der Screens, Feinde, Items etc. entstammt einer allgemeinen Idee. Sobald der Designer all dies skizziert und es dem Projektleiter vorstellt, setzt sich dieser gleiche an die Arbeit: der Entwurf des Designers und die ersten Programmierungscodes.

Leidenschaft und Inspiration, Musen des Videospieldesigns.

Daniel Peña ist Verantwortlicher für die Charaktere und die physische Form im Spiel. Der Spritted Designer arbeitete zuvor in Werbeagenturen, doch seine Leidenschaft für Videospiele brachte ihn schließlich auf den Weg des Designers. Der junge Mann aus Valladolid erzählt, dass ihm die Idee War Games: Space Dementia zu designen kam, als er ‘Avalon’ von Roxy Music aus den 1980ern hörte. Mit dieser Inspiration und dem Einverständnis Ortegas, entschied er, die Story um King Arthurs Legende und die Ritter der Tafelrunde zu kreieren.

Eigentlich war als Titel Defenders of AVA angedacht, doch man wollte Verwechslungen mit der schwedischen Popgruppe ABBA vermeiden, weshalb der Name zu Knights of Space geändert wurde. „Der Titel Knights of Space war eine kleine Hommage an die Wächter der Galaxie von Marvel”, erklärt Peña, der gesteht, das Logo mit einem kleinen Augenzwinkern designt zu haben.

Der Designprozess ist überraschenderweise relativ klassisch. Daniel braucht nur Papier und Bleistift, um seine Skizzen anzufertigen und sobald die Idee fertig ist, wird das Ergebnis eingescannt und an Illustrator gesendet. Diese Adobe Programm ermöglicht es, seine Illustrationen zu digitalisieren. In diesem Fall drehen sich diese Zeichnungen rund um die Arthur Legende, um noch einmal daran zu erinnern. „K1-ARZ an Board seines Raumschiffes XK-Libur muss die 3 Sektoren um KM-LOT verteidigen“; so beschreibt Peña die Storyline von War Games: Space Dementia und erklärt, dass K1-ARZ die galaktische Version von King Arthur ist.

Er verrät auch, dass ihm die Idee für die ästhetische Inspiration kam, als er die Arbeit des Illustrators und Vater von Hellboy, Mike Mignola, und dessen charakteristisch kontrastreichen Farbtöne, die wenigen Farben und die Vielecke sah, mit denen er arbeitet. Außerdem spielten klassische Arcade Spiele der 80er Jahre, wie Tron, Asteroids oder R-Type eine Rolle.

Die Programmierung, das Skelett eines Videospieles.

Im Fokus auf seine Leidenschaft für die einfache Spielbarkeit, erzählte Ortega dem Programmierer von seiner Idee, ein einfaches Survival Videospiel mit nur einem Screen, zu entwickeln. David Santín erzählt, dass er Videospiele designt, seit er 11 Jahre alt ist und dass er nun der Programmierer der Spritted Videospiele ist. Seine Leidenschaft wuchs 1986 mit dem Spiel Phantomas, was von einem Spanier programmiert wurde. „Nachdem ich dieses Spiel gespielt habe, entschied ich, dass wenn das einer kann, dann kann ich das auch“, erinnerte sich David, dessen Programmierer Nickname ebenfalls Phantomas ist, als Hommage an das Spiel sozusagen. Als der Projektleiter diesen jungen Madrilenen damit beauftragte, ein Spiel zu entwickeln, das auf Robotron 2084 basierte, kam ihm sofort Smash TV in den Sinn.

David hat dieser Arcade Klassiker und Nachfolger von Robotron 2084 schon immer gut gefallen und deshalb entschied er, für die Entwicklung von War Games: Space Dementia der Dynamik von Smash TV zu folgen. Robtron erschien 1982 und Ziel des Spieles war es, die Roboter auszulöschen, die sich im Jahr 2084 gegen die Menschen auflehnten und die Überlebenden zu retten. Später, 1990, wurde Smash TV entwickelt, welches dasselbe Ziel hatte: ein Teilnehmer eines Fernsehprogramms muss seine Angreifer töten und „Power Ups“ sammeln.

„Wir haben uns für ein Raumschiffspiel entschieden, da die Entwicklung einfacher war“, erklärt David. Da es sich um ein Spiel aus der Zenitperspektive handelt, ist es einfacher ein Raumschiff von oben zu bauen, als einen Menschen zu erschaffen. David erklärt, dass die Bewegungen der Charaktere in einem Videospiel dem ähneln, „wenn du eine Zeichnung in einer Buchecke machst und die Seiten schnell zuschlägst, jede Seite ist ein Sprite“. Was sich „Sprite“ nennt, ist in der Cinematrogafie ein Standbild.

Im Fall von War Games: Space Dementia, wurde das Spiel von Anfang an in Zenitperspektive erschaffen und weshalb man sich für die Raumschiffe entschied, um die 8 verschiedenen Stellungen zu vermeiden, die für die Bewegung einer Person benötigt werden: von vorn, von hinten, von der Seite, etc. „Wenn du einen Panzer oder einen Flieger machst, musst du nur einen Sprite machen, da diese keinen Kopf haben“, erzählt uns David. Acht Stellungen, die achtmal mehr Zeit beanspruchen, zum Programmieren – da jede Bewegung einen Code benötigt – und zum Designen.

David programmiert entsprechend der Designs, die er von Daniel erhält. Sie arbeiten Hand in Hand und treffen Entscheidungen zusammen, auch wenn David jedem Objekt eine künstliche Intelligenz überträgt, also eine spezielle Verhaltensweise. „Jede Art Raumschiffe hat ein einzigartiges Verhalten und Intelligenz. Die der ersten Levels sind langsam und etwas ungeschickt in der Bewegung. Die des letzten Levels dagegen, sind fast fehlerfrei und können dir in der Gruppe folgen und dich überholen“, sagt Santín.

Dank der Variablen, die das Universum formen, können sie jedem Objekt im Spiel einzigartiger Geschwindigkeit und Verhalten geben und laut Santín “einige dieser Variablen sind Geschwindigkeit, Reaktionsgeschwindigkeit, Schuss- und Lebensfähigkeit und die Fähigkeit, zu folgen und zu drehen“.

Zweifelsohne, ist eine der Schwierigkeiten, mit denen sich David im Entwicklungsprozess von War Games: Space Dementia konfrontieren musste, eine hohe Leistungsfähigkeit trotz der Bewegung der Raumschiffe, Projektile, Charaktere etc. zu garantieren. „Es ist schwierig, auf dem Markt HTML5 Spiele zu finden, die es schaffen, so viele Objekte bei so hoher Leistungsfähigkeit simultan zu bewegen“, fasst David zusammen.

HTML5, eine universelle Sprache?

Santín erklärt, dass “HTML5 zu programmieren, eine ziemlich schwierige Angelegenheit ist, vor allem auf die Leistungsfähigkeit bezogen“. Die Muttersprache ist der eigene Prozessor, wobei jeder einen eigenen hat; Apple, Android, etc. „Wenn du eine App im seinem ursprünglichen Code programmierst, ist es, als würdest du es in der Sprache des Gerätes programmieren, weshalb du nichts „übersetzen“ musst und das ist ziemlich schnell.“

HTML ist deshalb eine verständliche Sprache für alle, ist aber nicht ursprünglich und wird deshalb nicht effizient sein. „Es müsste eine gemeinsame Sprache benutzt werden, die später jedes Gerät in seiner Sprache interpretiert“, erzählt David.

Aus diesem Grund braucht der Programmierer besondere Eindringlichkeit im Herstellen effizienter Codes, da das Spiel auf verschiedenen Geräten gespielt werden wird, von Computern, bis Handys mit langsamen Verbindungen. HTML5 wird sich nicht auf einem Gerät, wie auf einem andern verhalten, weshalb viele Tests gebraucht werden, um ein zufriedenstellendes Endergebnis zu bekommen.

Beim Spielen mit dem Handy hat man, dank der Dual Joystick Dynamik tatsächlich das Gefühl, mit einem Raumschiff zu fliegen. Besagte Dynamik ist ein Merkmal von Robotron 2084 und Smash TV. Dank dass Phaser, dem Framework, das David benutzt, um die Spiele zu programmieren, gerade das Plug in herausbrachte, konnte der Plug in einfach in das Spiel integriert werden, ohne es von null neu zu programmieren.

“Phaser ist ein Framework, das ein Set aus Programmierungsstrukturen, die sich jedliche Art von Problemlösung auf die fokussieren. Phaser ist auf die Entwicklung von Videospielen spezialisiert“, erklärte Santín. Es kümmert sich darum die Sprites zu veralten, die Sounds einzufügen, es hat Tools zur Entwicklung von Spielen und ist vor allem auf eine hohe Leistungsfähigkeit fokussiert.

Abgesehen davon, dass es die ursprüngliche Idee von Eduardo Ortega war, ein einfaches Survival Spiel in nur einem Screen zu erschaffen - mit dem so du solange spielen könntest, bis du tatsächlich verlierst- war das Ergebnis relativ unterschiedlich. Wenn man das Potential des Spiels sieht und die Zeit, die es in Anspruch nimmt (im Sommer sollte es soweit sein), gingen seine Entwickler einen Schritt weiter und entwickelten ein HTML5 Spiel, weitaus besser entwickelt und hoch detaillierter. Ein Raumschiffspiel unterteilt sich in drei Gebiete, in denen die Hauptfiguren fünf verschiedenen Typen von Feinden gegenübertreten müssen, die auf verschiedene Art und Weise angreifen, wobei die schließlich das Monster besiegen müssen. Es ist die Magie der Videospiele und ihre Entwicklungsmechanik.

Artikel geschrieben von: Paula Gil Alonso.