Aug 25, 2009

Cómo crear tu primer juego en Silverlight

Daniel Priego / Diseño, Expression Blend, Silverlight, SketchFlow, User Experience / 4 Comments

A pesar de que nunca fuí un fanático enfermo de los videojuegos (a excepción de Winning Eleven), puedo decir que pasé muy buenos ratos en sitios como Orisinal, Yahoo (el pool!), Poker de 7 manos, y algunos más y aunque constantemente me preguntaba quién y cómo hacían esos juegos nunca me adentré mucho más y seguí siendo “un usuario final”… hasta la semana pasada :)

Cómo hago mi primer juego?

Contrario a lo que puedas pensar, en este tutorial no estaremos haciendo nada relacionado con Código, Matemáticas, Física y demás: nos vamos a concentrar en lo que serán las pantallas de nuestro juego, las interacciones que habrán y uno que otro detallito.

Para poder empezar, es necesario que tengas lo siguiente:

• Papel, lápiz y borrador (sí! hasta al mejor pescador se le va la trucha!)
• Expression Blend 3 + Sketchflow (vienen las dos cosas en una misma descarga)
• y nada más :)

Empecemos!

1. Diseñando la interfaz de nuestro juego

No me cabe duda de que si tuvieras que diseñar la interfaz de un juego de futbol podrías hacerlo y muy bien (cero desconfianza jeje), pero en esta ocasión quiero que nos concentremos en lo importante: Crear nuestro primer juego en Silverlight en unos cuantos minutos y de paso conocer y aprovechar SketchFlow.

Pongámosle galleta al asunto: Como podrás notar en las siguientes imágenes, a parte de no ser brillante dibujando, definí los que serán los elementos de mi interfaz: Una portería, un portero, tres opciones en el menú, un marcador y la invitada especial del partido: la pelota.

Una vez que tengo lista mi interfaz (sí, no le vamos a agregar ni pintar nada), escaneo o fotografío los bocetos para pasar ya totalmente al trabajo digital:

2. Preparando la Interfaz de nuestro juego

Con las imágenes todavía calentitas, llega el momento en el que tenemos que separar los elementos que componen la interfaz de nuestro juego (ya que cada uno de los elementos, botones, etc. tienen comportamientos y acciones diferentes); y para esto vamos a utilizar Adobe Photoshop CS3, que es el que yo tengo, aunque en realidad podrías usar hasta la versión 3.0 de ahí por el 1994:

Una vez que tienes tu interfaz abierta en Photoshop, lo que tendrás que hacer es cortar los diferentes elementos de tu interfaz (con la herramienta que gustes – yo prefiero Marquee (M) – ) y separarlos por capas,  preferiblemente usando nombres descriptivos que hagan tu trabajo posterior más fácil y ordenado.

Una vez que tengo separado todo por Capas en Photoshop, voy a guardar mi archivo, tal como guardaría cualquier otro (sin plugins, patches o similares), y empieza lo bueno: Abramos Blend 3.

3. Importando archivos PSD en Blend 3

En Blend 3 vamos a crear un nuevo proyecto SketchFlow en Silverlight (si no estás familiarizado con SketchFlow y demás, chécate este post); y en la primera ventana de nuestro SketchFlow Map (cambiaremos su nombre a Inicio), importaremos el archivo que horneamos en Photoshop: Vamos a File > Import Adobe Photoshop File y zácatelas: Seleccionamos el archivo que acabamos de generar y… contrario a lo que podrían tú y Seetharaman Narayanan pensar, nuestro archivo PSD está listo para ser usado en Blend 3 – solo falta que selecciones las Capas que quieras utilizar (sí, por que no te toma una imagen “flat” si no el archivo idéntico), y empezar a trabajar.  A continuación muestro las capas que elegí yo para mi primera ventana:

Habiendo seleccionado las Capas que necesito presiono OK…

