Snake '97 aktualisieren: Über die Herausforderungen bei der Entwicklung eines immens beliebten Spiels

Feb. 21, 2018

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.

Café 't Pakhuis in Amsterdam - wo Snake '97 "erfunden" wurde

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).

Snake '97 läuft auf dem iPhone X - sieht aus und fühlt sich an wie das Retro-Handyspiel aus den 90ern

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.

Snake '97 rockt die Charts mit Angry Birds und WhatsApp

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.

iPhone 4 - ahhh süße Entwicklererinnerungen, als eine (kleine) Größe für alle passte...

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....

Prototyp von Snake '97 läuft auf verschiedenen Geräten

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).

Programmierung der neuen Game-Engine und Testen auf einem HMD Nokia 2 mit Android

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.

Dasselbe 3310? Schau genau hin und entdecke die Unterschiede zwischen iPhone SE und iPhone X

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.

Breitbild-Gameplay ist jetzt dank der neuen responsiven Grafik möglich

Snake '97 läuft als macOS-Desktop-App, ermöglicht durch die neue skalierbare Grafik

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.

Analyse von Gameplay-Geschwindigkeitsunterschieden mithilfe von Zeitlupenvideo

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.

Der eigentliche Code von Snake '97, der die Entfernungsberechnung mithilfe des Satzes von Pythagoras durchführt

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.

Snake mit einem Super Nintendo Gamepad zu steuern ist großartig (mit einem SuperSmart-joy USB-Anschluss)

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...")

Ein Trick, den das ursprüngliche Snake nicht konnte: Steuerung des Spiels mit einem Bluetooth DualShock PlayStation-Controller mit analogem Thumbstick

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.

UX-Design für ein internationales Publikum. Oberflächen ohne Worte zu gestalten ist schwierig!

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.

Weltmeister von Snake '97 - aber nicht lange...

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.

So sieht die Cloud aus, liebe Jungen und Mädchen.

Jetzt herunterladen

Es gibt nur einen Weg, um herauszufinden, ob meine Arbeit gut war: Probieren Sie es selbst aus.

Android

ChromeOS

iOS

Mac

Windows

Web

Bitte lassen Sie mich wissen, wenn Sie auf Fehler stoßen, Sie finden meine Kontaktinformationen hier.

Snake '97 als kostenloser Download für iOS, Android, macOS, Windows und ChromeOS verfügbar