--- title: "Snake '97 aktualisieren" date: 2018-02-21 language: de topics: ["Windows", "android", "creating", "creativity", "design", "game", "iOS", "iPad", "iPhone", "programming", "retro", "server", "smartphone", "snake", "work"] source_url: https://willem.com/de/2018-02-21_snake-97-aktualisieren/ --- # Snake '97 aktualisieren *Über die Herausforderungen bei der Entwicklung eines wahnsinnig beliebten Spiels* > Vor ein paar Jahren hat mein Bruder in einer Amsterdamer Bar Bier über mein iPhone gekippt. Dem armen Ding schmeckte das niederländische Gebräu nicht so gut wie mir: Es ging ein. Während ich auf ein neues Handy wartete, benutzte ich ein altes, das nichts konnte außer SMS schreiben, telefonieren und... Snake! So wurde die Idee für Snake '97 geboren, und diesen Monat war es Zeit, das wahnsinnig beliebte Spiel zu aktualisieren. ![Café 't Pakhuis in Amsterdam, wo Snake '97 "erfunden" wurde](https://willem.com/global/images/06e55a3e0198.webp) ## Snake '97 Ursprünglich habe ich das Snake-Spiel 2011 für iOS programmiert. Ich brauchte ungefähr zwei Wochen für einen funktionierenden Prototyp, der aussah und sich anfühlte wie der echte Klassiker aus den 90ern. Mein anderer Bruder half mir bei der Grafik: Er machte ein paar gestochen scharfe Makroaufnahmen von meinem alten Handy (es ist immer noch ein seltsamer Gedanke, dass so viele von euch eine Kopie meines Handys in der Tasche haben). ![Snake '97 auf dem iPhone X: sieht aus und fühlt sich an wie das Retro-Handyspiel aus den 90ern](https://willem.com/global/images/ee992b73bb44.webp) Das Spiel wurde von einigen großen Blogs (https://snake97.com/press/) aufgegriffen, und dadurch stürmte Snake '97 weltweit die Top-Platzierungen. Heute wird es auf der ganzen Welt gespielt, ist in 53 Sprachen übersetzt und für iOS, Android, Windows, ChromeOS und macOS erhältlich. ![Snake '97 rockt die Charts, neben Angry Birds und WhatsApp](https://willem.com/global/images/13f8f2dd6fc1.webp) ## Zeit für ein Update 2011 gab es nur ein einziges 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 kann: nur eine Bildschirmgröße. ![iPhone 4: ahh, süße Entwicklererinnerungen an die Zeit, als eine (kleine) Größe für alle passte...](https://willem.com/global/images/87b0ccd8c5d9.webp) Spulen wir vor bis heute: Apple verkauft derzeit 8 iPhones, und da draußen gibt es Millionen und Abermillionen Android-Geräte, alle mit anderen Bildschirmgrößen, Prozessoren, Speichergrößen und Softwareversionen. Es ist eine Untertreibung, das eine Herausforderung zu nennen... Um den Spaß an Snake '97 zu erhalten, musste ich die Game-Engine von Grund auf erneuern. Irgendwie musste ich die Grafik an jeden Bildschirm der Welt anpassen und die Unterschiede bei Rechenleistung und Speicher auffangen.... ![Prototyp von Snake '97 auf verschiedenen Geräten](https://willem.com/global/images/3da50637eff4.webp) ## Eine Game-Engine, sie alle zu knechten Die ursprünglichen Versionen des Spiels hatten alle ihre eigene Engine. Eine für iOS, eine für Android, eine für Windows und so weiter. Als ich Snake 2k (die Variante nach dem Vorbild von Snake II) herausbrachte, kam einfach noch ein Satz Engines dazu. Insgesamt habe ich 6 verschiedene Snake-Engines programmiert, in Objective-C (iOS), Java (Android) und C# (Windows). Sie auf neuen Geräten mit anderen Bildschirmgrößen, Prozessoren und Speicherkonfigurationen am Laufen zu halten, wurde immer schwieriger. Aber diesen Monat habe ich in den sauren Apfel gebissen, und zwar richtig. Ich habe noch eine Snake-Engine entworfen und gebaut. Diese eine sollte aber alle vorherigen ersetzen. Sie muss auf iOS, Android und Windows laufen. Ich wollte eine Engine, die für die Zukunft gerüstet ist, für jeden Bildschirm und jede Art von Eingabe (Tastatur, Touch, Stift, Gamepad, Joystick, was du willst). ![Ich programmiere die neue Game-Engine und teste sie auf einem HMD Nokia 2 mit Android](https://willem.com/global/images/8d20b82f1396.webp) ## HTML5 rockt Das Web hat die native App-Technologie eingeholt. Es gibt viele neue APIs, die umfangreiche, interaktive Erlebnisse auf ganz unterschiedlichen Geräten möglich machen. Ich fragte mich, wie schwer es wäre, Snake '97 mit Webtechnologie zum Laufen zu bringen. Es gab nur einen Weg, das herauszufinden, also legte ich los. ### Responsive Grafik Zuerst baute ich die Grafik-Engine auf Basis von HTML5 Canvas und einem responsiven Skalierungssystem, das ich für die Android-Version von Snake '97 entworfen hatte. Im Kern misst die Engine die verfügbare Bildschirmgröße, die Ausrichtung und die Pixeldichte. Sie rechnet hochauflösendes Fotomaterial automatisch passend für deinen Bildschirm um. ![Dasselbe 3310? Schau genau hin und finde die Unterschiede zwischen iPhone SE und iPhone X](https://willem.com/global/images/37052d0f8036.webp) Die neue Grafik-Engine berücksichtigt sogar so seltsame Dinge wie die Notch des iPhone X. Das alles passiert in Sekundenbruchteilen. Ich habe sie außerdem so entworfen, dass sie auch auf Änderungen der Bildschirmgröße reagiert. Jetzt kannst du das Spiel im Hoch- oder Querformat spielen, im Fenster oder im Vollbild (oder im Split Screen, wenn du ein iPad hast). ![Breitbild-Gameplay ist dank der neuen responsiven Grafik jetzt möglich](https://willem.com/global/images/98f47b70cb4c.webp) ![Snake '97 als macOS-Desktop-App, möglich dank der neuen skalierbaren Grafik](https://willem.com/global/images/6848b7ac140f.webp) ### Unterschiede bei der Rechenleistung Du denkst, ein einfaches Spiel muss sich um Rechenleistung keine Gedanken machen? Falsch! Bei einem Spiel wie Snake ist das Timing entscheidend. Die Leute spielen mit "Muskelgedächtnis" und tippen auf dem Touchscreen immer wieder drauflos, ohne an einzelne Züge zu denken. Die Game-Engine muss berechenbar sein und konstant laufen. Vor allem aber muss sich das Spiel gleich anfühlen, egal ob du auf einem alten Android-Gerät spielst oder auf einem 6-Kern-Kraftpaket wie dem iPhone X. ![Geschwindigkeitsunterschiede im Gameplay per Zeitlupenvideo analysiert](https://willem.com/global/images/a5e27801afbd.webp) Ich habe die Hochgeschwindigkeitskamera des iPad Pro benutzt, um Snake in Zeitlupe aufzunehmen. Mit dem Video konnte ich Geschwindigkeitsunterschiede Bild für Bild erkennen. Daraus entstand ein internes Benchmark-System (mit Timern, die Millisekunden zählen), das die Geschwindigkeit des Spiels automatisch und genau auf dein Gerät abstimmt. ## Steuerung: Touch, Tastatur, Stift, Gamepad Die Spieler steuern die Schlange mit der Retro-Steuerung (der alten Handytastatur). Die erste iOS-Version des Spiels benutzte feste, transparente UIButtons, die ich über die Fotos des alten Handys legte. Ein einfacher und wirkungsvoller Anfang. Leider hatten die Buttons von iOS eine gewisse Verzögerung (die Eingaben kamen unvorhersehbar spät an) und skalierten offensichtlich nicht auf andere Bildschirmgrößen. Für jedes neue iPhone, das Apple in den letzten Jahren herausgebracht hat, habe ich buchstäblich neue Koordinaten fest einprogrammiert.... kein schöner Job. Die neue Game-Engine nutzt einen Trick, den ich für die Android-Version entwickelt habe: dynamisch positionierte virtuelle Tasten. Mit den Skalierungsdaten, die die Grafik-Engine berechnet, pflege ich dynamisch eine Matrix aus X- und Y-Koordinaten, die zu den virtuellen Tasten passen. Wenn ein Spieler den Bildschirm berührt, berechnet die Engine mit Mathematik, genauer mit dem Satz des Pythagoras, die nächstgelegene Taste. ![Der echte Code von Snake '97, der die Entfernung mit dem Satz des Pythagoras berechnet](https://willem.com/global/images/6251dc574a72.webp) Das funktioniert wie ein Zauber und macht den ganzen Bildschirm zu einer Taste. So macht das Spiel viel mehr Spaß. Zusätzlich zu Touch habe ich die Tastatur unterstützt, damit auch Leute ohne Touchscreen Snake spielen können. Während ich an der Steuerung arbeitete, entdeckte ich noch mehr HTML5-Leckerbissen: die GamePad-API. Damit können Programmierer wie ich Gamepads, Joysticks und andere Eingabegeräte unterstützen, die per USB oder Bluetooth angeschlossen sind. ![Snake mit einem Super-Nintendo-Gamepad zu steuern ist großartig (mit einem SuperSmart-joy-USB-Adapter)](https://willem.com/global/images/07b9c2f3b1a4.webp) Verschiedene Gamepads zu unterstützen ist knifflig, macht aber trotzdem Spaß. Ich habe garantiert einen ganzen Tag verloren, während ich "testete" ... und mit dem famosen SNES-Gamepad und dem wunderbaren Analogstick des DualShock-Controllers meine Skills perfektionierte. ("Sorry, Schatz, ich arbeite hier...") ![Ein Trick, den das ursprüngliche Snake nicht konnte: das Spiel mit einem Bluetooth-DualShock-PlayStation-Controller samt analogem Thumbstick steuern](https://willem.com/global/images/fa191d607fbb.webp) ## Internationalisierung Wenn du das hier liest, verstehst du wahrscheinlich Englisch. Aber ein großer Teil des Snake '97-Publikums ist nicht englischsprachig. Es gibt Spieler in mehr als 30 verschiedenen Sprachen. Von Spanisch bis Russisch, von Arabisch bis Hebräisch, von Deutsch bis Japanisch. Nenn eine Sprache, Snake hat sie. Eine Oberfläche zu gestalten, die auf Text beruht, ist schwierig, wenn man die ganze Welt erreichen will. Auch Icons sind nicht perfekt (ein Bild kann je nach Kultur etwas anderes bedeuten). Als UX-Designer muss man sich Konzepte überlegen, die weltweit verbreitet sind. Für Snake habe ich Icons mit einer Uhr, einem Tachometer, einem Lautsprecher und einem Pokal verwendet. Diese Symbole kennt man überall auf der Welt, und genau deshalb habe ich sie gewählt. ![UX-Design für ein internationales Publikum. Oberflächen ohne Worte zu gestalten ist schwer!](https://willem.com/global/images/12934c0ebe67.webp) Die App-Beschreibung besteht aus Text, den ich von einem professionellen Übersetzungsdienst übersetzen ließ. Manche anderen Publisher verlassen sich auf Google Translate, aber ich weiß, dass das zu trostlosen Ergebnissen führt. ## Weltweites Ranking In den 90ern bekam man ordentlich Street Credibility, wenn man bei Snake einen guten Score erreicht hatte. In den Originalversionen von Snake '97 hattest du nur deinen eigenen Highscore zu schlagen, und auf iOS konntest du deine Punktzahl zu GameCenter hochladen. Für die neue Version wollte ich mehr globale Reichweite und habe das "weltweite Ranking" eingeführt. Es ist die neue, integrierte Bestenliste, die dein Spiel sofort einordnet und die Punktzahlen von Leuten aus der ganzen Welt vergleicht. Es gibt drei Ranglisten: aller Zeiten, 24 Stunden und letzte Stunde. ![Weltmeister von Snake '97, aber nicht mehr lange...](https://willem.com/global/images/37c761847d86.webp) Die Highscores werden von einem unglaublichen 48-Kern-Intel-XEON-Server mit einer Menge Speicher verarbeitet. Er läuft mit Debian GNU/Linux, MariaDB, NGINX und NodeJS. Zu Spitzenzeiten verarbeitet er mehr als 10 Spielergebnisse pro Sekunde. Das Server-Setup ist einen eigenen Blogbeitrag wert, den ich später schreiben werde. Behalte diesen Blog also im Auge, wenn Big Data dein Ding ist. ![So sieht die Cloud aus, liebe Jungs und Mädels.](https://willem.com/global/images/d31a2077c5a4.webp) ## Jetzt herunterladen Nur auf einem Weg findest du heraus, ob meine Arbeit gut war: Probier es selbst aus. - Android (https://play.google.com/store/apps/details?id=com.dsd164.snake97) - ChromeOS (https://play.google.com/store/apps/details?id=com.dsd164.snake97) - iOS (https://itunes.apple.com/us/app/snake-97-retro-phone-classic/id438052745?mt=8) - Mac (https://itunes.apple.com/app/snake-97-retro-phone-classic/id1349761776?mt=12) - Windows (https://www.microsoft.com/en-us/store/p/snake-97/9nblggh0ccmr) - Web (https://snake97.com) Wenn dir Fehler begegnen, sag mir bitte Bescheid. Meine Kontaktdaten findest du hier (https://willem.com/). ![Snake '97 als kostenloser Download für iOS, Android, macOS, Windows und ChromeOS](https://willem.com/global/images/5234dd3dd7ae.webp)