Feb. 21, 2018
Actualizando Snake '97
Sobre los desafíos de desarrollar un juego tremendamente popular
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.
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).
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.
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.
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...
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).
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 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).
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.
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.
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.
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í...")
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.
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.
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.
Descargar ahora
Solo hay una forma de saber si mi trabajo fue bueno: pruébalo tú mismo.
Por favor, házmelo saber si encuentras algún error, puedes encontrar mi información de contacto aquí.
