Con el regusto de la rica cerveza de barril aun en el paladar tras unos fabulosos dias investigando interacción en el Oktoberfest en Munich. Me he decidido a hacer una serie de Post sobre PixelShaders aplicados a WPF, veremos sus posibles utilidades en el diseño de nuestra aplicación, asi como las peculiaridades a la hora de usarlo sobre nuestra tecnologia favorita.  Explicaré en la medida de lo posible los conceptos mas importantes para pensar en pixelshader y un poco del lenguaje en el que nos toca programarlo HSLS.

Hasta entonces os dejo con un pequeño ejemplo de uso de un pixelShader muy muy sencillo. Salud!!!

LiveToBeerShader.rar ~ 2.5Mb
(Necesitas Framework 3.5 SP1 y una tarjeta que soporte PixelShader 2.0)

Esta misma mañana he terminado un Decorator muy útil y resultón para los Viewport3D. El Decorador añade un elemento tan importante al renderizado del Viewport3D como es la profundidad de campo. Si haceis una fotografia a un objeto, grabais un video o simplemente mirais a algo, vereis que no todo esta enfocado. De hecho la mayoria está desenfocado, menos el plano que se encuentra a cierta distancia del foco (El plano focal). Esto que se intenta evitar bastante en el cine (ya que pierdes la información de lo que no esta enfocado) pero es un recurso artistico muy importante en fotografia.

Pues bien, esto es lo que hace el decorador, focaliza lo que esta en el plano focal y desenfoca lo que esta lejos de él. Añadiendo un toque de realismo a la escena. En cuanto al rendimiento, evidentemente cargará más nuestra aplicación, pero gracias a que es la GPU la que se encarga de los Shader que intervienen en el efecto, podemos usarlo con relativa tranquilidad. Eso si, como es habitual en WPF vamos a necesitar un equipo potente para que vaya fluido.

En fin, aqui os dejo un ejemplo del efecto ya aplicado a una pequeña nube de Teapots con y sin profundidad de campo.

 DepthOfFieldsDecoratorExample.rar ~ 80kbs
(Necesitas Framework 3.5 SP1 y una tarjeta que soporte PixelShader 2.0)

Acaba de terminar la tercera edicion de MadinSpain, que tuvo lugar en el Palacio de Congresos de Madrid. Se trata de un evento de escala internacional sobre diseño y comunicación interactiva al que he tenido la oportunidad de ir.

Entre los ponentes contamos con profesionales nacionales de la talla de Lamosca, Albert Folch, Zinkia (Pajarotooo!!), Carlos Ulloa y muchos otros. Y por supuesto ponentes internacionales  como Apple, Adobe, Farfar, Waskman, Brand new school, Joshua Davis...

El evento esta orientado a Diseño, Comunicacion publicitaria y Arte Editorial. Lo que permite hacerse una idea de la vanguardia del diseño tanto en nuestro pais como en el extranjero.

Me impresiono ver trabajos de la talla de los de Brand New School que siendo solo 12 personas hacen cosas muy buenas. Como una gran pantalla interactiva de metro y medio por 3 metros (!!!) desarrollada integramente con productos de adobe (y programada en flash claro esta) que reconocía el movimientos de la gente al pasar y creaba aleatoria pero estudiadamente bellas formas en la pantalla. El proyecto lo realizaron en 3 semanas solamente y la verdad es que era un gran trabajo. (Es verdad es que iba un poco petadillo, pero era flash, que le vamos a hacer! xD)

El genial Joshua Davis con su peculiar manera de dar charlas nos motivo un poco a todos con su trabajo y su filosofía. ("El arte esta en todas partes! fijaos en él!") Este Skater-man (a sus 37 añazos) es una persona muy particular y por ello hace algo muy particular. Hace arte a partir de números aleatorios y posicionar formas en la pantalla de una manera entre medida y randomizadamente (existe esa palabra?, espero que si). El resultado son una imagenes muy completas aunque muy estéticas, y la verdad es que verlas en movimiento es todo un placer para la vista. Además desde su punto de vista el hecho de que sean "puramente" aleatorias es un gran valor añadido al asunto, ya que es el universo la que las ha puesto ahi. Eso si, aprovechó para dar a conocer su nueva gama de productos a ver si el universo ponía de paso unos dolares en su bolsillo.

