Skriuwen · 21 feb 2018
Snake '97 fernije
Oer de útdagings fan it ûntwikkeljen fan in ekstreem populêr spultsje
In pear jier lyn smiet myn broer in bier oer myn iPhone yn in kroech yn Amsterdam. It earme ding fûn it Nederlânske bier net sa lekker as ik: it gie dea. Wylst ik wachte op in nije tillefoan, brûkte ik in âlde dy't neat koe útsein sms'en, belje en... Snake! Sa waard it idee foar Snake '97 berne en dizze moanne wie it tiid om dat ekstreem populêre spultsje te fernijen.
Snake '97
Oarspronklik haw ik it Snake-spultsje yn 2011 programmearre foar iOS. It hat my sa'n twa wiken kosten om in wurkjend prototype te meitsjen dat der útseach en oanfielde as de echte klassiker út de jierren njoggentich. Myn oare broer holp my mei de grafyk troch skerpe makro's te meitsjen fan myn âlde tillefoan (it bliuwt in nuvere gedachte dat safolle fan jimme in kopy fan myn tillefoan yn de bûse hawwe).
It waard oppakt troch guon grutte blogs en dêrtroch stie Snake '97 oeral yn de wrâld boppe yn de ranglisten. Hjoed de dei wurdt it oeral yn de wrâld spile, it is oerset yn 53 talen en it is der foar iOS, Android, Windows, ChromeOS en macOS.
Fernijing nedich
Yn 2011 wie der mar ien iPhone, de iPhone 4. As ûntwikkeler koest Android rêstich negearje en Windows Phone wie noch net iens útfûn. It libben wie sa moai as in (loaie) ûntwikkeler mar winskje koe: mar ien skermgrutte.
Snel foarút nei hjoed: Apple ferkeapet no 8 iPhones en der binne miljoenen en miljoenen Android-apparaten mei allegearre ferskillende skermgruttes, prosessors, ûnthâld en softwareferzjes. It is in understatement om dit in útdaging te neamen...
Om it nocht yn Snake '97 te hâlden moast ik de game engine yn de kearn fernije. Ik moast de grafyk op ien of oare manier passend meitsje foar elk skerm yn de wrâld en rekken hâlde mei de ferskillen yn rekenkrêft en ûnthâld....
Ien game engine om se allegear te hearskjen
De oarspronklike ferzjes fan it spultsje hiene allegearre in eigen engine. Ien foar iOS, ien foar Android, ien foar Windows ensafuorthinne. Doe't ik Snake 2k (de Snake II-farianten fan it spultsje) útbrocht, haw ik gewoan wer in set game engines tafoege. Yn totaal haw ik 6 ferskillende Snake-game engines programmearre yn Objective-C (iOS), Java (Android) en C# (Windows). Dizze engines draaiende hâlde op nije apparaten mei oare skermgruttes, prosessors en ûnthâldkonfiguraasjes waard hieltyd lestiger.
Mar dizze moanne haw ik de knoop trochhakt, en hoe. Ik haw noch in Snake-game engine ûntworpen en boud. Mar dizze moast alle foargeanden ferfange. Hy moat draaie op iOS, Android en Windows. Ik woe in engine dy't klear wie foar de takomst, foar elk skerm en elke soarte fan ynput (toetseboerd, touch, pencil, gamepad, joystick, neam it mar op).
HTML5 Rocks
It web hat de native app-technology ynhelle. Der binne in soad nije API's yntrodusearre dy't rike ynteraktive ûnderfinings mooglik meitsje op in protte ferskillende apparaten. Ik frege my ôf hoe dreech it wêze soe om Snake '97 op webtechnology te litten wurkje. Der is mar ien manier om dat út te finen, dus ik bin begûn.
Responsive grafyk
Earst bin ik begûn mei it bouwen fan de grafyske engine op basis fan HTML5 canvas en in responsive skaalsysteem dat ik ûntwurpen hie foar de Android-ferzje fan Snake '97. Yn prinsipe mjit de engine de beskikbere skermgrutte, de oriïntaasje en de pikseldichtheid. It rekkent heechsteande foto's automatysk om, sadat se by dyn skerm passe.
De nije grafyske engine hâldt sels rekken mei nuvere dingen lykas de notch fan de iPhone X. Dit giet allegearre yn in split sekonde. Ik haw de nije grafyske engine ek sa ûntworpen dat hy reagearret op feroaringen yn skermgrutte. No kin it spultsje spile wurde yn portret of lânskip, yn in finster of folslein skerm (of splitskerm as it op in iPad is).
Ferskillen yn rekenkrêft
Tinkst dat in ienfâldich spultsje him gjin soargen hoecht te meitsjen oer rekenkrêft? Fout! Yn in spultsje as Snake is timing essinsjeel. Minsken spylje it spultsje op "spiergeheugen" en tippe op it touchscreen sûnder oer de losse bewegingen nei te tinken.
De game engine moat foarsisber wêze, hy moat konstant draaie. Mar fierders moat de ûnderfining gelyk wêze, of do no op in âld Android-apparaat sitst of op in krêftpatser mei 6 kearnen lykas de iPhone X.
Ik haw de hegesnelheidsvideokamera fan de iPad Pro brûkt om Snake-gameplay yn slow motion fêst te lizzen. Mei de fideo koe ik ferskillen yn snelheid sjen, frame foar frame. Dat late ta in yntern benchmarksysteem (mei timers, dy't millisekonden telle) dat de snelheid fan it spultsje automatysk oanpast en krekt ôfstimt op dyn apparaat.
Bestjoering: Touch, toetseboerd, Pencil, Gamepad
Spilers bestjoere de Snake mei de retro-knoppen (it âlde tillefoantoetseboerd). De oarspronklike iOS-ferzje fan it spultsje brûkte fêste trochsichtige UIButtons dy't ik oer de foto's fan de âlde tillefoan pleatst hie. In ienfâldige en effektive start.
Spitigernôch hiene de knoppen fan iOS wat lag (dat foar ûnfoarsisbere fertraging yn ynput soarge) en skaalden fansels net nei ferskillende skermgruttes. Ik haw letterlik foar elke nije iPhone dy't Apple de lêste jierren útbrocht hat nije koördinaten hardcode.... gjin noflik wurk.
De nije game engine brûkt in trúk dy't ik foar de Android-ferzje ûntwikkele haw: dynamysk pleatste firtuele knoppen. Mei de skaaljinformaasje dy't de grafyske engine útrekkent, hâld ik dynamysk in matriks fan X- en Y-koördinaten by dy't by de firtuele knoppen hearre. As in spiler it skerm oanrekket, rekkent de engine mei wiskunde út wat de tichtstby lizzende knop is: de stelling fan Pythagoras.
Dit wurket as in tierelier en makket effektyf it hiele skerm ta in knop. It spultsje is op dizze manier folle moaier om te spyljen. Neist touch haw ik stipe foar it toetseboerd tafoege, sadat ek minsken sûnder touchscreen Snake spylje kinne.
Doe't ik dwaande wie mei de bestjoering ûntdekte ik noch mear HTML5-moaiens: de GamePad API. Dêrmei kinne programmeurs lykas ik gamepads, joysticks en oare ynputapparaten stypje dy't fia USB of Bluetooth ferbûn binne.
Ferskillende gamepads stypje is útdaagjend, mar dochs grappich. Ik haw der perfoarst in hiele dei oan kwytrekke wylst ik oan it "testen" wie... myn feardigens ferfine mei de prachtige SNES-gamepad en de lekkere analoge stick fan de DualShock-controller. ("Sorry skat, ik bin hjir oan it wurk...")
Ynternasjonalisaasje
As do dit lêst, begryp datst wierskynlik Ingelsk. Mar in grut part fan it Snake '97-publyk is net Ingelsktalich. Der binne sels spilers dy't mear as 30 ferskillende talen brûke. Fan Spaansk oant Russysk, fan Arabysk oant Hebrieusk, fan Dútsk oant Japansk. Neam it mar op, Snake hat it.
In ynterface ûntwerpe dy't op tekst rint is útdaagjend as do de hiele wrâld dwaan wolst. Ikoanen binne ek net perfekt (in ôfbylding kin yn in oare kultuer wat oars betsjutte). As UX-ûntwerper moatst nei konsepten sykje dy't breed brûkt wurde oer de hiele wrâld. Foar Snake haw ik ikoanen brûkt fan in klok, in snelheidsmeter, in lúdspreker en in trofee. Dizze ikoanen binne oeral yn de wrâld gewoan en binne krekt dêrom keazen.
De app-beskriuwing bestiet út tekst dy't ik troch in profesjonele oersetstjinst oersette litten haw. Guon oare útjouwers fertrouwe op Google Translate, mar ik wit dat dat tryst resultaat jout.
Wrâldwide ranglist
Op 'e jierren njoggentich krigest in soad strjitrespekt as do in moaie skoare yn Snake helle hiest. Yn de oarspronklike ferzjes fan Snake '97 hiest allinnich dyn eigen heechste skoare om te ferslaan en op iOS koest dyn skoare nei GameCenter uploade.
Foar de nije ferzje woe ik in wiidner berik, mei in "wrâldwide ranglist". It is it nije yntegreare leaderboard dat dyn spultsje direkt rangskikt en skoares fan minsken fan oeral yn de wrâld fergeliket. Der binne trije ranglisten: altyd, 24 oeren en it lêste oere.
De heechste skoares wurde ferwurke troch in machtige 48-kearns Intel XEON-server mei in bulte ûnthâld. Hy draait Debian GNU/Linux, MariaDB, NGINX en NodeJS. Yn de drokke oeren ferwurket hy mear as 10 spultsjeskoares yn de sekonde. De serveropset is in eigen blogberjocht weardich dat ik letter skriuwe sil, hâld dit blog dus yn de gaten as big data dyn ding is.
Download no
Der is mar ien manier om út te finen oft myn wurk wat wie: probearje it sels.
Lit it my witte as do bugs tsjinkomst, myn kontaktynformaasje fynst do hjir.
