Feb. 21, 2018
Snake '97 aktualisieren
Über die Herausforderungen bei der Entwicklung eines immens beliebten Spiels
Vor ein paar Jahren schüttete mein Bruder in einer Amsterdamer Bar Bier über mein iPhone. Das arme Ding mochte das holländische Gebräu nicht so sehr wie ich: Es starb. Während ich auf mein neues Handy wartete, benutzte ich ein altes, das nichts konnte außer SMS schreiben, telefonieren und... Snake! Die Idee für Snake '97 war geboren und diesen Monat war es Zeit, das unglaublich beliebte Spiel zu aktualisieren.
Snake '97
Ursprünglich habe ich das Snake-Spiel im Jahr 2011 für iOS programmiert. Ich brauchte ungefähr zwei Wochen, um einen funktionierenden Prototyp zu erstellen, der wie der wahre Klassiker aus den 90ern aussah und sich anfühlte. Mein anderer Bruder half mir mit der Grafik, indem er ein paar scharfe Makros von meinem alten Handy machte (es ist immer noch eine seltsame Idee, dass so viele von euch eine Kopie meines Handys in der Tasche haben).
Es wurde von einigen großen Blogs aufgegriffen, die Snake '97 weltweit an die Spitze der Charts katapultierten. Heute wird es auf der ganzen Welt gespielt, ist in 53 Sprachen übersetzt und für iOS, Android, Windows, ChromeOS und MacOS verfügbar.
Bedarf für ein Update
Im Jahr 2011 gab es nur ein iPhone, das iPhone 4. Als Entwickler konnte man Android getrost ignorieren und Windows Phone war noch nicht einmal erfunden. Das Leben war so schön, wie es sich ein (fauler) Entwickler nur wünschen konnte: nur eine Bildschirmgröße.
Spulen wir vor bis heute, Apple verkauft derzeit 8 iPhones und es gibt Millionen und Abermillionen von Android-Geräten da draußen, alle mit unterschiedlichen Bildschirmgrößen, Prozessoren, Speicher und Softwareversionen. Es ist eine Untertreibung, dies als Herausforderung zu bezeichnen...
Um den Spaß an Snake '97 zu erhalten, musste ich die Spiel-Engine im Kern aktualisieren. Irgendwie musste ich die Grafik an jeden Bildschirm der Welt anpassen und die Unterschiede in Rechenleistung und Speicher berücksichtigen....
Eine Spiel-Engine, um sie alle zu beherrschen
Die Originalversionen des Spiels hatten alle ihre eigene Engine. Eine für iOS, eine für Android, eine für Windows usw. Als ich Snake 2k (die Snake II-Spielvariante) auf den Markt brachte, fügte ich einfach einen weiteren Satz von Spiel-Engines hinzu. Insgesamt habe ich 6 verschiedene Snake-Spiel-Engines in Objective-C (iOS), Java (Android) und C# (Windows) programmiert. Es wurde immer schwieriger, diese Engines auf neuen Geräten mit unterschiedlichen Bildschirmgrößen, Prozessoren und Speicherkonfigurationen am Laufen zu halten.
Aber diesen Monat habe ich in den sauren Apfel gebissen, und zwar richtig. Ich habe eine weitere Snake-Spiel-Engine neu entworfen und gebaut. Aber diese sollte alle vorherigen ersetzen. Sie muss auf iOS, Android und Windows laufen. Ich wollte eine Engine, die für die Zukunft bereit ist, für jeden Bildschirm und jede Art von Eingabe (Tastatur, Touch, Stift, Gamepad, Joystick, was auch immer).
HTML5 Rocks
Das Web hat die native App-Technologie eingeholt. Viele neue APIs wurden eingeführt, die reichhaltige interaktive Erlebnisse auf vielen verschiedenen Geräten ermöglichen. Ich fragte mich, wie schwierig es wäre, Snake '97 mit Webtechnologie zum Laufen zu bringen. Es gab nur einen Weg, das herauszufinden, also fing ich an.
Responsive Grafiken
Zuerst begann ich mit dem Aufbau der Grafik-Engine, die auf HTML5 Canvas und einem responsiven Skalierungssystem basiert, das ich für die Android-Version von Snake '97 entwickelt habe. Im Wesentlichen misst die Engine die verfügbare Bildschirmgröße, Ausrichtung und Pixeldichte. Sie übersetzt automatisch hochauflösendes Fotomaterial, um es an Ihren spezifischen Bildschirm anzupassen.
Die neue Grafik-Engine berücksichtigt sogar seltsame Dinge wie die Notch des iPhone X. Das alles geschieht in Sekundenbruchteilen. Ich habe die neue Grafik-Engine so konzipiert, dass sie auch auf Änderungen der Bildschirmgröße reagiert. Jetzt ist es möglich, das Spiel im Hoch- oder Querformat, in einem Fenster oder im Vollbildmodus (oder im geteilten Bildschirm, wenn Sie auf dem iPad sind) zu spielen.
Unterschiede in der Rechenleistung
Sie denken, ein einfaches Spiel muss sich keine Sorgen um die Rechenleistung machen? Falsch! In einem Spiel wie Snake ist das Timing entscheidend. Die Leute spielen das Spiel mit "Muskelgedächtnis" und wiederholen ihr Tippen auf dem Touchscreen, ohne über einzelne Bewegungen nachzudenken.
Die Spiel-Engine muss vorhersehbar sein, sie muss konstant laufen. Aber vor allem muss das Erlebnis dasselbe sein, egal ob Sie auf einem alten Android-Gerät oder einem 6-Kern-Kraftpaket wie dem iPhone X spielen.
Ich habe die Hochgeschwindigkeits-Videokamera des iPad Pro verwendet, um das Snake-Gameplay in Zeitlupe aufzunehmen. Anhand des Videos konnte ich Unterschiede in der Geschwindigkeit, Bild für Bild, erkennen. Dies führte zu einem internen Benchmarking-System (mit Timern, die Millisekunden zählen), das die Geschwindigkeit des Spiels automatisch und präzise auf Ihr spezifisches Gerät abstimmt.
Steuerung: Touch, Tastatur, Stift, Gamepad
Die Spieler steuern die Schlange mit der Retro-Steuerung (die alte Handy-Tastatur). Die ursprüngliche iOS-Version des Spiels verwendete feste transparente UIButtons, die ich über den Fotos des alten Telefons platziert habe. Ein einfacher und effektiver Anfang.
Leider hatten die von iOS bereitgestellten Buttons eine gewisse Verzögerung (was zu unvorhersehbaren Verzögerungen bei der Eingabe führte) und skalierten offensichtlich nicht auf verschiedene Bildschirmgrößen. Ich habe buchstäblich für jedes neue iPhone, das Apple in den letzten Jahren ausgeliefert hat, neue Koordinaten hart kodiert.... kein schöner Job.
Die neue Spiel-Engine verwendet einen Trick, den ich für die Android-Version entwickelt habe: dynamisch positionierte virtuelle Tasten. Anhand der Skalierungsinformationen, die die Grafik-Engine berechnet, pflege ich dynamisch eine Matrix von X- und Y-Koordinaten, die den virtuellen Tasten entsprechen. Wenn ein Spieler den Bildschirm berührt, berechnet die Engine die nächstgelegene Taste mithilfe von Mathematik, dem Satz des Pythagoras.
Das funktioniert wie ein Zauber und macht effektiv den gesamten Bildschirm zu einer Taste. Das Spiel macht so viel mehr Spaß. Zusätzlich zu Touch habe ich die Unterstützung für die Tastatur hinzugefügt, damit auch Leute ohne Touchscreen Snake spielen können.
Während ich an der Steuerung arbeitete, entdeckte ich weitere HTML5-Goodies, die GamePad-API. Sie ermöglicht es Programmierern wie mir, Gamepads, Joysticks und andere Eingabegeräte zu unterstützen, die über USB oder Bluetooth angeschlossen sind.
Die Unterstützung verschiedener Gamepads ist eine Herausforderung, macht aber trotzdem Spaß. Ich habe mit Sicherheit einen ganzen Tag verloren, während ich "getestet" ... meine Fähigkeiten mit dem beeindruckenden SNES-Gamepad und dem schönen Analogstick des DualShock-Controllers perfektioniert habe. ("Sorry Schatz, ich arbeite hier...")
Internationalisierung
Wenn Sie dies lesen, verstehen Sie wahrscheinlich Englisch. Aber ein großer Teil der Snake '97-Zielgruppe ist nicht englischsprachig. Tatsächlich gibt es Spieler mit mehr als 30 verschiedenen Sprachen. Von Spanisch bis Russisch, von Arabisch bis Hebräisch, von Deutsch bis Japanisch. Was auch immer Sie nennen, Snake hat es.
Die Gestaltung einer Oberfläche, die auf Text basiert, ist eine Herausforderung, wenn man die Welt bedienen will. Auch Symbole sind nicht fehlerfrei (unterschiedliche Bedeutung eines Bildes). Als UX-Designer muss man an Konzepte denken, die weltweit verbreitet sind. Für Snake habe ich Symbole für eine Uhr, einen Tachometer, einen Lautsprecher und eine Trophäe verwendet. Diese Symbole sind auf der ganzen Welt verbreitet und wurden genau aus diesem Grund gewählt.
Die App-Beschreibung besteht aus Text, den ich von einem professionellen Übersetzungsdienst übersetzen ließ. Einige andere Herausgeber verlassen sich auf Google Translate - aber ich weiß, dass das zu düsteren Ergebnissen führt.
Weltweites Ranking
In den 90er Jahren hatte man einen guten Ruf auf der Straße, wenn man eine gute Punktzahl in Snake erreicht hatte. In den Originalversionen von Snake '97 hatte man nur seinen eigenen Highscore zu schlagen und auf iOS konnte man seine Punktzahl bei GameCenter hochladen.
Für die neue Version wollte ich eine größere globale Reichweite und führte das "weltweite Ranking" ein. Es ist die neue integrierte Rangliste, die Ihr Spiel sofort einordnet und die Punktzahlen von Menschen auf der ganzen Welt vergleicht. Es gibt drei Ranglisten: Gesamtrangliste, 24 Stunden und letzte Stunde.
Die Highscores werden von einem unglaublichen 48-Kern-Intel-XEON-Server mit einer Menge Speicher verarbeitet. Er läuft unter Debian GNU/Linux, MariaDB, NGINX und NodeJS. Während der Spitzenzeiten verarbeitet er mehr als 10 Spielergebnisse pro Sekunde. Das Server-Setup ist einen eigenen Blog-Beitrag wert, den ich später schreiben werde - behalten Sie also diesen Blog im Auge, wenn Big Data Ihr Ding ist.
Jetzt herunterladen
Es gibt nur einen Weg, um herauszufinden, ob meine Arbeit gut war: Probieren Sie es selbst aus.
Bitte lassen Sie mich wissen, wenn Sie auf Fehler stoßen, Sie finden meine Kontaktinformationen hier.
