💾 Archived View for lufte.net › es › post › cronicas-lona captured on 2023-01-29 at 02:30:37. Gemini links have been rewritten to link to archived content
-=-=-=-=-=-=-
Publicado el 2020-04-30
En 2013 Mozilla lanzó Firefox OS[1], un sistema operativo para celulares que estaba basado en su motor de renderizado Gecko. La premisa para este nuevo SO era que todas las aplicaciones se escribirÃan utilizando tecnologÃas web abiertas, básicamente HTML5 y JavaScript.
Cerca de un año más tarde me compré uno de los teléfonos que ya traÃan Firefox OS instalado, y decidà que escribirÃa un juego para él. No me considero un desarrollador de videojuegos, pero el enfoque de "todo es una aplicación web" hacÃa que el proyecto fuera más accesible que escribir un juego para, por ejemplo, Android. Además tenés toda la novedad de un ecosistema totalmente nuevo, con nuevos usuarios y menos, muchas menos aplicaciones en la tienda.
No querÃa escribir un juego gigantesco que nunca terminarÃa. Más bien querÃa tomar un concepto bien simple y construir un juego completo en base a él, con instrucciones, logo, y traducciones; y tenerlo publicado en el Marketplace de Firefox OS. No requerirÃa niveles de ningún tipo y en su lugar usarÃa un estilo similar al de Tetris donde jugás hasta que perdés. Y mientras menos controles necesitara, mejor, con solo un control siendo lo ideal.
Entonces recordé el clásico "Snake" de los viejos teléfonos Nokia. Se me ocurrió que si la serpiente rotara en vez de avanzar, el juego requerirÃa solo un control para cambiar su dirección. Además parecÃa ser un cambio suficiente como para darle al juego un nuevo estilo original.
Pues bien, es un juego de serpiente. De acuerdo a Wikipedia en inglés existen más de 300 juegos de ese estilo solo para iOS[2], asà que probablemente este juego no iba a revolucionar la industria; pero no querÃa darle mucho más pienso y empecé a programar.
[2] "Snake game" en Wikipedia en inglés
El "Alcatel One Touch Fire C" corriendo Lona
Nunca habÃa escrito un juego en JavaScript. SabÃa de la existencia de canvas, pero no conocÃa requestAnimationFrame[3], que era mozRequestAnimationFrame en aquella época. De todas formas, no le di importancia a canvas y se me ocurrió que mover algunos divs con CSS serÃa suficiente. No tardé en darme cuenta que eso era un error.
[3] Documentación de requestAnimationFrame
¡Mirá como se mueven esos divs!
Ahora en 2020 no se ve tan mal en mi laptop con cuatro núcleos, pero creeme que esta no era una vista agradable cuando estaba escribiendo el juego, especialmente cuando lo ejecutaba en el teléfono. De cualquier manera, esta técnica era suficiente para determinar la lógica en sÃ. ¿Qué estructura debÃa usar para la serpiente? ¿Es un arreglo de pequeñas partes o un único cuerpo entero? ¿Cómo se debÃan mover las partes? ¿Cómo debÃa torcerse el cuerpo? Hice un par de pruebas más con los divs pero empezaba a notarse que necesitaba el "único cuerpo entero que se tuerce", y no iba a poder hacer eso con elementos HTML y CSS. Era hora de moverse al canvas.
Para la siguiente versión decidà que escribirÃa la serpiente como un arreglo de "centros", donde cada centro dibujarÃa una sección de un cÃrculo con un borde ancho. Este borde serÃa el cuerpo de la serpiente, y las uniones entre los bordes de cÃrculos diferentes serÃan los giros del cuerpo. El usuario solo necesitarÃa tocar la pantalla y un nuevo centro se agregarÃa al arreglo, resultando en que la serpiente realizaba un nuevo giro.
Recuerdo haber tenido varios problemas descifrando exactamente dónde posicionar los centros en cada nuevo giro. Luego, más problemas determinando las colisiones con el borde de la pantalla. Finalmente, algunos otros problemas determinando las colisiones del cuerpo consigo mismo. Pero después de muchos problemas tenÃa la lógica completa. Un último cambio para hacer uso de requestAnimationFrame (en vez de dormir una cantidad fija de tiempo con setTimeout) y el resultado corrÃa bastante bien.
Desgraciadamente, no tengo la historia completa de la versión con canvas en el repositorio. El supuesto primer commit[4] apunta a una versión que más o menos se ve como la versión actual. Supongo que no empecé a usar git hasta ya estar bastante avanzado con el juego. Las versiones más viejas basadas en divs las tenÃa respaldadas en una carpeta aparte fuera del repo.
[4] El primer commit en el repositorio de Lona
Era hora de hacer que se vea bien y darle un nombre.
Uf, la parte divertida ya habÃa terminado y el juego estaba completo, ¿en serio necesitaba hacer esta parte? Bueno, sÃ, me habÃa prometido a mà mismo que el juego serÃa simple solo para tener tiempo para hacer esta otra parte. Asà que rápidamente le di un nombre, "Lona", solo porque querÃa un nombre femenino y corto que no fuera un nombre personal de verdad.
Luego vino el estilo. Me decidà por una simple paleta de tres colores con marrón, amarillo y verde. Conseguà una fuente muy bonita (¡gracias Ruji[5]!) para los textos, agregué instrucciones, puntajes, y traduje todo al español e inglés.
Antes de publicarlo en cualquier lado necesitaba un logo. Yo no dibujo. *En absoluto*. ¿Pero qué podÃa hacer? No podÃa simplemente sacar una imágen prediseñada de la web como hice con la fuente. El logo tenÃa que ser más personal. Pensé en pedirle a alguien que lo dibuje por mÃ, pero eso llevarÃa más tiempo y a esta altura ya querÃa terminar de una vez. Asà que entré a GIMP y produje lo que, hasta este dÃa, tiene que ser la pieza de arte más magnÃfica que ha salido de estas manos. Digo, miralo, está dibujado en perspectiva y tiene sombra. ¡Sombra!
Estaba pronto. No recuerdo el proceso de publicarlo en el Marketplace de Firefox OS pero eso significa que debe haber sido bastante fácil, de otra forma lo recordarÃa. También liberé el código bajo la GPL. Pasado un tiempo ya tenÃa algunos comentarios positivos de usuarios (ahora perdidos para siempre, pues he podido encontrar archivos[6] del Marketplace pero no con las opiniones incluidas) y reportes de bugs en Github. Algunos amigos cercanos estaban jugándolo y realmente les gustaba. Hasta yo disfrutaba jugarlo. En este punto consideré que el juego estaba completo y decidà que no le agregarÃa más funciones o contenido.
[6] Archivo del marketplace de FirefoxOS de 2018
Algunos apuntes graciosos de cuando lo estaba escribiendo
Lona ha visto una buena cuota de actividad desde que lo publiqué. La gente reporta bugs y manda cambios. Alguien lo tradujo al italiano[7].
[7] Una pull request para traducir Lona al italiano
En 2016 integré Lona con la Plataforma de Juegos de Telegram[8], la cual te permite jugar a Lona dentro de la app de Telegram y enviar tu puntaje a un marcador que automáticamente se publica en el chat. No mantuve eso por mucho tiempo, lamentablemente.
[8] Plataforma de juegos de Telegram
También por esa época, Mozilla anunció que Firefox OS habÃa llegado a su fin. El Marketplace también se iba a cerrar. Alguien me pidió que pase el juego a Android usando Cordova y (luego de 6 meses) lo hice[9]. Este proceso sà lo recuerdo, y debo admitir que usar Cordova fue un placer. Seguir los dos simples pasos del tutorial fue suficiente para tener un APK funcionando. Lo publiqué en F-Droid y Lona tenÃa una nueva casa.
Durante estos años también se me ha hecho saber que existen copias de Lona servidas en sospechosos sitios web de juegos. Le cambian el nombre, la paleta de colores, le agregan un poco de música (que no suena tan mal, admito), y esconden el juego tras un muro de propagandas. Además, quitan mi nombre (y los créditos de Ruji) de la pantalla de "acerca". Ya es bastante sorprendente que alguien juegue a esto, ¿pero llegar al punto de tomar el código, modificarlo, y publicarlo en Kongregate? Una locura. Mirá alguno de ellos en:
Una simple búsqueda de "Lona snake game" devuelve muchos más resultados.
Bien, esta fue la historia de mi jueguito Lona. Un simple juego de serpiente, pero era original y la gente lo jugó. Para un desarrollador de videojuegos, a veces eso es suficiente para considerarlo un éxito. Si ahora vos tenés ganas de jugarlo, cliqueá acá[10].