Tal como puedes ver en la imagen,  Blend 3 no solamente importó el archivo y creo un Canvas con el nombre del archivo (el PSD se llama Final.psd), si no que también me respetó las Capas y colocó los elementos de la interfaz en la ventana activa! Qué más podría pedir?! IMPORTANTE: Quizás te habrás dado cuenta y preguntado el motivo por el cual no seleccioné la capa Fondo desde el PSD y el motivo es el siguiente: Como las tres ventanas que tiene nuestro juego tienen el mismo fondo (el arco y el campo de juego), vamos a utilizar un Component Screen para compartir ese elemento entre nuestras pantallas sin tener que importar/copiar/pegar ese elemento cada vez que lo necesitemos en una ventana. Lo haremos en el siguiente paso:

4.- Creando las pantallas de nuestro juego

Como parte inicial de este punto vamos a crear un Componente de Pantalla que tendrá la imagen de fondo que  llamamos “Fondo”  (y la cual tenemos que importar seleccionando File > Import Adobe Photoshop File y seleccionando solamente la capa ‘Fondo’) en el punto 1 y fijando de mantener las mismas dimensiones que las otras pantallas (640 x 423 px).

No está de más mencionar que cuando presiones OK, te saldrá el siguiente diálogo preguntándote si quieres Crear una nueva carpeta o Sobreescribir la que habías creado anteriormente al importar los elementos de la interfaz en el Paso 3 – ante lo cual deberás elegir Crear nueva carpeta para no eliminar los elementos de la página inicial.

Una vez que tenemos creado nuestro componente de pantalla, vamos a crear las que serán las dos pantallas restantes en nuestra aplicación: Juego y Créditos. Una vez que las tenemos listas en SkechFlow Map, vamos a arrastrar el Component Screen hacia cada una de ellas con tal de “compartir” el mismo fondo entre todas y poder empezar a agregando elementos específicos de cada pantalla:

Teniendo el Mapa SketchFlow listo vamos a agregar los elementos de la pantalla jugar. Para esto repetiremos el Paso 3, con la diferencia de que solamente seleccionaremos importar el portero, la pelota y el marcador desde el archivo PSD (obviamente seleccionando Create new folder para evitar sobre escribir lo importado previamente):

Teniendo lista la pantalla Juego, vamos a crear Créditos: Esta pantalla será muy sencilla y solo presentará un listado de nombres. Vamos a Assets, seleccionaremos Styles > SketchStyles > TitleCenter-Sketch para luego dibujar lo que será el espacio donde aparecerán los nombres que como puedes ver, es nada más un copiar-pegar-copiar-pegar.

5.- Venga su Reino: Agreguémos interacción con SketchFlow!

Una vez que tenemos nuestras pantallas terminadas vamos a conectar los botones de la pantalla principal con sus respectivas partes. Para hacer esto basta con seleccionar cada uno de los botones, hacer click derecho con el mouse y seleccionar el nombre de la pantalla a la cual queremos conectar el botón:

Una vez que hemos “conectado” los botones con sus respectivas pantallas vamos a entrarle directito a lo que venimos: Crear nuestro primer juego en Silverlight.

6.- Preparándonos para atajar penales

Antes de darle vida a “Goico” te cuento que estaremos usando algo nuevo en Blend 3 llamado Behaviors. En pocas palabras un behavior es un “comportamiento” creado por un programador que lo que hace es definir cómo se comporta un elemento de tu interfaz con respecto a diferentes interacciones. Por ejemplo, podríamos tener un behavior que hiciera que cuando muevas el mouse se mueva un objeto definido de tu interfaz (al cual le agregaríamos el behavior, obviamente…).

Como el caso aquí no es meternos de lleno en la programación…usaremos un Behavior que creo el buen Santiago Leguiza (aquí puedes ver el tutorial de cómo hacer el behavior), y que lo que hace es que uno o varios elementos de nuestra interfaz a los que se lo agreguemos sigan los movimientos que hacemos con el mouse en un espacio definido por un Canvas (en palabras menos técnicas algo parecido a los efectos que tenía GeoCities de poner una estela de estrellitas siguiendo el puntero del mouse mientras lo movíamos… jeje).