He de decir que quizás esperaba mas de diseño de interacción en el evento y mas Flasheros sueltos por el  lugar. Todo el mundo lucía su mac hasta el punto que te daba vergüenza sacar tu PC con su Vista instalado, pero bueno esto no es mas que otra muestra de que entre toda esa supuesta creatividad se esconden personalidades estereotipadas e inseguras, como un rebaño para-creativo que flutua según lo que dicta una manzana blanca luminosa.

Me sorprendio muchisimo como,  los diseñadores de interfaces de usuario, somos absolutamente ajenos a este mundo. Paradojicamente aunque nuestra profesion es también una rama del diseño, parece que estamos mas pegados al desarrollo que al arte. Si que habia desde luego toneladas de diseñadores de interfaces para web, pero al ser su target la publicidad, no jugamos al mismo juego.Quizas sea esta desconexión con el mundo del diseño el motivo del bajo nivel que tenemos en UX en españa. Los diseñadores no están apostando por esto, no ven como se le puede aplicar arte a algo tan supuestamente estático y formado como la interfaz de un programa. Y al final, tenemos a los programadores haciendo nuestro trabajo, con lo que conseguimos un nivel muy bajo y el desprestigio de el mismo, ya que parece que cualquiera que se instale photoshop y blend es diseñador.

La exploración del interfaz de usuario es el nuevo boom de la informática y lo que mas revuelo causará de aqui a unos años (y de hecho ya esta causando). Esto es una tarea difícil y artística y nos hace falta mucho talento para sacarla a flote.  Un mar inexplorado en el que nos han dado una magnifica carabela para descubrirlo, modelarlo y surcarlo. ¿Vas a dejar pasar la oportunidad de ser un pionero? 

El Diseño emocional es un termino muy vanguardista en la actualidad. La verdad es que es un termino muy pedante para decir una cosa tan sencilla y campechana como: Los usuarios no son maquinas, son humanos.

En el mundo del desarrollo de aplicaciones, normalmente, se trata a los usuarios como si no tuvieran sentimientos, emociones o alguna capacidad cognitiva que no sea interpretar datos. Esto es, evidentemente, un gran error. Los seres humanos somos seres complejos, muchisimo mas que un ordenador. (es curioso que haya que recordar esto!) Tenemos una enorme capacidad para interactuar y sentir el mundo. Somos seres sensoriales, nuestro cuerpo se diseñó (o evolucionó, mejor dicho) para reconocer e identificar magnitudes de muchas maneras. Y las procesamos de muchas formas distintas. Una de estas, son las Emociones.

¿Quiere decir esto que tenemos que llevar gafas de pasta y decir que hemos estudiado antropología para usar este concepto en nuestro trabajo? ...No.

Sin entrar mucho en divagaciones, el diseño emocional nos recuerda que nuestro objetivo consiste en comunicarnos con el usuario final. Y que a pesar de que nuestro trabajo parece totalmente ajeno a esto, provocará en él reacciones emocionales.

La mas evidente de todas ellas, y nuestro mayor objetivo a evitar, es la frustracion.  Cuando un usuario no sabe como continuar su próximo movimiento en nuestro interfaz se sentirá frustrado. Al sentirse frustrado su felicidad bajará (si, como los sims) y le provocaremos estres. Y esta no es nuestra intención. (por norma general)

Por supuesto podéis evocar cualquier emoción mediante un simple interfaz de usuario. Debéis elegir, medir y programar, las emociones necesarias para work-flow de la aplicacion. Por ejemplo, si tenéis una web con un preloader interesante y divertido, el usuario no se aburrirá y se quedará a ver lo que tenéis que decir. Como veis son todos emociones!

Un aspecto muy importante del diseño emocional, es la Arquitectura de la información. Los flujos de información (tanto estructural como formal) deben estar dispuestos de una manera acorde a como la mente del usuario espera encontrarlos. Es decir, si tengo una base de datos con una tabla con 10 campos. ¿Que es lo habitual? pues paso toda la informacion a un grid y punto. Que el usuario lea, edite y maneje la información desde ahí. 

NO!

