[Windows Phone] Creando juegos con WaveEngine. 1º Parte.

Introducción. Desarrollar videojuegos para Windows Phone.

windows_phone_game_updateCon el lanzamiento de Windows Phone 7 un enorme mundo de posibilidades se abría ante los desarolladores entre los que se incluía sin duda el desarrollo de videojuegos. Contábamos con XNA como vía sólida y bien documentada para desarrollar videojuegos bajo C# para Windows Phone.

Este mismo año se confirmó que no habría nuevas version de XNA, es decir, XNA ha sido descontinuado. Esto no quiere decir que no podamos crear videojuegos para Windows Phone utilizando XNA. Seguimos contando con plantillas para Windows Phone 7 y por compatibilidad binaria funcionarían en Windows Phone 8 aunque en un futuro ante la inexistencia de futuras versiones quizás sea positivo conocer alternativas…

¿WaveEngine?

WaveEngine LogoWave Engine es un motor de videojuegos 2D y 3D multiplataforma, basado en componentes y totalmente gratuito (no hay licencias ni tampoco ningún tipo de royalty). Nos ofrece una API muy completa para trabajar con físicas, animaciones, sonido, etc. utilizando C# sin tener que profundizar a más bajo nivel y tener que trabajar con DirectX directamente.

Podemos desarrollar para plataformas Windows, Windows Desktop, Windows Store y por supuesto Windows Phone.

Además, podemos desarrollar para Android (móviles y tabletas) usando MonoDroid y para IOS utilizando MonoTouch. Así pues si queremos publicar nuestros juegos bajo estas plataformas (Android e IOS) necesitamos adquirir las licencias correspondientes de Xamarin.

NOTA: Xamarin cuenta con una versión Starter totalmente gratuita que permite publicar tus aplicaciones o juegos siempre que cuenten con menos de 32000 líneas de código C# compilado.

Primer proyecto con WaveEngine.

Antes de lanzarnos a la piscina por completo debemos instalar WaveEngine. Una tarea sumamente sencilla. Nos dirigimos a la página oficial:

Accedemos a la sección de descargas:

Downloads

Downloads

Obtenemos el instalador e instalamos WaveEngine.

Manos a la obra!

Tras instalar WaveEngine al abrir Visual Studio tendremos un par de plantillas disponibles bajo la secciñon “Wave Engine”:

  • WaveEngine Library: Nos permite crear una librería donde añadir clases a reutilizar, recursos, etc.
  • WaveEngine Game Project: Crea una solución con dos proyectos, uno con el nombre que hayamos introducido y otro con el mismo nombre mñas el  añadido “Project” al final.
Plantillas

Plantillas

Elegimos la segunda opción y creamos un proyecto.

Conceptos básicos

  • Escena: Concepto básico importante. Una escena es el conjunto de elementos de nuestro juego en un momento dado. Por ejemplo, el menu de nuestro juego es una escena, cada fase del mismo es también una escena. A tener en cuenta, en cada momento solo trabajamos con una de las escenas.
Escena

Escena

Por buscar similitudes e intentar comprenderlo con mayor facilidad podemos trasladar el concepto de escena a un cubo de piezas de lego.

  • Entidad: Cada uno de los elementos que componen el juego. El suelo, el fondo, el personaje principal, etc.
Entidad

Entidad

Siguiente con la metáfora de lego, la casa formada en lego, el coche, etc. serían las entidades. Bloques formados por piezas inferiores (componentes).

  • Componentes: Nos permiten añadir funcionalidad (“piezas”) a las entidades. Lo utilizaremos por ejemplo para posicionar elementos en pantalla o para establecer el tamaño de los mismos.
  • Comportamiento: Que el personaje principal sea quien es lo reflejan una serie de comportamientos, que se mueva o realice acciones según controles de teclado o táctiles por ejemplo es un comportamiento.

La plantilla de la que partimos nos crea por defecto una escena con fondo azul (MyScene.cs) donde poder comenzar a añadir entidades con sus respectivos comportamientos que irán definiendo nuestro juego.

Añadiendo entidades

En nuestro ejemplo vamos a homenajear al mítico “Super Mario Bros” de la NES por lo que necesitaremos para ello sprites y recursos gráficos.

Podemos encontrar rápidamente recursos para la causa en: http://spritedatabase.net

Tras obtener los recursos necesarios, debemos detenernos tan solo un segundo a comprender el concepto de asset. Un asset es cualquier recurso externo (imagen, audio, video, etc) que queramos utilizar en nuestro juego. NO podemos introducirlos al proyecto y trabajar con ellos directamente. Desde WaveEngine trabajamos con archivos con extensión wpk.

