HappyBaby – der Babymanager als PWA

08.08.2021

von

Inhaltsverzeichnis

Eines unserer neuesten Spiele ist das Drag and Drop Spiel „HappyBaby“. Der User nimmt die Rolle eines Elternteils ein, welches mit der Zeit immer mehr Babies bekommt und sich um diese kümmern muss, indem es auf die Bedürfnisse der Babies mit den richtigen Gegenständen antwortet (zb. Hunger -> Flasche). Man gewinnt, indem man genügend Punkte sammelt bis die Zeit abgelaufen ist, was bei der Menge an Babies gar nicht so einfach ist.

Das Spiel wurde mit der JavaScript-basierten Engine Phaser als PWA (Progressive Web App) umgesetzt. Der Kunde kann über ein Backend jederzeit selbständig diverse Grafiken, Animationen und Texte ändern, um das Spiel ohne unsere Unterstützung anzupassen. Eine Oster- oder Weihnachtsversion ist dadurch mit keinem weiteren programmiertechnischen Aufwand verbunden.

Phaser – The Fast and the Physics

Sogenannte „Game Engines“ wie Phaser sind überaus sinnvoll, um sich nicht lange mit fundamentalem Kleinkram wie Physik aufhalten zu müssen.

Phaser ist ein speziell für Spiele entwickeltes JavaScript Framework, welches häufig verwendete Elemente wie verschiedene Physik Simulationen, Audio- und Inputmanagement, Partikeleffekte, Kamerasteuerung und Skalierung bietet. Die Engine wird seit Jahren aktiv weiterentwickelt und hat viel Potential in der 2D Spieleentwicklung. Durch Phaser können wir schneller beginnen am eigentlichen Spiel zu arbeiten – und wesentlich mehr in der gleichen Zeit erreichen.

Vielen Dank für die eingesparte Zeit, Dr. Phaser!

PWA – Progressive Web App

Sieht aus wie eine native Smartphone App, verhält sich wie eine native Smartphone App – ist aber keine.

Das HappyBaby Spiel ist eine sogenannte “Progressive Web App”, also eine ganz normale Web Applikation, die durch “Hinzufügen zum Startbildschirm” am Smartphone quasi zu einer vollwertigen App wird und einige Vorteile für User, Betreiber und auch Programmierer bringt:

Es wird HTML/CSS/JS verwendet, d.h. man muss sich nicht mit Swift/Objective-C oder Java bemühen. Dadurch erspart man sich Programmierarbeit, sowie das übliche Packaging und Review Prozesse der App Plattformen.
In den gängigen Mobilen Browsern erscheint eine Mitteilung, welche den User dazu auffordert die PWA hinzuzufügen. Das wird in der Regel schneller gemacht als eine native App aus dem App Store zu installieren, wobei die Kundenbindung trotzdem ähnlich hoch ausfällt. Im Prinzip handelt es sich um nichts Anderes als eine Verknüpfung zu einer Website. Danach ist die App in der Regel nicht (bzw. schwer) von einer nativ installierten zu unterscheiden.
PWAs können ohne Installation offline verwendet werden, dank sogenannter „Service Workers„.
Die Darstellung kann komplett rahmenlos (fullscreen) und vom Browserfenster losgelöst erfolgen. Falls notwendig kann sogar die Bildschirmausrichtung gesperrt werden.

Mehrsprachige Apps und Fonts

Unser Spiel wurde mittlerweile in 20 unterschiedliche Länder veröffentlicht, mit bis dato mehr als 27.000 Teilnahmen beim Gewinnspiel. Viele Länder bedeuten jedoch auch viele Sprachen, und viele Sprachen heißt viele unterschiedliche Zeichen und Symbole. Falls eine spezielle CI Schriftart verwendet werden soll, kann das schnell zu einem Problem werden. Nicht jede Schriftart unterstützt spezielle Zeichen, welche in anderen Ländern verwendet werden. Bei Canvas-Spielen muss ausserdem jede Schriftart vorgeladen werden, die simple Definition per CSS reicht nicht aus. Eine sinnvolle Variante dafür ist der Web Font Loader.

Aber wir wären nicht LIMESODA, hätten wir keine Lösungen für solche Probleme. Grundsätzlich gilt es Texte so gut es geht zu vermeiden, weniger Texte = weniger Sprachprobleme. Wenn möglich werden Icons, Zeichen, Grafiken und Animationen verwendet um Inhalte darzustellen. Für Fließtexte werden Fallbackschriften eingesetzt. Bekannte Einzelbegriffe wie “Menu”, “Play” oder “Start”, welche häufig auch nur als Grafiken zur Verfügung stehen, werden wenn möglich nicht übersetzt.