Atualizar o Snake '97

Resumo

Há uns anos, o meu irmão despejou uma cerveja em cima do meu iPhone num bar de Amesterdão. O coitado não gostou da cerveja holandesa tanto como eu: morreu. Enquanto esperava por um telemóvel novo, usei um velhinho que só sabia enviar mensagens, fazer chamadas e... Snake! Nasceu assim a ideia do Snake '97 e este mês chegou a hora de atualizar o jogo imensamente popular.

Texto completo

Snake '97

Programei o jogo Snake originalmente em 2011, para iOS. Demorei cerca de duas semanas a criar um protótipo funcional que tinha o aspeto e a sensação do verdadeiro clássico dos anos 90. O meu outro irmão ajudou-me com os gráficos, ao tirar umas macros bem nítidas do meu telemóvel antigo (ainda é uma ideia estranha que tantos de vocês tenham uma cópia do meu telemóvel no bolso).

Foi destacado por alguns blogues grandes que fizeram o Snake '97 dominar o topo das classificações por todo o mundo. Hoje joga-se em todo o mundo, está traduzido em 53 idiomas e disponível para iOS, Android, Windows, ChromeOS e macOS.

Era preciso atualizar

Em 2011 só havia um iPhone, o iPhone 4. Como programador, podias ignorar tranquilamente o Android e o Windows Phone ainda nem sequer tinha sido inventado. A vida era tão bela como um programador (preguiçoso) podia desejar: só um tamanho de ecrã.

Avançando até hoje, a Apple vende atualmente 8 iPhones e há milhões e milhões de dispositivos Android por aí, todos com ecrãs, processadores, memória e versões de software diferentes. Dizer que isto é um desafio é pouco...

Para manter a diversão no Snake '97, tive de atualizar o motor do jogo desde a raiz. De alguma forma, tinha de fazer os gráficos caberem em todos os ecrãs do mundo e compensar as diferenças de capacidade de processamento e de memória....

Um motor de jogo para os governar a todos

As versões originais do jogo tinham todas o seu próprio motor. Um para iOS, um para Android, um para Windows, etc. Quando lancei o Snake 2k (a variante Snake II do jogo), limitei-me a juntar mais um conjunto de motores. No total, programei 6 motores de Snake diferentes em Objective-C (iOS), Java (Android) e C# (Windows). Manter estes motores a funcionar em dispositivos novos, com ecrãs, processadores e configurações de memória diferentes, tornou-se cada vez mais difícil.

Mas este mês arregacei as mangas a sério. Redesenhei e construí mais um motor de Snake. Só que este foi feito para substituir todos os anteriores. Tem de funcionar em iOS, Android e Windows. Queria um motor preparado para o futuro, para qualquer ecrã e qualquer tipo de entrada (teclado, toque, caneta, gamepad, joystick, o que quiseres).

HTML5 é fantástico

A web alcançou a tecnologia das apps nativas. Foram introduzidas muitas API novas que permitem experiências interativas ricas em muitos dispositivos diferentes. Perguntei-me quão difícil seria fazer o Snake '97 funcionar com tecnologia web. Só há uma maneira de descobrir, por isso comecei.

Gráficos adaptáveis

Comecei por construir o motor gráfico com base no canvas de HTML5 e num sistema de escala adaptável que tinha desenhado para a versão Android do Snake '97. Em essência, o motor mede o tamanho do ecrã disponível, a orientação e a densidade de píxeis. Traduz automaticamente o material fotográfico de alta resolução para se ajustar ao teu ecrã.

O novo motor gráfico até compensa coisas esquisitas como o notch do iPhone X. Tudo isto acontece numa fração de segundo. Desenhei o novo motor gráfico para reagir também a mudanças no tamanho do ecrã. Agora é possível jogar na vertical ou na horizontal, numa janela ou em ecrã inteiro (ou em ecrã dividido, se estiveres num iPad).

Diferenças de capacidade de processamento

Pensas que um jogo simples não tem de se preocupar com poder de computação? Enganas-te! Num jogo como o Snake, o tempo é essencial. As pessoas jogam com "memória muscular", a repetir os toques no ecrã tátil sem pensar em cada movimento.

O motor do jogo tem de ser previsível, tem de correr de forma constante. Mas, acima de tudo, a experiência tem de ser a mesma, estejas num Android antigo ou num monstro de 6 núcleos como o iPhone X.

