Blog

Juan Mellado, 2 Febrero, 2013 - 14:49

Ayer liberé los fuentes de dart-solitaire, una versión escrita en Dart del clásico juego de cartas del solitario. No es un juego demasiado complejo, así que lo usé como excusa para empezar un nuevo proyecto y seguir probando este nuevo lenguaje de programación aún en desarrollo. En mi caso además tenía el aliciente añadido de que hace siete años escribí una versión del mismo juego directamente en JavaScript, en un época donde nadie apenas hacía desarrollos en JavaScript, y me venía estupendamente para comparar las formas de desarrollar en uno y otro lenguaje.

Demo online: http://www.inmensia.com/files/dart-solitaire/solitaire.html

Cuando me planteé volver a escribir este juego, además de implementar la mecánica básica, me propuse añadir algunas opciones que siempre había querido desarrollar, como la opción de "undo" para deshacer las jugadas por ejemplo. La manera tradicional de codificar esta opción es utilizando un patrón de diseño llamado "Command", y así es como lo he acabado implementando para no andar reinventando la rueda. Es curioso, casi podría decir que empecé el proyecto para implementar este tipo de cosas en vez del juego en si mismo.

El código puedo decir que prácticamente lo he escrito dos veces. La primera vez usé una solución basada en elementos HTML y CSS, donde las cartas por ejemplo eran elementos HTML de tipo DIV. Pero después de tener una versión funcionando empecé a pensar que me gustaría probar una solución basada en el uso de un CANVAS. Y dicho y hecho, empecé a cambiar todo el código que ya tenía escrito hasta conseguir una nueva versión basada en el manejo de sprites esta vez. Es ese tipo de cosas que uno sólo se plantea hacer en proyectos personales, donde no hay restricciones de tiempo, en los del trabajo no suele haber tanta libertad.

Una ventaja añadida de usar un canvas es que me permitía implementar de una forma sencilla el famoso efecto de la versión para Windows, donde al finalizar una partida las cartas salían disparadas una a una rebotando y dejando un rastro de si mismas. Recordaba haberlo visto hace poco en una demo tecnológica llamada Winning Solitaire de Ricardo Cabello, así que estudié el código, muy sencillo, y lo adapté para incorporarlo al juego. Da igual en que lenguaje esté implementado, sigue siendo un buen efecto de fin de partida.

El tener el efecto de las cartas rebotando implementado a menos me compensa de algunas carencias obvias, como no tener una música de fondo, algún efecto sonoro, o incluso alguna que otra animación al manejar las cartas. Suelo trabajar solo en estos proyectos, así que tengo mis limitaciones a la hora de añadir determinadas características "creativas". En algunas de ellas simplemente no me apetece trabajar, y para otras carezco del talento necesario. Al menos puedo sentirme orgulloso de haber podido hacer los gráficos, que aunque sean sencillos me han llevado bastante tiempo.

Aunque el juego utiliza imágenes en formato PNG, las originales son gráficos vectoriales en formato SVG hechos con Inkscape. Inicialmente utilizaba directamente las imágenes en formato SVG, pero me encontré con algunos problemas de incompatibilidad entre los dos o tres navegadores más populares con los que estuve probando, ya que cada cual dibujaba las imágenes según su propio criterio, y lo que es peor, en algunos casos el rendimiento era absolutamente pésimo. He liberado los gráficos vectoriales originales por si alguien puede reutilizarlos para algún desarrollo propio.

He añadido además un par de opciones al juego para poder cambiar el diseño del tablero y del frontal de las cartas. Así como el número de cartas que se sacan del mazo cada vez. Aunque esto último lo dejo hacer incluso en medio de una partida sin reiniciarla, lo que no es del todo correcto. Otras opciones que podrían añadirse serían por ejemplo cambiar el diseño del reverso de las cartas, jugar contra el tiempo, añadir un sistema de puntuación, o un histórico de partidas jugadas.

Los mensajes y cuadros de diálogo están hechos con un poco de CSS, con el que parece que jamás llegaré a sentirme totalmente cómodo. Inicialmente pensé en utilizar bootstrap, con el que incluso llegué a hacer unas pruebas que me gustaron mucho, ya que el resultado es muy profesional, y resulta muy fácil añadir animaciones y otros efectos con JavaScript. No obstante, al final quité la dependencia y todo el código, ya que me dió la impresión de que el proyecto acabaría teniendo más CSS y código en JavaScript que en Dart.

