Cómo crear tu primer juego en Silverlight
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.
2. Preparando la Interfaz de nuestro juego
3. Importando archivos PSD en Blend 3
4.- Creando las pantallas de nuestro juego
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.
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
Muy muy bueno Daniel!
Me gusta! Qué bueno todas las cosas que se pueden hacer :)
¡¡Buenas!!
Increíble el tuto, me ha ayudado mucho, aunque he tenido que dar muchas vueltas. Al importar el psd, los objetos me no se ven, pero cuando construyo el efecto sí, ¿sabes a qué se debe?
¡¡Gracias y sigue así!!
Chema, no estoy seguro de entender a qué es lo qu ete refieres con lo de que los objetos no se ven. Puedes probar a desactivar la capa “background” que debe tener tu archivo psd. probablemente tus demás elementos se estén “escondiendo” debajo de ella.
Si no es eso avísame y lo vemos.
Saludos y gracias!
Daniel