--- title: "Actualizando Snake '97" date: 2018-02-21 language: es topics: ["Windows", "android", "creating", "creativity", "design", "game", "iOS", "iPad", "iPhone", "programming", "retro", "server", "smartphone", "snake", "work"] source_url: https://willem.com/es/2018-02-21_actualizando-snake-97/ --- # Actualizando Snake '97 *Sobre los retos de desarrollar un juego tremendamente popular* > Hace unos años, mi hermano me tiró una cerveza encima del iPhone en un bar de Ámsterdam. Al pobre no le gustó la cerveza holandesa tanto como a mí: murió. Mientras esperaba el móvil nuevo, usé uno viejo que solo servía para mandar mensajes, llamar y... ¡Snake! Así nació la idea de Snake '97, y este mes tocaba actualizar el juego, que se ha vuelto popularísimo. ![Café 't Pakhuis en Ámsterdam, donde se "inventó" Snake '97](https://willem.com/global/images/06e55a3e0198.webp) ## Snake '97 Programé el juego Snake por primera vez en 2011, para iOS. Tardé unas dos semanas en tener 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: sacó unas macros muy nítidas de mi móvil antiguo (sigue pareciéndome raro que tantos de vosotros llevéis en el bolsillo una copia de mi teléfono). ![Snake '97 en un iPhone X, con el aspecto y el tacto del juego retro de móvil de los 90](https://willem.com/global/images/ee992b73bb44.webp) Algunos blogs importantes lo recogieron (https://snake97.com/press/) y eso llevó a Snake '97 a lo más alto de las listas de todo el mundo. Hoy se juega en todas partes, está traducido a 53 idiomas y disponible para iOS, Android, Windows, ChromeOS y macOS. ![Snake '97 arrasando en las listas junto a Angry Birds y WhatsApp](https://willem.com/global/images/13f8f2dd6fc1.webp) ## Hacía falta una actualización En 2011 solo había un iPhone, el iPhone 4. Como desarrollador, podías olvidarte tranquilamente de Android, y Windows Phone ni siquiera existía todavía. La vida era tan bonita como puede desear un desarrollador (perezoso): un solo tamaño de pantalla. ![iPhone 4: ahhh, dulces recuerdos de desarrollador, cuando un solo tamaño (pequeño) servía para todo...](https://willem.com/global/images/87b0ccd8c5d9.webp) Avancemos hasta hoy: Apple vende ahora 8 iPhones y hay millones y millones de dispositivos Android, todos con pantallas, procesadores, memoria y versiones de software distintos. Decir que es un reto se queda corto... Para mantener la diversión en Snake '97 tuve que actualizar el motor del juego desde su mismo núcleo. De algún modo tenía que lograr que los gráficos encajaran en todas las pantallas del mundo y compensar las diferencias de potencia y de memoria... ![Prototipo de Snake '97 funcionando en varios dispositivos](https://willem.com/global/images/3da50637eff4.webp) ## Un motor de juego para gobernarlos a todos Las versiones originales del juego tenían cada una su propio motor. Uno para iOS, otro para Android, otro para Windows, etc. Cuando lancé Snake 2k (la variante de Snake II), simplemente añadí otro juego de motores. En total programé 6 motores de Snake distintos en Objective-C (iOS), Java (Android) y C# (Windows). Mantenerlos en marcha en dispositivos nuevos, con otros tamaños de pantalla, procesadores y memoria, se hacía cada vez más difícil. Pero este mes me armé de valor, y a lo grande. Rediseñé y construí otro motor de Snake, pero este estaba pensado para sustituir a todos los anteriores. Tenía que funcionar en iOS, Android y Windows. Quería un motor preparado para el futuro, para cualquier pantalla y cualquier tipo de entrada (teclado, táctil, lápiz, gamepad, joystick, lo que se te ocurra). ![Programando el nuevo motor y probándolo en un HMD Nokia 2 con Android](https://willem.com/global/images/8d20b82f1396.webp) ## HTML5 Rocks La web ha alcanzado a la tecnología de las apps nativas. Se han introducido muchas API nuevas que permiten experiencias interactivas ricas en todo tipo de dispositivos. Me pregunté lo difícil que sería hacer que Snake '97 funcionara con tecnología web. Solo había una forma de averiguarlo, así que me puse a ello. ### Gráficos adaptables Primero empecé a construir el motor gráfico sobre el canvas de HTML5 y un sistema de escalado adaptable 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. Y adapta automáticamente el material fotográfico de alta resolución a tu pantalla concreta. ![¿El mismo 3310? Mira bien y encuentra las diferencias entre el iPhone SE y el iPhone X](https://willem.com/global/images/37052d0f8036.webp) El nuevo motor gráfico se adapta incluso a rarezas como el notch del iPhone X. Todo esto ocurre en una fracción de segundo. También lo diseñé para que reaccione a los cambios de tamaño de pantalla. Ahora puedes jugar en vertical o en horizontal, en una ventana o a pantalla completa (o en pantalla dividida, si tienes un iPad). ![Gracias a los nuevos gráficos adaptables, ahora se puede jugar en pantalla panorámica](https://willem.com/global/images/98f47b70cb4c.webp) ![Snake '97 como app de escritorio para macOS, posible gracias a los nuevos gráficos escalables](https://willem.com/global/images/6848b7ac140f.webp) ### Diferencias de potencia ¿Crees que un juego sencillo no tiene que preocuparse por la potencia de cálculo? ¡Error! En un juego como Snake el tiempo lo es todo. La gente juega con "memoria muscular" y repite sus toquecitos en la pantalla táctil sin pensar en cada movimiento. El motor tiene que ser predecible y funcionar a un ritmo constante. Pero además, la experiencia debe ser la misma tanto en un Android viejo como en una bestia de 6 núcleos como el iPhone X. ![Analizando las diferencias de velocidad de juego con vídeo a cámara lenta](https://willem.com/global/images/a5e27801afbd.webp) Usé la cámara de alta velocidad del iPad Pro para grabar partidas de Snake a cámara lenta. Con el vídeo pude detectar diferencias de velocidad fotograma a fotograma. De ahí salió un sistema interno de benchmarking (con temporizadores, contando milisegundos) que ajusta automáticamente la velocidad del juego, afinada con precisión para tu dispositivo. ## Controles: táctil, teclado, lápiz, gamepad Los jugadores manejan la serpiente con los controles retro (el teclado del móvil antiguo). La versión original para iOS usaba UIButtons transparentes y fijos que coloqué sobre las fotos del móvil viejo. Un comienzo sencillo y eficaz. Por desgracia, los botones de iOS tenían algo de retardo (con demoras impredecibles en la entrada) y, como es lógico, no se adaptaban a otros tamaños de pantalla. Literalmente, escribí a mano coordenadas nuevas para cada iPhone que Apple sacó en los últimos años... un trabajo nada divertido. El nuevo motor usa un truco que desarrollé para la versión de Android: botones virtuales colocados dinámicamente. Con la información de escalado que calcula el motor gráfico, mantengo una matriz de coordenadas X e Y que corresponden a los botones virtuales. Cuando el jugador toca la pantalla, el motor calcula el botón más cercano con matemáticas: el teorema de Pitágoras. ![El código real de Snake '97 calculando distancias con el teorema de Pitágoras](https://willem.com/global/images/6251dc574a72.webp) Funciona a las mil maravillas y convierte toda la pantalla en un botón. Así es mucho más divertido jugar. Además del táctil, añadí compatibilidad con el teclado para que quien no tenga pantalla táctil también pueda jugar a Snake. Mientras trabajaba en los controles descubrí otra maravilla de HTML5: la API GamePad. Permite a programadores como yo dar soporte a gamepads, joysticks y otros dispositivos de entrada conectados por USB o Bluetooth. ![Manejar Snake con un mando de Super Nintendo es genial (con un conector USB SuperSmart-joy)](https://willem.com/global/images/07b9c2f3b1a4.webp) Soportar gamepads distintos es un reto, pero también es divertido. Seguro que perdí un día entero "probando"... perfeccionando mi técnica con el formidable mando de la SNES y la deliciosa palanca analógica del DualShock. ("Perdona, cariño, estoy trabajando...") ![Un truco que el Snake original no sabía hacer: jugar con un mando DualShock de PlayStation por Bluetooth, con stick analógico](https://willem.com/global/images/fa191d607fbb.webp) ## Internacionalización Si estás leyendo esto, seguramente entiendas inglés. Pero buena parte del público de Snake '97 no habla inglés. De hecho, hay jugadores en más de 30 idiomas distintos. Del español al ruso, del árabe al hebreo, del alemán al japonés. Lo que digas, Snake lo tiene. Diseñar una interfaz basada en texto es complicado si quieres llegar a todo el mundo. Los iconos tampoco son infalibles (una imagen puede significar cosas distintas). Como diseñador de UX tienes que pensar en conceptos de uso universal. Para Snake usé iconos de un reloj, un velocímetro, un altavoz y un trofeo. Son iconos comunes en todo el mundo y los elegí precisamente por eso. ![Diseño UX para un público internacional. ¡Diseñar interfaces sin palabras es difícil!](https://willem.com/global/images/12934c0ebe67.webp) La descripción de la app es un texto que encargué traducir a un servicio de traducción profesional. Otros editores se fían de Google Translate, pero sé que eso da resultados lamentables. ## Clasificación mundial En los 90 te ganabas un buen prestigio en la calle si conseguías una buena puntuación en Snake. En las versiones originales de Snake '97 solo tenías tu propio récord que superar y, en iOS, podías subir tu puntuación a GameCenter. Para la nueva versión quería un alcance más global, así que introduje la "clasificación mundial". Es la nueva tabla integrada que coloca tu partida al instante, comparando puntuaciones de gente de todo el mundo. Hay tres clasificaciones: de todos los tiempos, de las últimas 24 horas y de la última hora. ![Campeón mundial de Snake '97, pero no por mucho tiempo...](https://willem.com/global/images/37c761847d86.webp) Las puntuaciones las procesa un increíble servidor Intel XEON de 48 núcleos con una barbaridad de memoria. Funciona con Debian GNU/Linux, MariaDB, NGINX y NodeJS. En horas punta gestiona más de 10 puntuaciones por segundo. La configuración del servidor merece un artículo propio, que escribiré más adelante, así que estate atento a este blog si lo tuyo es el big data. ![Así es la nube, queridos niños y niñas.](https://willem.com/global/images/d31a2077c5a4.webp) ## Descárgalo ya Solo hay una forma de saber si mi trabajo ha valido la pena: pruébalo tú mismo. - 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) Si te encuentras algún error, avísame: aquí tienes mis datos de contacto (https://willem.com/). ![Snake '97, disponible como descarga gratuita para iOS, Android, macOS, Windows y ChromeOS](https://willem.com/global/images/5234dd3dd7ae.webp)