Un detalle que me gustaría incorporar en el futuro, ya que ahora mismo no estoy en condiciones de probar como a mi me gustaría, es la gestión de eventos de tipo "touch" para que el juego funcione en los móviles con pantalla táctil en vez de sólo con el ratón. El problema es del "drag and drop", que los móviles interpretan como un "gesto", en vez de como un "click y arrastrar sin soltar el botón" de un ratón tradicional.

Respecto a las pruebas, decir que apenas he probado en el PC de casa con las últimas versiones de Chrome (dev channel), Firefox (ga) e Internet Explorer (10 rc). Y como de costumbre, Internet Explorer es el que más lata ha dado, incluso la nueva versión.

Por último, comentar que actualmente prefiero desarrollar en Dart que JavaScript. Me siento más cómodo con el lenguaje, lo encuentro más productivo. Poder trabajar con una sintaxis y estructura de clases e interfaces como la que ofrecen los lenguajes orientados a objetos tradiciones es mucho mejor para mi que trabajar con los prototipos de JavaScript. Para ser un lenguaje que está aún en desarrollo, con muchas cosas que limar, y muchas librerías que desarrollar aún, tiene el plus de ofrecer una "experiencia de codificación" muy gratificante, algo que me resulta difícil de explicar con palabras o cuantificar de una manera más concreta.

Temas: Dart
Juan Mellado, 19 Enero, 2013 - 22:22

DartDespués de actualizar dart-lzma a la versión M2 de Dart con bastante éxito, he aprovechado para actualizar también zx-dart, un simple emulador de Spectrum escrito en Dart que hice algún tiempo, y publicarlo como un paquete de aplicación en la página oficial de Google: http://pub.dartlang.org/packages/zx

Los cambios que he realizado son similares a los que hice para el otro proyecto:

  - Adaptado el código a la versión actual M2 de Dart. Nuevamente el wizard "Clean Up Source..." del Dart Editor ha sido muy útil.

  - Adaptada la estructura del proyecto al formato estándar de paquetes de aplicación de Dart.

  - Añadidos los clásicos ficheros ficheros LICENSE, README.md y CHANGES.md.

El proyecto ha tenido una buena acogida en la comunidad de Dart, e incluso he recibido cierto feedback acerca del rendimiento del emulador que va a investigar el equipo que está creando el lenguaje. Actualmente se ejecuta mucho más rápido cuando se compila de Dart a JavaScript que cuando se ejecuta directamente de forma nativa en Dartium.

Temas: Dart
Juan Mellado, 18 Enero, 2013 - 09:56

DartHe actualizado dart-lzma a la versión M2 de Dart. El lenguaje está en continua evolución, y algunos de los cambios que introduce Google en cada release hacen que el código de una versión ya no compile en la siguiente. dart-lzma es un proyecto que ya tiene casi un año de antiguedad, cuando Dart estaba en su versión alpha, por lo que estaba totalmente desactualizado en relación al estado actual del lenguaje y sus librerías.

En la nueva versión he realizado principalmente los siguientes cambios:

  - Adaptado el código a la versión actual M2 de Dart. El wizard "Clean Up" del Dart Editor ha sido muy útil para esta tarea. Me gustó mucho esta opción desde el principio y me sigue gustando. Lo que hace es detectar el código deprecado y sugerir el cambio a realizar. Como la típicas opciones de refactorizar de Eclipse.

  - Corregida la función de descompresión para conseguir que funcione tanto de forma nativa en Dart como cuando se compila a JavaScript. Esto fue una petición que me hicieron y que al final me ha servido para reactivar todo el proyecto (y a mí mismo).

  - Añadida una función para comprimir a formato LZMA. La librería original sólo permitía descomprimir, ya que estaba pensada para ser usada en la parte cliente, donde normalmente sólo interesa descomprimir los recursos comprimidos enviados desde el servidor. Pero como Dart permite realizar aplicaciones que pueden ejecutarse en la parte servidora utilizando el mismo código base, pues ahora tiene sentido añadir la opción de comprimir.

  - Adaptada la estructura del proyecto al formato estándar de paquetes de Dart. De hecho, la librería está ahora publicada como un paquete en la página oficial de Dart:

  http://pub.dartlang.org/packages/lzma

  - Añadidos dos programas de ejemplo para comprimir y descomprimir ficheros desde línea de comando.

  - Añadido un fichero README.md.

La versión actual puede añadirse como dependencia en cualquier proyecto en el fichero pubspec.yaml de la siguiente forma:

