Diseñando con Silverlight

Juego XNA para Windows Phone 7

Ricardo Acosta — Mon, 06 Sep 2010 09:10:44 GMT

Aquí tenéis la primera preview publica del juego que estamos haciendo en PlainConcepts para Windows Phone 7

Es un juego de estrategia basado en el clásico Tower Defense donde tienes que defender la base superviviente del ataque maliciosos zombies sedientos de carne fresca en un ambiente de lo mas postapocaliptico.

El juego esta completamente desarrollado desde 0 en XNA por un equipo de 3 personas; Luis Guerrero y Rodrigo Díaz para el desarrollo y yo para la parte de arte.

Hemos intentado ser muy cariñosos con la interfaz, y a pesar de que XNA no tiene la facilidad para llevarlo acabo como nuestro querido Silvelright, creo que ha quedado muy bien.

El juego esta en sus fases finales desarrollo y en el video no se muestra todo lo que tenemos hasta ahora, como muchos mas diferentes enemigos, mas minijuegos y efectos visuales.

Sin mas dilación! Aquí está Bye Bye Brain! espero que os guste!

Bye Bye Brain, Windows Phone 7 Game from riacosta on Vimeo.

Pin-Up de Diseño gráfico

Ricardo Acosta — Sun, 16 May 2010 19:19:19 GMT

Aquí os dejo mi ultima ilustración, una pin-up al estilo de los calendarios americanos de los años 50 pero para el disfrute de diseñadores gráficos del 2010. Que la disfrutéis!

Aventura Grafica de las de antes, en Silverlight.

Ricardo Acosta — Wed, 05 May 2010 09:59:00 GMT

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 :)

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.

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.

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!

Diseñando con Silverlight: Layout 2, El Canvas

Ricardo Acosta — Tue, 20 Apr 2010 22:55:27 GMT

Aquí tenéis la continuación del curso de silverlight para diseñadores con un video sencillito sobre el panel mas sencillo de silverlight, el canvas.

Entradas anteriores del curso:

Diseñando con Silverlight: Layout 1, El Grid

Diferencias cromáticas entre diseñadores y desarrolladores

Ricardo Acosta — Sat, 17 Apr 2010 11:24:45 GMT

No me he podido resistir a postear este magnifico grafico que todos , tanto programadores como diseñadores, hemos comentado alguna vez :).

- Ponlo en rojo - ya esta en rojo - es no es rojo, es magenta. – bueno, lo mismo es.

Diseñando con Silverlight: Layout 1, El Grid

Ricardo Acosta — Sat, 17 Apr 2010 09:37:53 GMT

Aquí tenéis el primer video del curso de Silverlight para diseñadores. Primero vamos a centrarnos en lo mas controvertido para los diseñadores que vienen de flash: El layout.

¿Porque cuando pongo objetos en la pantalla tienen un comportamiento raro? ¿Porque los objetos no tienen un tamaño concreto? ¿Porque a veces se cortan los bordes de un objeto?

Todas estas respuestas las veremos en el primer video del curso: Layout, El Grid.

Error al compilar con Blend 4 Beta Debug|CMD is invalid.

Ricardo Acosta — Wed, 07 Apr 2010 22:45:10 GMT

Desde que salió hace unos días en el MIX’10 la nueva versión de Blend me venia dando el mismo error al intentar compilar.

Era bastante insufrible ya que no te deja compilar y debía usar Visual Studio 2010 para hacerlo. Dando vueltas por internet encontré este post de Juan Diego Velasco que tuvo un error parecido con Blend 2 preview.

Decidí probar su solución aunque fuera para otra versión y ha solventado el problema para mi versión 4 beta perfectamente.

La solución:

Id al Registro (regedit.exe) y acceded a la direccion: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Environment

una vez ahí borrad la clave PLATFORM, cerrad regedit y reiniciad la maquina. Vuestro Blend compilará ya perfectamente :)

Champú, UX y Cintas de Video

Ricardo Acosta — Sun, 04 Apr 2010 01:10:52 GMT

Todos usamos champú o gel todos los días, pero sabíais que la experiencia de usuario es uno de sus factores determinantes?

Todos pensamos que cuando compramos un champú, lo único que nos importa es que nos deje el cabello limpio, suave y perfumado. Pero por desgracia esto no es del todo cierto. Los champús que compramos no solo están provistos de estas características “útiles”, si no que los laboratorios químicos los fabrican con una serie de cualidades que el usuario valorará inconscientemente pero que sirven absolutamente para nada.

La mas curiosamente inútil es "La espuma”.

Exactamente, la espuma del champú no solo no sirve para nada (higiénicamente hablando) si no que además encarece enormemente el precio de fabricación. Pero… habéis probado alguna vez algún champú que no haga espuma? Da como mal rollo, parece que no funciona, que no limpia.

Esto es porque los primeros jabones tenían impurezas que le hacían crear espuma y esto nos hizo asociar la espuma con la limpieza. Y como usuarios que somos, la inercia mental hace el resto. Estos conceptos estarán unidos en nuestra cabeza hasta el fin de los días, o hasta que alguien gaste dinero en nuestra re-educación.

La textura, densidad o el color son otras de las caracteriscas del champú que son realmente ajenas al verdadero fin del producto, pero que son esenciales para el usuario.

