Ejemplo XNA parte 2 – Creación de la Clase Jugador

Haz un clic derecho sobre el proyecto y agrega una nueva clase llamada «Jugador», y agrega los métodos Initialize, Update y Draw. Deberás importar las librerías de XNA.

using System;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

namespace Shooter
{
	class Jugador
	{
		public void Initialize()
		{
		}

		public void Update()
		{
		}

		public void Draw()
		{
		}
	}
}

Esta es la estructura básica de nuestra clase Jugador, que funcionará para desplegar el elemento que controlará el usuario, que en nuestro caso es la aeronave. Ahora agrega los siguientes atributos (observa la importancia de cada uno que se encuentran comentados)

// Animacion representando al jugador
public Texture2D PlayerTexture;

// Posicion del jugador
public Vector2 Position;

// Estado del jugador
public bool Active;

// Cantidad de vida del jugador
public int Health;

// Obtener el ancho del jugador
public int Width
{
	get { return PlayerTexture.Width; }
}

// Obtener el alto del jugador
public int Height
{
	get { return PlayerTexture.Height; }
}

Estos son algunos atributos fundamentales para nuestra clase jugador, pero obviamente se pueden agregar mas dependiendo del control que queramos tener sobre este elemento. Ahora reemplaza el método Initialize (de la clase Jugador) con lo siguiente:

public void Initialize(Texture2D texture, Vector2 position)
{
	PlayerTexture = texture; 
	// Asignar la posicion del jugador
	Position = position;
	// Activar el jugador
	Active = true;
	// Inicializar la vida del jugador
	Health = 100;
}

Como se puede ver claramente, lo que hace el metodo Initialize es establecer las propiedades iniciales de nuestra clase Jugador. Ahora reemplaza el metodo Draw con el siguiente:

public void Draw(SpriteBatch spriteBatch)
{ 
	spriteBatch.Draw(PlayerTexture, Position, null, 
		Color.White, 0f, Vector2.Zero, 1f, SpriteEffects.None, 0f);
}

Ya con la clase Jugador con sus atributos y funciones listas, pasaremos a la clase principal para instanciar un objeto Jugador.

En la clase Game1.cs

Ya que tenemos todo preparada la clase Jugador, debemos instanciarla, inicializarla y por último, invocar su método Draw desde esta clase principal para desplegar la nave en la pantalla. Ve al inicio de esta clase, y debajo de la declaración del atributo SpriteBatch spriteBatch; agrega nuestra variable tipo Jugador.

Jugador jugador;

Y ahora en el método Initialize, instanciamos nuestra clase:

jugador = new Jugador();

Siguiente, debemos cargar la textura de nuestra nave que se encuentra en el Content de nuestro proyecto. En el método LoadContent, agrega las siguientes líneas:

// Load the player resources 
Vector2 playerPosition = new Vector2(
	GraphicsDevice.Viewport.TitleSafeArea.X,
	GraphicsDevice.Viewport.TitleSafeArea.Y + 
	GraphicsDevice.Viewport.TitleSafeArea.Height / 2);
jugador.Initialize(Content.Load<Texture2D>("Imagenes/nave"), playerPosition);

Ya que tenemos nuestro objeto Jugador instacianciado, y cargado, ve al metodo Draw y agrega las siguientes instrucciones:

spriteBatch.Begin();
jugador.Draw(spriteBatch);
spriteBatch.End();

Ahora finalmente compila el proyecto, y ejecútalo. Si todo funciona correctamente, verás algo como esto:

Si tu proyecto presenta errores y no encuentra como solucionarlos, no entres en pánico, puedes descargar el proyecto de acá en su estado final de este tutorial, simplemente da clic al siguiente enlace:

Proyecto Shooter Parte 2

Interacción en XNA para Windows Phone: Reconocimiento de Gestos

XNA posee funcionalidades innatas para reconocer los gestos más comunes con los que interactuamos normalmente con cualquier dispositivo móvil en la actualidad. Simplemente se debe habilitar el reconocimiento de gestos, y así el juego tendrá la capacidad de interpretar cualquier tipo de gesto realizado por parte del usuario. Los gestos más comunes se muestran en el siguiente diagrama.

Un Tap es el gesto cuando le damos un toque rápido en algún punto de la pantalla. Double Tap son dos toques consecutivos en un mismo punto, como hacer un doble clic. El Pinch y Stretch son el típico gesto que conocemos para hacer zoom-in y zoom-out en una foto o una imagen. El gesto Pan ocurre cuando deseamos trasladarnos por un scrollbar, o navegar por un mapa o imagen. Flick es un toque rápido con alguna dirección, lo que causa una especie de inercia a algún elemento que estemos trasladando.