Que debemos hacer? o mejor dicho, que debemos hacer según este nuevo paradigma de diseño emocional? Fácil, leer y investigar acerca de la información contenida en la base de datos. Los datos no son solo "el relleno" de una estructura de datos. Los datos son (o suelen ser) magnitudes con un significado real o cognitivo. Y como tales, debemos buscar la mejor dimension para representarlos. Además debemos diseñar un flujo de trabajo "humano". No hacerlo de la manera que nos resulte mas sencilla de programar. El usuario es el objetivo, la meta, el cliente, el fin, debemos tratarlo como si fuéramos nosotros mismos. De hecho, lo somos.

12MP (12 Meses, 12 Proyectos) es una iniciativa que hace un tiempo intentamos llevar a cabo un pequeño grupo de desarrolladores. Se trata de realizar un proyecto en un fin de semana, empieza y se acaba obligatoriamente en esos escasos 3 dias. El objetivo es tener algo que funcione para el lunes, aunque por ahora la verdad es que siempre se nos ha hechado el tiempo encima.

La idea es crear algo que sea sencillo y divertido de realizar. De esta manera ya que nos pasamos todo el fin de semana programando, por lo menos lo pasamos bien, francamente bien.

Este mes se nos ha ocurrido hacer un remake del juego Volfield (o el tipico juego de recreativa de descubrir japonesas en bikini xD) Estoy seguro de que lo conoceis.

Decidimos que sería interesante usar alguna tecnología mas afín al mundo de los videojuegos que WPF o Silverlight, asi que decidimos embarcarnos con Microsoft XNA 3 y ademas así, podriamos jugar en la XBOX, lo cual siempre es interesante.

Yo me ocupo de el “arte” del juego, es decir, el diseño conceptual, modelos, texturas y un poco del diseño de interacción. Al tener tan poco tiempo, normalmente no sigo los pasos ordinarios de este tipo de proyectos, y modelo directamente sin hacer diseños conceptuales. Pero en esta ocasión me pareció interesante seguirlos para ver las mejoras que traia consigo.

Diseño conceptual de un videojuego en 48 horas.

En primer lugar y como es natural debemos partir de una idea, en este caso el remake de volfield pero en un espacio tridimensional esferico (por usar las 3D de XNA). Para empezar vamos con…

El paso de la Servilleta.

Este paso nos ayuda a pensar de una manera grafica, ya que podemos dibujar al tiempo que nos imaginamos la escena.  Nostromo, tendria un planeta centrado en la pantalla. Una nave extraterrestre sería nuestro personaje-jugador y nuestra misióm será limpiar un contaminado planeta tierra. Si, como en Wall·e.