Si el champú constara tan solo de su agente activo; el detergente, que es al fin y al cabo lo que limpia. No lo compraríamos. No queremos que limpie, también queremos que parezca que limpie.

Este es solo un ejemplo de la importancia de la experiencia de usuario en el proceso de aceptación de un producto por parte del cliente. y es tan importante que puede marcar la diferencia entre el éxito o fracaso de un producto. A veces incluso por encima de su utilidad practica.

Precisamente por esta misma razón (salvado la piratería) la venta de música, películas y videojuegos online no acaba de tener el éxito esperado. ¿Para que me voy a comprar un disco en iTunes o una película si por un par de euros más tengo la caja con su manual, resumen, letras y tal.

Seamos sinceros, a no ser que seas un melómano o te guste mucho el cine o los juegos, el formato físico no vale absolutamente para nada que no sea coger polvo.

Pero estamos acostumbrados a que cuando compramos algo, compramos algo que se pueda tocar, algo que este en nuestra posesión y lo podamos mirar y sentir que es nuestro. Nada mas.

Incluso cuando bajamos una película corremos a grabarla en un DVD para quedarnos tranquilos sabiendo que siempre estará a nuestro lado. O imprimimos las fotos de flickr para tenerlas en casa, va a ser que los servidores de flickr salgan ardiendo.

Cuando compramos una película, no queremos solo el derecho a verla cuando nos plazca. Queremos algo mas, queremos sentir que nuestro dinero ha ido a parar a algo que podamos tocar tanto como queremos sentir la espuma suave entre nuestros dedos.

Por esta razón, el software sigue viniendo en Cajas. ¿Me compro el 3d Studio Max 2010 que vale nada menos que 3000€ y solo me mandan un mail con un enlace de descarga y una clave de licencia? De ninguna manera! quiero mi caja de 20centimos para ponerla en la estantería y sentir que soy el propietario.

Los usuarios somos así, y si sois listos y nos dais los que queremos. Compraremos vuestros productos. Y justo para eso estudiamos la experiencia de usuario, que no os engañen los charlatanes. Esto no es filosofía, es Marketing. Es dinero.

Video-resumen del Mix’10

Ricardo Acosta — Mon, 22 Mar 2010 13:14:56 GMT

Aquí tenéis un pequeño video de la experiencia de Plain Concepts en el Mix’10 con entrevistas, comentarios y demás.

Blend 4 Beta para Windows Phone 7 Series

Ricardo Acosta — Tue, 16 Mar 2010 20:35:17 GMT

Aquí estamos en el MIX’10 en las Vegas! El día después de que se presentara finalmente al mundo las características de desarrollo finales de Windows Phone. Como todos a estas alturas ya sabréis, Silverlight es la estrella en el desarrollo de aplicaciones para Phone y como era de esperar, Expression Blend es la herramienta para llevar a cabo nuestros diseños n_n.

Se presentaron además una serie de SDKs, Extensiones y demás para que podamos empezar a programar ahora mismo. Para ello debéis bajaros las Windows Phone Developer Tools que os instalará todo lo necesario para programar ( maquina virtual de Windows Phone incluida)

Por desgracia, solo os instala las extensiones para Visual Studio, además de una versión express especifica para desarrollo en Windows Phone.

Para poder trabajar directamente con Blend para hacer vuestras aplicaciones de movil debeis seguir los siguientes pasos:

Instala Blend 4 Beta:

http://www.microsoft.com/downloads/details.aspx?FamilyID=6f014e07-0053-4aca-84a7-cd82f9aa989f&displaylang=en

Instala el SDK de Blend para Windows phone:

http://www.microsoft.com/downloads/details.aspx?FamilyID=86370108-4c14-42ee-8855-226e5dd9b85b&displaylang=en

y por fin, instala el Add-in de Windows Phone para Blend 4

http://www.microsoft.com/downloads/details.aspx?FamilyID=47f5c718-9dec-4557-9687-619c0fdd3d4f&displaylang=en

y con un poco de suerte al abrir Blend, tendréis esta maravilla lista para usar.

Que lo disfrutéis! y recordad! What happens in XAML stays in XAML

La interfaz de Windows Phone podría ser Silverlight

Ricardo Acosta — Fri, 05 Mar 2010 14:10:00 GMT

Se que és mucho decir desde luego, pero leyendo este articulo de Microsoft News ‘‘Life in Motion’ Drives Development of New Windows Phone 7 Series” podemos ver a un diseñador de M.Corp. usando blend y con la interfaz de que todos conocemos en su interior.

Ya se que és mucho Hypear, y que probablemente sea que esta haciendo alguna demo o algo así. Pero la verdad es que después de que Microsoft haya hecho publico que el desarrollo de aplicaciones en Windows Phone será sobre Silverlight y XNA. ¿A quien no se le hace la boca agua?

10K smART coding challenge para MIX'10

Ricardo Acosta — Wed, 03 Feb 2010 10:20:00 GMT

En un par de dias acabará el plazo de entrega del reto programacion de aplicaciones web en 10kbs o menos. No ha sido facil pero aqui teneis mi propuesta! Espero que os guste!

Silverlight Rocks!