A continuación implementaremos un ejemplo sencillo de reconocimiento de gestos utilizando el Framework XNA para Windows Phone.

Ejemplo de Reconocimiento de Gestos

Crea un proyecto Windows Phone Game (4.0), y nómbralo «GestosXNA», selecciona versión del sistema operativo 7.1. Haz un clic-derecho sobre el Content del proyecto, y agrega un nuevo Ítem de tipo «Sprite Font», y nómbralo «SpriteFont1».

En la clase Game1.cs, después de la declaración del atributo SpriteBatch spriteBatch; agrega los siguientes atributos:

SpriteFont spriteFont;
String message = "Realiza un gesto";
Vector2 messagePos = Vector2.Zero;
Color color = Color.Black;

Ahora, en el método Initialize, y agrega la siguiente instrucción antes de la línea base.Initialize(); y agrega lo siguiente:

TouchPanel.EnabledGestures = GestureType.Tap | GestureType.DoubleTap | 
                        GestureType.Hold | GestureType.HorizontalDrag | 
                        GestureType.VerticalDrag | GestureType.FreeDrag | 
                        GestureType.DragComplete | GestureType.Pinch | 
                        GestureType.PinchComplete | GestureType.Flick;

De esta forma, estamos habilitando cuales gestos deseamos que nuestra aplicación sea capaz de reconocer en tiempo de ejecución. En el método LoadContent, cargaremos la fuente agregada del Content, de esta manera:

protected override void LoadContent()
{
	spriteBatch = new SpriteBatch(GraphicsDevice);
	spriteFont = Content.Load<Texture2D>("SpriteFont1");
}

Ahora, en el método Update es donde en cada ciclo del Game Loop, el juego realizara una captura del estado de la pantalla táctil, registrando gestos realizados por el usuario, y los irá reconociendo en tiempo real. El método completo está implementado de la siguiente forma:

if (TouchPanel.IsGestureAvailable)
{
	GestureSample gesture = TouchPanel.ReadGesture();
	switch (gesture.GestureType)
	{
		case GestureType.Tap:
			message = "Tap";
			color = Color.Red;
			break;
		case GestureType.DoubleTap:
			message = "Doble Tap";
			color = Color.Orange;
			break;
		case GestureType.Hold:
			message = "Hold";
			color = Color.Yellow;
			break;
		case GestureType.HorizontalDrag:
			message = "Arrastre horizontal";
			color = Color.Blue;
			break;
		case GestureType.VerticalDrag:
			message = "Arrastre vertical";
			color = Color.Indigo;
			break;
		case GestureType.FreeDrag:
			message = "Arrastre libre";
			color = Color.Green;
			break;
		case GestureType.DragComplete:
			message = "Gesto arrastre completado";
			color = Color.Gold;
			break;
		case GestureType.Flick:
			message = "Flick";
			color = Color.Violet;
			break;
		case GestureType.Pinch:
			message = "Pinch";
			color = Color.Violet;
			break;
		case GestureType.PinchComplete:
			message = "Gesto pinch completado";
			color = Color.Silver;
			break;
	}
	messagePos = gesture.Position;
}

Primero se verifica si el TouchPanel tiene el reconocimiento de gestos habilitados. Luego TouchPanel.ReadGesture() devuelve un GestureSample en cada ciclo del GameLoop, que es analizado en el switch(gesture), y se detendrá en el caso correspondiente al gesto reconocido, cambiando el valor del string message, informando el gesto detectado, y finalmente, se le asigna la posición del mensaje donde ocurrió el gesto analizado.

En el método Draw, proseguimos a dibujar nuestro string:

protected override void Draw(GameTime gameTime)
{
	GraphicsDevice.Clear(Color.CornflowerBlue);
	spriteBatch.Begin();
	spriteBatch.DrawString(spriteFont, message, messagePos, color);
	spriteBatch.End();
	base.Draw(gameTime);
}

Listo! Ahora compila la solución y si todo esta correctamente codificado, veras la siguiente pantalla:

Ya con la aplicación ejecutándose en el emulador Windows Phone, realiza gestos utilizando tu mouse y verás que son reconocidos por nuestra aplicación, mostrando un mensaje sobre el gesto detectado, y en la posición donde ocurrió.

Desafortunadamente no podrás realizar gestos multitouch como el Pinch; para eso necesitarías hacer deploy del proyecto a un teléfono físico. Sin embargo, puedes realizar cualquier otro gesto habilitado. Experimenta y realiza todos los gestos disponibles.

