💾 Archived View for lufte.net › es › post › cronicas-lona captured on 2024-06-16 at 12:11:22. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2023-01-29)
-=-=-=-=-=-=-
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].
