Creando un clon de Angry Birds para Windows Phone 7 sin una línea de código

En este ejercicio veremos como hacer un clon de Angry Birds, de manera fácil y sin necesidad de una sola línea de código, usando Expression Blend y las librerías físicas para Windows Phone 7.

Expression Blend viene incluido en el paquete Windows Phone Developer Tools, el cual se puede obtener en la ruta http://create.msdn.com/en-US/

Y las librerías físicas las podemos obtener desde CodePlex, en la ruta: http://physicshelper.codeplex.com/

Lo primero que haremos es ejecutar el instalador de las lbrerías físicas de WP7:

wp7_angrybirdsclone_1

Esta instalación no tiene nada de complejo, simplemente seguimos los pasos del asistente, y esperamos a que finalice.

wp7_angrybirdsclone_2

Una vez en instalado esto, entramos a Expression Blend y creamos un nuevo proyecto de aplicación para Windows Phone 7.

wp7_angrybirdsclone_3

Este proyecto nos desplegará un formulario por defecto de Windows Phone 7, en el cual diseñaremos nuestro ejercicio.

wp7_angrybirdsclone_4

En el menú izquierdo, eliminamos todos los objetos que contega e lobjeto “LayoutRoot”, luego damos click derecho sobre este y cambiamos el tipo de Layout a “Canvas”.

wp7_angrybirdsclone_5

Posteriormente, en el menú izquierdo seleccionaremos el objeto “Phone ApplicationPage”

wp7_angrybirdsclone_6

En las propiedades del objeto seleccionado, seleccionaremos la orientación “Landscape” en la propiedad “SupportedOrientation”

wp7_angrybirdsclone_7

Después de esto, seleccionamos la opción “Device” (dispositivo) y también seleccionamos la opción “Landscape”en la orientación.

wp7_angrybirdsclone_8

Ahora adicionaremos como referencia las librerías físicas que descargamos desde Codeplex. Para hacer esto, damos click derecho sobre el proyecto y seleccionamos la opción “Add reference” (adicionar referencia).

wp7_angrybirdsclone_9

Seleccionamos las librerías que se muestran a continuación en la imagen, ubicadas en la ruta de la instalación que ejecutamos en los primeros pasos (por defecto: [ProgramFiles]\Physics Helper\Physics Helper Library\WP 7.1).

wp7_angrybirdsclone_10

Luego se adiciona la librería FarseerPhysics.dll,  ubicada en la ruta de la instalación que ejecutamos en los primeros pasos (por defecto: [ProgramFiles]\Physics Helper\Physics Helper Library\Silverlight4).

wp7_angrybirdsclone_10_1

Despues de adicionar estas referencias, compilamos la solución a través de la opción del menú “Project”(proyecto).

wp7_angrybirdsclone_11

Después de compilar el proyecto, podremos verificar en la opción Assets->Behaviors->Physics que se han adicionado unos nuevo comportamientos gracias a las referencias de las librerías físicas. Estos son los que comenzaremos a usar para construir nuestro ejemplo.

Para comenzar, arrastraremos un “PhysicsControllerBehavior” a la raíz del objeto “LayoutRoot” de formulario.

wp7_angrybirdsclone_12

Luego lo seleccionamos, y en sus propiedades marcamos la casilla “MousePickEnabled”

wp7_angrybirdsclone_13

Ahora seleccionamos el instrumento “Pen” en la barra izquierda de Blend.

wp7_angrybirdsclone_14

Con este, podremos trazar unos puntos sobre el formulario de la aplicación. La idea es formar una figura que sirva como base de la implementación del ejemplo. Esto aparecerá en los objetos del formulario identificado con el nombre “Path”

wp7_angrybirdsclone_15

Ahora arrastramos un comportamiento del tipo “PhysicsObjectBehavior” a la raíz del objeto “Path” creado anteriormente.

wp7_angrybirdsclone_16

En las propiedades del “PhysicsObjectBehavior”, marcamos la casilla “IsStatic”.

wp7_angrybirdsclone_17

Ahora adicionamos un objeto de tipo “Rectangle” (rectángulo) al formulario de la aplicación

wp7_angrybirdsclone_18

Posteriormente, adicionamos un comportamiento de tipo “PhysicsObjectBehavior” al rectángulo que adicionamos

wp7_angrybirdsclone_19

Ahora generamos tres rectángulos mas con el mismo behavior. Puede hacerse como en el paso anterior, o copiar y pegar el que ya adicionamos.

wp7_angrybirdsclone_20

Ahora hacemos click derecho sobre el proyecto de Windows Phone, y seleccionamos la opción de agregar ítem existente.

wp7_angrybirdsclone_21

Seleccionamos imágenes de los Angry Birds a usar como ejemplo.

wp7_angrybirdsclone_22

Luego arrastramos las imágenes adicionadas al formulario

wp7_angrybirdsclone_23

A cada imagen le adicionamos un comportamiento de tipo “PhysicsObjectBehavior”

wp7_angrybirdsclone_24

Si todos hemos jugado Angry Birds, sabemos que la idea es atacar con el ave y desaparecer los otros animales del juego. Para emular esto, adicionamos un comportamiento “PhysicsExplodeBehavior” al elemento que vamos a atacar (el cerdito en las imágenes del ejemplo)

wp7_angrybirdsclone_25

Luego, en las propiedades del “PhysicsExplodeBehavior” creamos un nuevo trigger

wp7_angrybirdsclone_26

En la ventana que se abre, seleccionamos un tipo de trigger “PhysicsCollisionTrigger”

wp7_angrybirdsclone_27

Luego, en las propiedades “BodyOne” y “BodyTwo” seleccionamos las dos imágenes: la del pájaro y la del objetivo que “atacará”.

wp7_angrybirdsclone_28

Finalmente, en las propiedades del “PhysicsExplodeBehavior”, marcaremos la casilla “DeactivateBody” y a la propiedad “NumParticles” le asignaremos un valor de 5.

wp7_angrybirdsclone_29

Este mismo procedimiento lo realizaremos con cada una de las imágenes de objetos que serán destruidos por el ave.

Finalmente, sólo queda ejecutar la aplicación en el emulador de Windows Phone 7, mediante la tecla F5 (o en la opción del menú proyecto), cambiar la orientación del emulador, ¡y observar el resultado!

Nota: Artículo basado en tutorial publicado en StudentGuru. Link: http://studentguru.gr/b/dt008/archive/2011/10/16/tutorial-video-creating-a-small-angry-birds-clone-for-windows-phone-in-5-minutes.aspx

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: