Actualizando Snake '97: Sobre los desafíos de desarrollar un juego tremendamente popular

Feb. 21, 2018

Hace unos años, mi hermano tiró una cerveza sobre mi iPhone en un bar de Ámsterdam. Al pobre no le gustó la cerveza holandesa tanto como a mí: murió. Mientras esperaba a que llegara un nuevo teléfono, usé uno viejo que no podía hacer nada más que enviar mensajes de texto, llamar y... ¡Snake! Nació la idea de Snake '97 y este mes era el momento de actualizar el popularísimo juego.

Café 't Pakhuis en Ámsterdam - donde Snake '97 fue "inventado"

Snake '97

Originalmente programé el juego Snake en 2011 para iOS. Me llevó unas dos semanas crear un prototipo funcional que se viera y se sintiera como el verdadero clásico de los 90. Mi otro hermano me ayudó con los gráficos tomando algunas macros de aspecto nítido de mi teléfono antiguo (sigue siendo una idea extraña que tantos de ustedes tengan una copia de mi teléfono en su bolsillo).

Snake '97 corriendo en iPhone X - luciendo y sintiéndose como el juego retro para teléfonos móviles de los 90

Algunos blogs importantes lo recogieron lo que hizo que Snake '97 alcanzara los primeros puestos en todo el mundo. Hoy se juega en todo el mundo, traducido a 53 idiomas y disponible para iOS, Android, Windows, ChromeOS y MacOS.

Snake '97 arrasando en las listas con Angry Birds y WhatsApp

Necesidad de actualización

En 2011 solo había un iPhone, el iPhone 4. Como desarrollador, podías ignorar con seguridad Android y Windows Phone ni siquiera se había inventado todavía. La vida era tan hermosa como un desarrollador (perezoso) podría desear: solo un tamaño de pantalla.

iPhone 4 - ahhh dulces recuerdos de desarrollo cuando un (pequeño) tamaño servía para todo...

Avanzando rápidamente hasta hoy, Apple actualmente vende 8 iPhones y hay millones y millones de dispositivos Android, todos con diferentes tamaños de pantalla, procesadores, memoria y versiones de software. Llamar a esto un desafío es quedarse corto...

Para mantener la diversión en Snake '97 tuve que actualizar el motor del juego en su núcleo. De alguna manera, tenía que hacer que los gráficos se ajustaran a todas las pantallas del mundo y adaptarme a las diferencias en la potencia de procesamiento y la memoria...

Prototipo de Snake '97 corriendo en varios dispositivos

Un motor de juego para gobernarlos a todos

Las versiones originales del juego tenían su propio motor. Uno para iOS, uno para Android, uno para Windows, etc. Cuando lancé Snake 2k (la variante del juego Snake II), simplemente agregué otro conjunto de motores de juego. En total, programé 6 motores de juego Snake diferentes en Objective-C (iOS), Java (Android) y C# (Windows). Mantener estos motores funcionando en nuevos dispositivos con diferentes tamaños de pantalla, procesadores y configuraciones de memoria se volvió cada vez más difícil.

Pero este mes me armé de valor, a lo grande. Rediseñé y construí otro motor de juego Snake. Pero este estaba destinado a reemplazar a todos los anteriores. Debe ejecutarse en iOS, Android y Windows. Quería un motor que estuviera listo para el futuro, para cualquier pantalla y cualquier tipo de entrada (teclado, táctil, lápiz, gamepad, joystick, lo que sea).

Programando el nuevo motor del juego y probándolo en un HMD Nokia 2 con Android

HTML5 Rocks

La web se ha puesto al día con la tecnología de las aplicaciones nativas. Se han introducido muchas API nuevas que permiten experiencias interactivas ricas en muchos dispositivos diferentes. Me preguntaba qué tan difícil sería hacer que Snake '97 funcionara con tecnología web. Solo hay una forma de averiguarlo, así que comencé.

Gráficos responsivos

Primero comencé a construir el motor de gráficos basado en el lienzo HTML5 y un sistema de escalado responsivo que diseñé para la versión de Android de Snake '97. En esencia, el motor mide el tamaño de pantalla disponible, la orientación y la densidad de píxeles. Traduce automáticamente material fotográfico de alta resolución para que coincida con su pantalla específica.

¿El mismo 3310? Mira de cerca y encuentra las diferencias entre el iPhone SE y el iPhone X

El nuevo motor de gráficos incluso se adapta a cosas raras como la muesca del iPhone X. Todo esto sucede en una fracción de segundo. También diseñé el nuevo motor de gráficos para que responda a los cambios en el tamaño de la pantalla. Ahora es posible jugar el juego en modo vertical u horizontal, en una ventana o en pantalla completa (o en pantalla dividida si estás en iPad).

El juego en pantalla ancha ahora es posible gracias a los nuevos gráficos responsivos

Snake '97 corriendo como aplicación de escritorio macOS hecho posible por los nuevos gráficos escalables

Diferencias en la potencia de procesamiento

¿Crees que un juego simple no tiene que preocuparse por la potencia de cálculo? ¡Incorrecto! En un juego como Snake, la sincronización es esencial. La gente juega con "memoria muscular", repitiendo sus toques en la pantalla táctil sin pensar en movimientos individuales.

El motor del juego debe ser predecible, debe funcionar de forma constante. Pero además, la experiencia debe ser la misma, ya sea que estés en un dispositivo Android antiguo o en una potencia de 6 núcleos como el iPhone X.

Analizando las diferencias de velocidad del juego usando video en cámara lenta

Utilicé la cámara de video de alta velocidad del iPad Pro para capturar el juego de Snake en cámara lenta. Usando el video, pude detectar diferencias en la velocidad, cuadro por cuadro. Esto condujo a un sistema de evaluación comparativa interno (usando temporizadores, contando milisegundos) que ajusta automáticamente la velocidad del juego con precisión para su dispositivo específico.

Controles: táctil, teclado, lápiz, gamepad

Los jugadores controlan la serpiente usando los controles retro (el teclado del teléfono antiguo). La versión original de iOS del juego usaba UIButton transparentes fijos que coloqué sobre las fotos del teléfono antiguo. Un comienzo simple y efectivo.

Desafortunadamente, los botones proporcionados por iOS tenían cierto retraso (lo que causaba retrasos impredecibles en la entrada) y obviamente no se escalaban a diferentes tamaños de pantalla. Literalmente codifiqué nuevas coordenadas para cada nuevo iPhone que Apple entregó en los últimos años... no es un trabajo divertido.

El nuevo motor de juego utiliza un truco que desarrollé para la versión de Android: botones virtuales posicionados dinámicamente. Usando la información de escalado que calcula el motor de gráficos, mantengo dinámicamente una matriz de coordenadas X e Y que coinciden con los botones virtuales. Cuando un jugador toca la pantalla, el motor calcula el botón más cercano usando matemáticas, el teorema de Pitágoras.

El código real de Snake '97 manejando el cálculo de distancia usando el Teorema de Pitágoras

Esto funciona a las mil maravillas y hace que toda la pantalla sea un botón. El juego es mucho más divertido de jugar de esta manera. Además del tacto, agregué soporte para el teclado para que las personas sin pantalla táctil también pudieran jugar a Snake.

Mientras trabajaba en los controles, descubrí algunas otras bondades de HTML5, la API GamePad. Permite a los programadores como yo admitir gamepads, joysticks y otros dispositivos de entrada conectados a través de USB o Bluetooth.

Controlar Snake usando un gamepad de Super Nintendo es increíble (usando un conector USB SuperSmart-joy)

Admitir diferentes gamepads es un desafío, pero divertido de todos modos. Seguro que perdí un día entero mientras "probaba"... perfeccionando mis habilidades con el formidable gamepad SNES y la adorable palanca analógica del controlador DualShock. ("Lo siento cariño, estoy trabajando aquí...")

Un truco que el Snake original no podía hacer: controlar el juego usando un controlador Bluetooth DualShock de PlayStation con un stick analógico

Internacionalización

Si lees esto, probablemente entiendas inglés. Pero para una gran parte de la audiencia de Snake '97 no es inglés. De hecho, hay jugadores con más de 30 idiomas diferentes. Desde el español hasta el ruso, desde el árabe hasta el hebreo, desde el alemán hasta el japonés. Lo que sea, Snake lo tiene.

Diseñar una interfaz que se base en texto es un desafío si su objetivo es servir al mundo. Los íconos tampoco son impecables (diferente significado para una imagen). Como diseñador de UX, debe pensar en conceptos que se utilizan ampliamente en todo el mundo. Para Snake, utilicé íconos de un reloj, velocímetro, altavoz y un trofeo. Estos íconos son comunes en todo el mundo y se eligieron precisamente por esta razón.

Diseño UX para una audiencia internacional. ¡Diseñar interfaces sin palabras es difícil!

La descripción de la aplicación consiste en un texto que traduje por un servicio de traducción profesional. Algunos otros editores confían en Google Translate, pero sé que eso lleva a resultados pésimos.

Clasificación mundial

En los años 90, te ganabas un buen crédito callejero si lograbas una buena puntuación en Snake. En las versiones originales de Snake '97 solo tenías tu propia puntuación más alta para superar y en iOS podías subir tu puntuación a GameCenter.

Para la nueva versión, quería un alcance más global, presentando la "clasificación mundial". Es la nueva tabla de clasificación integrada que clasifica instantáneamente tu juego, comparando puntuaciones de personas de todo el mundo. Hay tres clasificaciones: de todos los tiempos, 24 horas y última hora.

Campeón mundial de Snake '97 - pero no por mucho tiempo...

Las puntuaciones más altas son procesadas por un increíble servidor Intel XEON de 48 núcleos con una gran cantidad de memoria. Ejecuta Debian GNU/Linux, MariaDB, NGINX y NodeJS. Durante las horas pico maneja más de 10 puntuaciones de juego por segundo. La configuración del servidor merece una publicación de blog dedicada que escribiré más adelante, así que esté atento a este blog si lo suyo son los macrodatos.

Así es como se ve la nube, queridos niños y niñas.

Descargar ahora

Solo hay una forma de saber si mi trabajo fue bueno: pruébalo tú mismo.

Android

ChromeOS

iOS

Mac

Windows

Web

Por favor, házmelo saber si encuentras algún error, puedes encontrar mi información de contacto aquí.

Snake '97 disponible como descarga gratuita para iOS, Android, macOS, Windows y ChromeOS