Si tu proyecto presenta errores de compilación, puedes descargarte el ejemplo:

Proyecto GestosXNA

Despliegues de Sprites en 2D

Bien, ya visto en articulos anteriores todo el basamento teórico de como funciona el Framework XNA, las versiones que han salido desde su lanzamiento en el 2007, el soporte para las diversas plataformas de Microsoft (Windows PC, Xbox 360 y Windows Phone), el funcionamiento de XNA y por último, la estructura de un proyecto de un Windows Game XNA en Visual Studio, es hora que empecemos a codificar y dibujar elementos.

Paso 1. Crear el proyecto

Debes abrir Visual Studio 2010 con XNA Game Studio 4 previamente instalado, y crear un proyecto Windows Game (4) como se mostró en el artículo anterior.

Paso 2. Agregar una imagen a nuestro Content

Ahora debemos agregar una carpeta en el Content donde colocaremos nuestras imágenes. No es requerido crear un directorio, pero lo recomiendo para mantener nuestro contenido gráfico organizado. Simplemente da un clic-derecho en tu proyecto Content, le das clic a agregar->nueva carpeta, y lo nombraremos «Imagenes».

Para agregar una imagen (que la pueden encontrar aqui para descargar), dale clic-derecho a la carpeta «Imagenes» ya creada, luego clic en agregar->item existente. Te saldrá un explorador de archivos, para que busques el archivo de imagen que deseas agregar a tu proyecto. Selecciona la imagen que descargaste previamente (smiley.png), y le das clic a «Agregar»).

Paso 3. Dibujar el sprite en la Escena

Ya que tenemos nuestra imagen en el Content de nuestro proyecto, debemos cargarla y desplegarla escribiendo código. Lógicamente para desplegar esta imagen, dependemos lógicamente de dos cosas: Posición y Textura. Para eso, agrega las siguientes dos variables dentro de tu clase principal (Game1), debajo de spriteBatch. El código se vería de la siguiente manera:

Vector2 es un tipo de datos que posee dos campos float x,y; a modo de trabajar con coordenadas de dos dimensiones. Ininializa posicion en el método Initialize:

Ahora procedemos a cargar la imagen a nuestro juego. Esto se hace en el método LoadContent. El código quedaría así:

Puedes observar que se instancia la variable spriteBatch (el cual puedes verlo por los momentos como el pincel encargado de pintar todos los elementos en la escena de nuestro juego). También observa como se carga una textura2D con el método Load. Toma en cuenta el string que pasamos como parámetro; es la ruta del elemento que queremos cargar. Por esto, es importante colocar en qué directorio se encuentra si esta organizado de esta manera.

Paso 4. Desplegar nuestro sprite en la escena

Recapitulando, hemos agregado nuestra imagen archivo al contenido de nuestro proyecto; hemos agregado una variable para la posición donde desplegaremos nuestro sprite, y declaramos una variable Texture2D, donde realizamos la carga de nuestra imagen del contenido a la aplicación. Ahora, sin más preámbulos, dibujemos nuestro sprite. Esto se implementa en el método Draw.

Para pintar nuestro sprite, debemos utilizar nuestra variables spriteBatch, ya que este es el encargado de dibujar los elementos en la escena como ya mencione a priori. Todos los elementos que vayamos a dibujar se hacen mediante su método Draw(), y estos deben estar encerrados dentro de los métodos spriteBatch.Begin() y spriteBatch.End(). Muy importante estos dos métodos, porque estamos avisando a nuestra aplicación que vamos a pintar elementos, y cuando terminemos, invocamos el método End(). En nuestro caso, nuestro código se vera así:

Fíjate el método spriteBatch.Draw(). Solo estamos pasando la textura que deseamos desplegar, la posición, y el color que queremos que sea desplegado. Si colocamos Blanco, se mostraran los colores originales de la imagen. Cualquier otro color modificara los colores de nuestro sprite.

Finalmente, al ejecutar nuestra aplicación, tendrás un resultado como este:

Sencillo, no crees? Esta es la manera mas elemental para desplegar un sprite en nuestro juego. El método Draw que utilizamos es el mas básico disponible, ya que este método cuenta con 7 formas distintas de invocar con diversos parámetros, incluyendo efectos, manejo de rectángulos para dibujar ciertas áreas, etc. Para proyectos más complejos, se trabajan con clases donde encapsulan estas propiedades (textura, posición), y se le agregan mas propiedades para ser mas flexibles ante transformaciones y efectos.

Diseña un sitio como este con WordPress.com
Comenzar