Material del Curso de WPF y Silverlight

Aquí os dejo un compendio de Ejemplos de WPF y Silverlight dados en el curso de Microsoft sobre estas tecnologías en la Universidad de VIC (Barcelona)

Encontraréis ejemplos sencillos pero muy utiles sobre Animacion, Brushes, Layout, Binding, Video, 3D etc... Teneis tambien un buen ejemplo sobre como hacer consultas de XML en Silverlight (aunque espero hacer un post sobre esto pronto :S). Disfrutadlo con sabiduría

image

 EjemplosVIC2008.rar ~ 8Mb
Necesitas Framework 3.5 SP1

Currently rated 4.0 by 2 people

  • Currently 4/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

WPF&Shaders: Prefacio

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!!!

image

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

Currently rated 5.0 by 2 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Desajustando aplicaciones, Coordenadas UVW en WPF

Dentro del workflow habitual de aplicaciones 3D como en videojuegos existe un paso algo desconocido llamado "Desajuste de coordenadas de mapeado" que consiste en generar una serie de coordenadas en nuestro modelo que nos permiten definir que poligonos de nuestro modelo se pondrán en que partes de nuestra textura.

En el caso de WPF es un paso muy importante ya que si nuestro modelo tiene alguna textura interactiva (Viewport2DVisual3D) es muy normal que queramos definir en que parte del modelo ha de representarse el Control de Usuario.

Vamos a definir primero unos conceptos:

- Coordenadas de Textura (o Coordenadas de Mapeado): Se trata de información intrínseca a la geometría del modelo y esta definida  por puntos de 2 Dimensiones (Point). (en el caso de UV, que es el que soporta WPF)

Los puntos definen un espacio comprendido entre 0 y 1 es decir, habrá puntos que sean 0,1 o 1,0 o 0.3,0.6 pero nunca 2,0 o 3,5. Tened en cuenta que lo que marcan estos puntos, es una posición relativa en el bitmap de la textura. Aunque WPF se tragará sin problemas una posición mayor a 1, siempre "estirará" las coordenadas hasta hacerlas unitarias.

Si las coordenadas son negativas (tipo -1,-0.3) WPF las estirará y mostrará la textura al revés, si el modelo está alojado en un ModelVisual3D. Pero si el modelo es interactivo (Viewport2DVisual3D) la textura no se verá, así que cuidado.

Mi recomendación es que SIEMPRE os aseguréis de que todas las coordenadas están por debajo de 1,1 y por encima de 0,0. Y también que siempre tenéis alguna de las coordenadas siempre en el borde, es decir que siempre haya una en 0,0 y otra en 1,1. De esta forma WPF no estirará las coordenadas y la textura se verá tal y como esperáis.

De todos modos todo esto lo podemos hacer de una manera visual, asi que no nos pongamos nerviosos y pasemos a explicar...

 ¿Como se generan estas coordenadas para poner las cosas donde yo quiero?

Pues bien, necesitamos un programa de modelado 3D (Yo uso 3DStudio Max, pero podéis usar igualmente Blender que es gratuito, Maya etc...).

Abrimos el Modelo y seleccionamos en la pestaña de modificadores UnWarp UVW y le damos al botón editar. Veremos una ventana con la representación de las coordenadas de mapeado (UV) tal que así.

image

Como podemos ver en la ventana Edit UVW hay un montón de puntos sin mucho sentido aparente. Pensad que son puntos son las proyecciones 2D de los puntos 3D del modelo. Ahora expandimos el modificados Unwarp UVW y seleccionamos "Face" y hacemos clic en alguna parte del modelo, vereis que se selecciona tanto en el Viewport o como en la ventana edit UVW. ¿Se entiende ya la cosa mejor?

image

Ahora por ejemplo seleccionemos la mitad de nuestro modelo (un pato en este caso) y proyectemos las coordenadas a un plano (Si bajáis en el menú de Unwarp UVW encontraréis muchas maneras de proyección) en este caso le daremos al botón "Planar"  y viereis como nos proyecta los polígonos a un plano dado (Align Y en el ejemplo).

image

Ahora id eligiendo partes del modelo y planos de mapeado óptimos hasta que lo defináis entero dentro del cuadrado azul de la ventana Edit UVW. Tened en cuenta que cuanto mas en verdadera proporción sea la proyección, mejor mapeada estará la textura y mejor de verá después.

Bueno yo después de un ratin he conseguido un mapeado de esta manera.

image

He separado el modelo en 2 partes, el pico y el cuerpo. Y ahora que lo tengo todo listo vamos a photoshopear un poco. Ahora que se que parte de la textura va en cada parte del modelo solo tengo que dibujar y colorear en photoshop una imagen que se ajuste. Debería quedar algo así:

pato image

Perfecto! (No es mi mejor textura pero da el pego bastante. Ahora no tenéis mas que importar el Modelo en OBJ, meterlo en Blend y en el Brush del DiffuseMaterial aplicarle la imagen! y listo.

En el próximo post explicaremos como hacer que la textura sea interactiva! Aquí os dejo un proyecto con el pato, el archivo de 3dstudio, el obj y la textura! Ale! a disfrutar!


imagePatosis WPF Project. 2.5 Mb Aprox.

Currently rated 5.0 by 2 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Espantajo party 2007! WPF

El Halloween pasado (unos 2 días antes) decidimos hacer un juego de mesa que amenizara la velada y que mejor para hacerlo con vídeo y 3d con nuestro amigo el WPF?

El juego es un sencillo juego de mesa donde los jugadores deberán ir contestando una serie de preguntas y realizando unas pruebas (mas o menos macabras y frikis) para conseguir llegar al caldero mágico del centro del tablero.

Las pruebas y preguntas estan en un fichero XML desde el cual Bindeamos los datos. Toda la parte de datos esta hecha por mi buen amigo Luis Guerrero quien sufrió conmigo las 2 escasas tardes de desarrollo que pudimos sacar.

El Interfaz, una vez mas está en 3D completamente (menos las puntuaciones y demás) Uno de los efectos mas resultones es cuando una carta al azar sale del mazo y se sitúa en medio de la pantalla para que puedas leer la prueba que te ha tocado.

El dedo también esta completamente en 3D y aunque la animación con la que saca cada numero esta mas o menos predefinida, la verdad es que quedo muy bien.

image image

image

Como colofon del juego, Raul Varela y yo hicimos unos videos de presentacion (rollo atmosfear ) con los que nos reimos bastante y quedaron muy resultones!

Si, acabamos todos borrachos si. :)

Currently rated 4.5 by 2 people

  • Currently 4.5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Ftype: Juegos casuales con WPF

Hace unos meses di una conferencia en la Universidad Complutense de Madrid explicando un poco el WorkFlow habitual para realizar VideoJuegos casuales con WPF 3D

Decidí inspirarme en algún juego  ya existente en el mercado y elegí el R-type. Que en realidad no es un juego casual, ya que tiene su historia y tal. Pero creo que hoy en día prácticamente puede considerarse casual.

Todo el proyecto esta realizado en un solo día por un servidor, así que no es precisamente un ejemplo de orden :) pero creo que ilustra muy bien la potencia que tiene la plataforma a la hora realizar este tipo de proyectos.

Los gráficos del juego están modelados con 3D Studio Max y son de poligonización media, las texturas llevan la luz incrustada para darle mayor realismo.

screenimage  image  image

Aquí os dejo el Proyecto por si queréis consultarlo. Todos los modelos están realizados por mi así que podéis usarlo como os plazca!


image

   Ftype WPF Project. 10Mb Aprox.

Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5