Dejándonos de tanto rodeo, lo que vamos a hacer es agregar el behavior que creó Santiago a nuestro proyecto. Por lo tanto iremos al panel Projects y en él ubicaremos la parte de nuestra solución que lleva al final las palabras “SilverlightScreens” haremos click derecho sobre ese título y seleccionaremos la opción “Add existing item” o sea… agreguemos lo que hizo Santiago:

Se nos presentará una ventana donde tendremos que ubicar el archivo y ahí es donde seleccionaremos el o los Behaviors que queramos usar en nuestra aplicación SketchFlow-Silverlight:

En este caso te recomiendo tener el archivo .cs en la carpeta donde se guardan las diferentes pantallas de tu proyecto SketchFlow (la puedes identificar por la terminación “SilverlightScreens” tal como se ve en la ruta en la imagen de arriba).

Hacemos click en Open y para poder empezar utilizar el SketchFlow iremos a Project > Rebuild Project, con lo cual ya tenemos el Behavior disponible en el panel Assets dentro de la categoría “Project”:

Estamos ya casi listos para poder agregarle el Behavior a Goico, pues algo que nos falta es definir el espacio en el cual se moverá el portero ya que la portería no ocupa el ancho total de nuestra pantalla. Para hacer esto iremos a la pantalla Jugar y seleccionaremos al arquero directamente en el documento o bien en el Panel  Objects and Timeline > Final > portero:

A continuación, haremos click derecho sobre el portero o bien sobre la Capa en Objects and Timeline y seleccionaremos Group Into > Canvas:

Teniendo listo nuestro Canvas, lo seleccionaremos en el panel Objects and Timeline e iremos al panel Properties, donde definiremos el tamaño del mismo y el cual acomodaremos sobre la portería pues ésta será el área por la cual se moverá el buen Sergio:

Hecho esto, podemos centrar a Goico en medio de la portería (a menos que queramos que se trague los goles como Migliore) y haremos lo siguiente:

En el Panel Assets iremos a la categoría Project, seleccionaremos el behavior (FollowMouseBehavior), y lo arrastraremos y soltaremos sobre el portero (o bien sobre el objeto “portero” en Objects and Timeline):

Una vez que hagamos esto voilá! el portero ya tiene agregado el Behavior y solamente tenemos que definir dos cosas más para poderlo ver en acción:

En primer lugar, al agregar el behavior y/o tenerlo seleccionado, verás que el panel Properties nos presenta unas opciones distintas a las de siempre:

Ahí es donde definiremos qué queremos que haga el behavior: Si va a seguir al mouse horizontalmente, verticalmente o en ambos ejes – en este caso lo haremos solo horizontal- y en la parte de abajo podemos definir márgenes para delinear el área de movimiento del objeto (en este caso nuestro portero).

Finalmente, lo que tenemos que definir es el punto de registro o “centro” de nuestro portero ya que es en base a este punto que el behavior determinará hacia dónde estamos moviendo el mouse. Suena complejo pero es muy fácil de hacer: Vamos al panel Properties, seleccionamos el apartado Miscellaneous (el último del panel), y en donde dice RenderTransformOrigin escribiremos .5 y .5 en cada una de las cajitas. No me preguntes por qué: tardaría más en explicarlo que el tiempo que te durará la pregunta en la cabeza…

Ahora sí: Tenemos lista la primera parte de nuestro primer juego creado usando Blend 3 con SketchFlow y Silverlight y la puedes ver aqui. Fácil y rápidamente!

Si te animas a avanzar más cosas en el juego, crear nuevos behaviors, animaciones u otras cosas… te puedes bajar los archivos fuente aquí.

Nos vemos pronto!
Daniel Priego