Este paso nos da una idea general del juego, tanto en cuestiones de desarrollo como de arte e interacción. La nave se moverá radialmente por el planeta partiendo de los polos y podremos girar la camara a voluntad independientemente de donde este la nave. Habra 2 tipo de enemigos, los de tierra (que estarán estaticos y lanzarán cohetes si nos acercamos y los de mar, que son moviles. Para el resto mantememos la jugabilidad del juego original.

El Diseño Conceptual.

Esta es la fase más artistica de todas, donde vamos a decidir el estilo grafico del juego. Decimos los efectos de luces, estilos de modelado, texturas etc.. En resumidas cuentas diseñamos la “cara” del juego. Este es el boceto que resultó

Jugariamos con el sol y el movimiento de la camara para simular amaneceres y atardeceres. los edificios serán modelos y no simplemente texturas. El planeta debe tener una pequeña simulacion de atmosfera pero sin nubes. Encuanto a los enemigos quedamos tal que así.

En este paso es importante no perder mucho tiempo, es decir, es un paso muy importante pero hay que tener en cuenta que todos los graficos que hagais aquí, no quedarán reflejados en el videojuego. No es importante que los dibujos sean muy buenos, lo importante es que sean descriptivos, expresivos y definan bien la idea. Si detallais demasiado o dibujais perpetivas mas artisticas que utiles, estareis perdiendo el tiempo. Lo importante del diseño conceptual es el concepto!

Modelado en 3D dimensiones.

Ahora si que vamos a empezar a trabajar. El modelado 3D debe ser lo mas parecido posible al concepto, siempre mirando eso si, la parte tecnica (poligonos, calidad de las texturas, shaders…). Si el diseñador ha hecho algo que es imposible o muy costoso de hacer (recordad que estamos en un desarrollo rapido) tendreis que hablar con él y llegar a algún punto medio.

En este Caso como la tecnología nos lo permitia, no hemos reparado demasiado en poligonos n_n.

Texturizado.

Las texturas, es en mi opinion mas parte mas compleja, larga e importante de todo el proceso, eso si, es muy agradecida. Este es un paso muy importante ya que es el que mas estilo va a darle a nuestro juego. Aqui si debemos ser detallistas y cuidadosos. Debemos tambien ser despiertos y habiles ya que nos va a permitir ahorrar muchos recursos si somos listos.

Que os parece? Creo que queda bastante resultón sin siquiera usar ningun Shader. Nos hemos pasado un poco el los poligonos, pero en un fin de semana tampoco vamos a ponernos a optimizar mucho! y ademas XNA podrá moverlo sin problemas en un ordenador medio. (por no hablar de la Xbox360)

Ahora solo queda dar estos modelos a los desarrolladores y que lo integren en la aplicación!

Y bueno, nada mas por hoy. Falta el tema de Shaders pero no os preocupeis que pronto hablaremos largo y dendido sobre shaders y hasta donde podemos llegar con ellos con nuestras aplicaciones.

En breve colgamos lo que tengamos del juego!

Hay una Relato muy curioso en el libro “El hombre que confundio a su mujer con un sombrero” (del Dr. Oliver Sacks) que cuenta la historia de un profesor de Musica con una extraña enfermedad cerebral degenerativa, la cual le atrofió el pensamiento abstacto y otras capacidades cognitivas.

El Profesor P. (este curioso profesor de musica aleman) presentaba un extraño comportamiento a la hora de reconocer objetos visualmente. Él poseia una vista de lince. Podia ver incluso un alfiler al otro lado de la habitación. Siembargo, el profesor P. no era capaz de reconocer algunos objetos o incluso personas.

Mirando retratos de su familia solo conseguía reconocer a aquellos que tenían rasgos faciales o corporales notables; – Ah sí, Paul!- decia al ver una foto de su hermano. Esa mandibula cuadra, esos dientes tan grandes.. Reconoceria a Paul en cualquier parte!.

Desgraciadamente no podia reconocerse a si mismo o a su mujer. Cuenta Sacks en el libro, que no solo no la reconocia, si no que la llego a confundir con un sombrero e intento ponersela en la cabeza.

Este hombre no era capaz de relacionar las formas que veian sus ojos con objetos de la realidad. Cuando el Doctor Sacks le enseña una rosa, esta fue su reaccion:

“La cogió como un botánico o un morfologo al que le dan un especimen, no como una persona a la que le dan una flor.

-Unos quince centrimetros de longitud – comentó- una forma roja enrollada con un añadido lineal verde.

– Exacto - ¿Y que cree que es?

-No es facil de decir.. Carece de la simetria simple de los solidos platonicos, aunque quizas tenga una simetría superior propia.. creo que podria ser una inflorescencia o una flor. 

- ¿Prodria ser? – inquirí. Huélala. Y de nuevo pareció sorprenderse un poco, como si le hubiese pedido que oliese una “simetria superior”. Pero accedió y cortés se la acerco a la nariz. Entonces bruscamente exclamo:

-Que maravilla, una rosa temprana! “

(extracto del libro)

La verdad es que al leer esto supe que aunque el doctor Sacks no lo supiera, habia dado con el principal problema del interfaz de usuario. – La abstraccion -

Seguramente habeis visto iconos y aplicaciones las cuales al mirarlas os habeis quedado como el Profesor P. al ver la rosa, traspuestos. Y el problema es que el interfaz (o el icono) no es capaz de comunicaros con una parte de vuesta realidad. Vemos formas, colores incluso sonidos. pero no somos capaces de extraer la información o el significado. Con lo cual estamos, literalmente, perdidos.

Los colores, las formas, las animaciones y sonidos no son solo recursos esteticos, de hecho esto debe ser (desde un punto de vista funcionalista) el ultimo de nuestros requisitos. Son en su lugar poderosas herramientas de comunicación. Son el vinculo entre la “utilidad” de la aplicacion y el cerebro del usuario.

Debemos saber comunicarnos con él. Para eso debemos dar un significado “real” a nuestro interfaz. Por real no me refiero a que tengamos que evocar objetos en todos nuestros iconos. Si no que debemos conectar con el usuario, y disparar en él un recuerdo, un significado en su mente, que él pueda asociar a algo cognitivo.

El un futuro post, abordaremos una de las mejores maneras de llegar a esto: La metafora como herramienta sinestesica.