Aventura Grafica de las de antes, en Silverlight.

Todos los que me conocen saben mi afición y la de mi novia por los videojuegos antiguos. Sobre todo aventuras graficas como Monkey Island o El día del tentáculo. De hecho ella hace maravillas como esta pintada a mano que me regaló por mi cumpleaños 🙂

Monkey_Island_Converse_by_Maya_Plisetskaya[1]

Así que como veis yo tenia el listón muy alto para hacerle un regalo a la altura. Así que me puse manos a la obra.

Gracias a mi enfermiza obsesión por Silverlight tuve una gran idea! Hacerle una aventura grafica en Silverlight (3.0).

La empresa no era nada fácil. No solo la programación del motor, lo mas complicado era hacer los gráficos, contando con animaciones y fondos. Sabiendo también que silverlight no es lo mas optimo para hacer este tipo de cosas ya que como sabéis, la animación tradicional, frame by frame, es algo muy difícil de manejar con esta tecnología. Por si fuera poco, el juego debía estar pixelado y mantener los pixeles para cualquier resolución. Esto parece muy fácil y evidente, pero recordad que silverlight suaviza ABSOLUTAMENTE TODO en la pantalla, con lo que saltarme esto no iba a ser fácil.

Con 2 semanas de plazo para acabar empecé por hacer los fondos con photoshop a la misma resolución que hubiera tenido en 1989: 320x240pixeles.

 

image

 

Una vez tenía el primer fondo, mi prioridad fue estirarlo manteniendo el pixelado. Intenté primero meterlo en un viewbox a ver si quedaba bien a pesar del suavizado. Evidentemente el filtrado bilineal sobre mi fondo pixelado mataba todo el espíritu del pixel así que había que hacer algo.

Mi siguiente opción fue capturar el original con WriteableBitmap y estirarlo. Pero esto daba el mismo resultado consumiendo además recursos tontamente. Fue entonces cuando PixelShader llego a mi cabeza.

Un pixelshader que pixelara la imagen previamente estirada era una solución condenada a fallar antes de compilar pero la probé de todos modos. Fail.

Entonces pensé que el filtrado, se le aplicaría una vez renderizado el bitmap por culpa del motor de dibujado de Silverlight. Para resolver este problema tenía que saltarme completamente el proceso de estirado. La solución fue relativamente sencilla: capturar el bitmap en su verdadera proporción (1:1) y pintarlo yo mediante pixelShader. Aquí tenéis un esquema de como lo hice.

image

El resultado era visualmente perfecto, se adaptaba a todos los tamaños gracias al viewbox y mantenía el pixelado sin suavizar. Eso si, consumía mas recursos que sin pixelar (que paradoja eh!?) ya que el procesador capturaba la imagen cada fracción de segundo. Pero no era nada preocupante, como digo siempre, el procesador esta para usarlo!.

El siguiente tema peliagudo fue la animación de los personajes, ya que Blend no permite animar framebyframe mapas de bits. la solución fue sencilla esta vez. Cree un control que cargaba grupos de imagenes ordenadamente y las mostraba en un tiempo y orden concreto (numerado) con lo que solo quedaba dibujar el personaje en photoshop y animarlo por sprites. Después usé Estado Visuales para cambiar de una secuencia a otra de imágenes para así crear todos los estados del personaje; andando, hablando, y las distintas posiciones: Arriba, Abajo, Izquierda y Derecha.

Para no aburriros mucho mas, os dejo el link con el resultado completamente jugable del regalo. Si quereis que os cuente mas sobre como lo hice dejad un comentario o escribidme un email y estare encantado de responderos!.

Por cierto! los escenarios están todos ambientados en mi propia casa y bueno, la protagonista es Maya, mi novia 🙂

www.godsavethesquid.com

 

Que lo disfrutéis!

image

image