Usei a câmara de vídeo de alta velocidade do iPad Pro para captar o jogo do Snake em câmara lenta. Com o vídeo consegui detetar diferenças de velocidade, fotograma a fotograma. Isto levou a um sistema interno de medição de desempenho (com temporizadores, a contar milissegundos) que ajusta automaticamente a velocidade do jogo, afinada com precisão para o teu dispositivo.

Controlos: toque, teclado, caneta, gamepad

Os jogadores controlam o Snake com os controlos retro (o antigo teclado de telemóvel). A versão original do jogo para iOS usava UIButtons transparentes fixos que coloquei por cima das fotografias do telemóvel antigo. Um começo simples e eficaz.

Infelizmente, os botões do iOS tinham alguma latência (o que causava atrasos imprevisíveis na resposta) e, claro, não se adaptavam a tamanhos de ecrã diferentes. Literalmente, tive de escrever à mão, no código, as coordenadas novas de cada iPhone novo que a Apple lançou nos últimos anos.... um trabalho nada divertido.

O novo motor usa um truque que desenvolvi para a versão Android: botões virtuais posicionados dinamicamente. Com a informação de escala que o motor gráfico calcula, mantenho dinamicamente uma matriz de coordenadas X e Y correspondente aos botões virtuais. Quando o jogador toca no ecrã, o motor calcula o botão mais próximo com matemática, o teorema de Pitágoras.

Funciona às mil maravilhas e transforma efetivamente o ecrã inteiro num botão. O jogo é muito mais divertido assim. Além do toque, acrescentei suporte para teclado, para que quem não tem ecrã tátil também possa jogar Snake.

Enquanto trabalhava nos controlos, descobri mais uma pérola do HTML5, a API GamePad. Permite a programadores como eu suportar gamepads, joysticks e outros dispositivos de entrada ligados por USB ou Bluetooth.

Suportar gamepads diferentes é um desafio, mas ainda assim divertido. Perdi de certeza um dia inteiro a "testar"... a aperfeiçoar as minhas capacidades com o formidável gamepad da SNES e o adorável analógico do comando DualShock. ("Desculpa, querida, estou a trabalhar...")

Internacionalização

Se estás a ler isto, provavelmente percebes inglês. Mas uma grande parte do público do Snake '97 não fala inglês. Na verdade, há jogadores em mais de 30 idiomas diferentes. Do espanhol ao russo, do árabe ao hebraico, do alemão ao japonês. Diz um, e o Snake tem-no.

Desenhar uma interface que depende de texto é um desafio se queres servir o mundo inteiro. Os ícones também não são perfeitos (uma imagem pode ter significados diferentes). Como designer de UX, tens de pensar em conceitos usados em todo o lado. Para o Snake, usei ícones de um relógio, um velocímetro, um altifalante e um troféu. São ícones comuns em todo o mundo e foram escolhidos precisamente por isso.

A descrição da app é um texto que mandei traduzir por um serviço profissional de tradução. Alguns outros editores recorrem ao Google Translate, mas eu sei que isso dá resultados péssimos.

Classificação mundial

Nos anos 90, ganhavas boa reputação na rua se conseguisses uma boa pontuação no Snake. Nas versões originais do Snake '97 só tinhas a tua própria pontuação máxima para bater e, no iOS, podias enviar a pontuação para o GameCenter.

Para a nova versão quis um alcance mais global e introduzi a "classificação mundial". É a nova tabela de classificação integrada, que classifica instantaneamente o teu jogo, comparando pontuações de pessoas de todo o mundo. Há três classificações: de sempre, das últimas 24 horas e da última hora.

As pontuações são processadas por um servidor Intel XEON de 48 núcleos, incrível, com uma quantidade enorme de memória. Corre Debian GNU/Linux, MariaDB, NGINX e NodeJS. Nas horas de ponta, processa mais de 10 pontuações por segundo. A configuração do servidor merece um artigo só para ela, que escreverei mais tarde, por isso fica atento a este blogue se gostas de big data.

Transfere agora

Só há uma maneira de descobrir se o meu trabalho valeu a pena: experimenta tu mesmo.

• Android
• ChromeOS
• iOS
• Mac
• Windows
• Web

Avisa-me se encontrares algum erro, os meus contactos estão aqui.