dependencies:
  lzma: 0.1.0

Aunque el proyecto ya lo doy más o menos por cerrado durante otra larga temporada, hay unas cuantas cosas que tengo que modificar:

  - Cambiar el formato de fichero README.md, que no parece ser compatible con el que es capaz de leer la web de paquetes de Dart.

  - Añadir un aviso en la página principal del proyecto, y en el fichero README.md, acerca de que es conveniente ejecutar el código desde el Dart Editor sin las opciones "checked" y "debug" activadas. Estas opciones ralentizan sobremanera la ejecución del código Dart, sobre todo cuando hacen un uso intensivo de la CPU, como es el caso de un compresor/descompresor.

  - Añadir un fichero CHANGES.md para actualizarlo en cada release.

  - Cambiar las clases de "streaming" que estoy utilizando ahora mismo. Quería utilizar las del paquete "io" estándar de Dart, pero no se pueden utilizar en la parte cliente, por lo que las he descartado. Al parecer hay un movimiento por parte del equipo de desarrollo de Dart para crear un nuevo paquete "stream", pero aún no está publicado y no tengo claro si es lo que necesito.

  - Añadir el paquete "fixnum" como dependencia. Actualmente tengo el código embebido dentro de mi librería, por que aún no está publicado en la web de paquetes. Este paquete proporciona las clases int32 y int64 que resultan útiles para trabajar con aritmética entera con un tamaño determinado en vez de ilimitado, que es como funcionan los enteros en Dart.

Me ha gustado tener la oportunidad de liberar el paquete en la página oficial de Google. Una experiencia más. Ya estoy planificando la actualización a Dart M2 del emulador de Spectrum de cara a liberarlo como un paquete de aplicación.

Temas: Personal
Juan Mellado, 26 Noviembre, 2012 - 11:39

He vuelto a cambiar de ciudad de residencia. Esta vez me he venido a vivir a Valencia. Es la quinta ciudad a todo lo largo de mi vida en la que voy a vivir. ¡A ver lo que duro por aquí!

Llevo poco más de dos meses viviendo aquí ya, aprovechando los fines de semana que no llueve para caminar sin rumbo fijo e irme encontrando lugares. Es agradable volver a vivir en un ciudad con grandes avenidas por las que pasear. Y volver a tener el mar cerca es todo un plus.

Como de costumbre durante el periodo de transición, con la mudanza y tal, he estado bastante desconectado del mundillo "online". Sin Internet en casa, e incluso sin ordenador. A ver si recupero un poco el ritmo y desarrollo algo.

Respecto al blog, hace unas semanas ví que estaban entrando bastante comentarios de spam, así que de momento están deshabilitados. Me tocará perder el tiempo revisando logs, el código del captcha, y cambiando la implementación si es preciso.

Temas: Personal
Juan Mellado, 13 Septiembre, 2012 - 12:03

VelitaOtro año más que cumple este blog. Siete para ser más exactos. Tantas como vidas tiene un gato. O tantas como tiene este blog, que se resiste a morir a pesar de todas las redes sociales que amenazan con hacerlo desaparecer.

Revisando los posts de estos últimos doce meses observo que últimamente le he prestado mucha atención a Dart, el nuevo lenguaje que está desarrollando Google, y que ha sido en general un año bastante productivo en cuanto a proyectos:

- js-handtracking: Una librería escrita en JavaScript que realiza procesamiento de imágenes en tiempo real, capaz de detectar el contorno de una mano de un vídeo capturado a través de una webcam.

- Hangar: Un visor WebGL de ficheros en formato AC3D escrito en JavaScript. Este formato lo utilizan algunos simuladores de conducción y aviación de código abierto.

- zx-dart: Un emulador de Spectrum que escribí en Dart.

- dart-lzma: Una implementación del algoritmo de compresión LZMA escrito en Dart. Conseguí que funcionará, pero nunca ha pasado de la versión alpha.

- js-aruco: Mi librería en JavaScript para la creación de aplicaciones de realidad aumentada. Conseguí aumentar el rendimiento e implementar el algoritmo para pasar de dos a tres dimensiones.

- J2EE: Una serie de artículos que estuve escribiendo durante una temporada revisando un montón de tecnologías afines a Java.

- Spring: Otra serie de artículos dedicados a Spring, ese framework para Java que todos odian y aman al mismo tiempo.

Y muchas otras pequeñas cosas, y no tan pequeñas, que me dejo en el tintero. A ver que me depara este nuevo año.