¿Cómo transformamos nuestros jpg o png a wpk?

Al instalar WaveEngine se nos instala una herramienta auxiliar llamada Assets Exporter:

Assets Exporter

Assets Exporter

Esta herramienta nos permite crear proyectos que al ser exportados contarán con una carpeta llamada “Exports” donde tendremos los wpk buscados.

Comenzamos a usarla. Pulsamos en File -> New Proyect (creará un fichero con extensión .wproj). Asignamos un nombre. A continuación, podemos añadir recursos pulsamos e botón +. Tras añadir los recursos deseados hacemos clic en Proyect -> Export. Nos dirigimos a la carpeta “Exports” copiamos el wpk y lo copiamos a la carpeta “Content” de nuestro proyecto en Visual Studio.

Una vez copiados los recursos debemos modificar sus propiedades (click derecho, opción Properties):

  • Copy to output folder: Always

Todo listo, a por el código!.

Lo primero que vamos a añadir es el fondo de nuestro juego:

var sky = new Entity("Sky")
.AddComponent(new Sprite("Content/Sky.wpk"))
.AddComponent(new SpriteRenderer(DefaultLayers.Alpha))
.AddComponent(new Transform2D()
);

Hemos creado una entidad llamada Sky donde utilizamos componentes para establecer el wpk a utilizar (la imagen anteriormente exportada a wpk con el Assets Exporter). El componente SpriteRenderer nos permite dibujar en pantalla y el último componente utilizado, Transform2D nos permite posicionar el sprite en pantalla.

Fácil, ¿verdad?

NOTA: Un archivo wpk puede contener múltiples recursos.

Una vez creada la entidad la añadimos a escena:

EntityManager.Add(sky);

El resultado será algo como lo siguiente:

Añadimos el fondo

Añadimos el fondo

Ya no es el fondo azul que nos implementa la plantilla por defecto y comienza a recordarnos en algo al famoso juego del fontanero.

Continuamos. Si algo también era típico en los juegos de Mario eran los ladrillos. Los ladrillos fundamentales forman el suelo por el que Mario puede correr. Vamos a definir el suelo.

¿Qué debemos hacer?

Exacto, en WaveEngine todo lo que compone la escena es una entidad. Vamos a definir otra entidad para el suelo.

var floor = new Entity("Floor")
.AddComponent(new Sprite("Content/Floor.wpk"))
.AddComponent(new SpriteRenderer(DefaultLayers.Alpha))
.AddComponent(new Transform2D()
{
Origin = new Vector2(0.5f, 1),
X = WaveServices.Platform.ScreenWidth / 2,
Y = WaveServices.Platform.ScreenHeight
});

A diferencia de la anterior, en esta ocasión dado que queremos situar el suelo en la parte inferior de la pantalla, hemos establecido las propiedades Origin, X e Y del componente Transform2D.

Añadimos el componente a escena:

EntityManager.Add(floor);

Y el resultado:

Añadimos el suelo

Añadimos el suelo

Nos aproximamos. Repitiendo el proceso realizado con el suelo con un sprite de Mario podríamos obtener:

Mario en escena!

Mario en escena!

Puedes descargar el ejemplo realizado a continuación:

Bonito “cuadro” aunque como juego… si no podemos ni mover a nuestra voluntad al personaje principal carece de mucho sentido.

Además, de momento nuestro proyecto es para escritorio Windows no para Windows Phone…

Proximamente…

En la segunda parte añadiremos comportamiento a Mario para poder controlarlo mediante un touchpad táctil junto a un sistema de animaciones que nos permite disfrutar de Mario corriendo por el escenario. Por supuesto también convertiremos el proyecto a Windows Phone.

Os dejo un adelanto del resultado buscado:

Espero que os suene interesante, ¿os animáis?

Keep Pushing!

Más información

7 pensamientos en “[Windows Phone] Creando juegos con WaveEngine. 1º Parte.

  1. Que buen artículo, espero publiqué el próximo rápido tengo muchas ganas de empezar con los juegos. Ya que me he creado uno con XNA pero es muy básico.

    • Me alegro que te guste. Esta semana publicaré la segunda parte. Si veo que os interesa podemos continuar la demo más alla de lo que tenía planeado (añadir vida, enemigos, etc).
      En cuanto a tu juego en XNA, recuerda, lo importante de un juego es la diversión, puede ser lo más básico del mundo pero un gran juego😉

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