Cargando Sprites en XNA

diciembre 28, 2007 at 8:03 pm (Tutoriales) (, , , , , , , , , , , , , , )

Este tutorial, muestra como cargar un sprite en XNA. Vamos a empezar desde lo mas basico, que es un sprite. Un sprite, es una serie de imagenes unidas en un solo archivo que representa a un mismo personaje en diferentes posicion y/o acciones. 

 Los sprites nos sirven para representar los objetos en un juego. Se pueden conseguir en diversas paginas web o los puedes hacer, con cualquier programa. En lo personal, mi programa favorito para realizar sprites es el Flash, por la variedad de opciones que ofrece.

Sin embargo en este tutorial no vamos a hablar de como hacerlos, sino de como utilizarlos, lo primero que tenemos que hacer (paso basico y fundamental), abrir el XNA y crear un nuevo proyecto.

1. Archivo > Nuevo Proyecto.

2. Seleccionamos Windows Game y en el nombre del proyecto lo llamamos “MostrandoSprite” y hacemos click en aceptar.

3. Abrimos el explorador de soluciones (Ctrl + W) si no esta abierto, una vez visible, hacemos click sobre el nombre del proyecto (MostrandoSprite) y seleccionamos Agregar> Elemento existente… En el cuadro de dialogo saliente, seleccionamos Content Pipeline y seleccionamos cualquier imagen.

4. Una vez agreada la imagen, nos vamos al codigo y tenemos que ubicar las siguientes lineas:

GraphicsDeviceManager graphics;
ContentManager content;
Y justo debajo de ellas escribimos:Texture2D imagen;Esta instruccion sirve para declarar una variable que almacenara una textura que sera la visualizada en pantalla. Despues buscamos el metodo LoadGraphicsContent, como habia mencionado en una entrada anterior, es ahi donde se carga todo el contenido grafico. Una vez localizado debemos modificarlo de la siguiente manera.protected override void LoadGraphicsContent(bool loadAllContent){if (loadAllContent)

{// TODO: Load any ResourceManagementMode.Automatic contentimagen = content.Load<Texture2D>(“MiImagen”);}// TODO: Load any ResourceManagementMode.Manual content

}En este paso, le estamos asignando una textura a la variable de textura “Imagen”.Como dato adicional, “content” no es una palabra reservada de XNA. “content” es una variable declarada e inicializada por default del compilador.

La sintaxis, para asignar una textura a nuesta variable “Imagen” es

variable = ContentManager.Load<TipoDeContenido>(“Ruta y nombre del archivo en el explorador de soluciones”)

es decir:

imagen = content.Load<Texture2D>(“Imagen”);

Si tu imagen se encuentra en el directorio raiz de la solucion, solamente se pone el nombre del archivo. Si tu imagen se encontrara dentro de una carpeta llamada “Contenido” la ruta seria  “Contenido/NombreDelArchivo”. No es necesario especificar la extension, puesto a que el compilador ya sabe que es un Content Pipeline y el se encargara de convertirlo a un formato que pueda utilizar.

Ahora nos vamos al metodo Draw, y fuera del metodo draw vamos a declarar un SpriteBatch, que no es mas que un metodo que nos sirve para dibujar un sprite en pantalla.

la manera de declararlo es

SpriteBatch sBatch; //Donde sBatch es el nombre del Sprite Batch

ya dentro del metodo draw, tenemos que seguir una serie de pasos fundamentales. Primero que nada, tenemos que decirle al sprite batch, como es que va a dibujar la imagen. Y eso lo hacemos de la siguiente manera

sBatch.Begin(SpriteBlendMode.AlphaBlend);Posteriormente, debemos decirle al sBatch, que dibuje la textura.  Y lo haremos de la siguiente manerasBatch.Draw(imagen, new Rectangle(0,0,100, 200), Color.White);Ahora, si lo traducimos al espanol.El metodo Draw, del SpriteBatch se puede asignar de muchas maneras diferentes, dependiendo de como vamos a dibujar y manejar un sprite. Por el momento a nosotros solo nos interesa mostrarlo en pantalla asi que elegiremos el mas sencillo de todos. Ahora vamos a explicar cada componenten del metodo.

imagen = a la textura que va a ser dibujada en pantala

new Rectangle (0,0,100,200) representa la ubicacion donde va a ser dibujado el sprite, lo ancho y lo alto dle mismo. Donde 0,0 representa el origen X-Y y 100,200 es lo ancho y lo alto respectviamente. En lengauje comun esto quiere decir que el sprite sera dibujado en la posicion 0,0 de la pantalla con un ancho de 100 pixeles y alto de 200.

Color.White = Al color con el que va a ser dibujado el sprite, si queremos que el sprite o la imagen mantenga los colores originales, solo escribimos Color.White

Y finalmente, antes de terminar el metodo Draw, finalizamos las operaciones del SpriteBatch, si vas a mostrar varias imagenes en pantalla, no es necesario finalizar un spritebatch y empezar otro diferente. Tampoco es necesaro tener un SpriteBatch para cada cosa. Asi mismo, si dibujas mas de una sola imagen en pantalla. Debes tener en cuenta que lo primero que dibujes va a ser lo que se encuentre al fondo y si dibujas mas cosas, se dibujaran una posicion superior a la anterior. Osea que s lo que quieres dibujar es un imagen de fondo, dibujala primer y despues dibuja las demas cosas.

El codigo completo es el siguiente:

#region Using Statementsusing System;using System.Collections.Generic;using Microsoft.Xna.Framework;

using Microsoft.Xna.Framework.Audio;using Microsoft.Xna.Framework.Content;using Microsoft.Xna.Framework.Graphics;using Microsoft.Xna.Framework.Input;

using Microsoft.Xna.Framework.Storage;#endregionnamespaceMostrandoSprite{/// <summary>

/// This is the main type for your game/// </summary>public class Game1 : Microsoft.Xna.Framework.Game{

GraphicsDeviceManager graphics;ContentManager content;Texture2D imagen;SpriteBatch sBatch; public Game1(){graphics = new GraphicsDeviceManager(this);content = new ContentManager(Services);}/// <summary>/// Allows the game to perform any initialization it needs to before starting to run.

/// This is where it can query for any required services and load any non-graphic/// related content. Calling base.Initialize will enumerate through any components

/// and initialize them as well./// </summary>protected override void Initialize(){// TODO: Add your initialization logic here

base.Initialize();}/// <summary>/// Load your graphics content. If loadAllContent is true, you should/// load content from both ResourceManagementMode pools. Otherwise, just

/// load ResourceManagementMode.Manual content./// </summary>/// <param name=”loadAllContent”>Which type of content to load.</param>protected override void LoadGraphicsContent(bool loadAllContent){

if (loadAllContent){// TODO: Load any ResourceManagementMode.Automatic contentimagen = content.Load<Texture2D>(“Imagen”);}// TODO: Load any ResourceManagementMode.Manual content

}/// <summary>/// Unload your graphics content. If unloadAllContent is true, you should/// unload content from both ResourceManagementMode pools. Otherwise, just

/// unload ResourceManagementMode.Manual content. Manual content will get/// Disposed by the GraphicsDevice during a Reset./// </summary>/// <param name=”unloadAllContent”>Which type of content to unload.</param>

protected override void UnloadGraphicsContent(bool unloadAllContent){if (unloadAllContent){// TODO: Unload any ResourceManagementMode.Automatic contentcontent.Unload();}// TODO: Unload any ResourceManagementMode.Manual content

}/// <summary>

/// Allows the game to run logic such as updating the world,/// checking for collisions, gathering input and playing audio./// </summary>/// <param name=”gameTime”>Provides a snapshot of timing values.</param>

protected override void Update(GameTime gameTime){// Allows the game to exitif (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)this.Exit();// TODO: Add your update logic herebase.Update(gameTime);}/// <summary>/// This is called when the game should draw itself.

/// </summary>/// <param name=”gameTime”>Provides a snapshot of timing values.</param>

protected override void Draw(GameTime gameTime){graphics.GraphicsDevice.Clear(Color.CornflowerBlue);sBatch.Begin(SpriteBlendMode.AlphaBlend);sBatch.Draw(imagen, new Rectangle(0, 0, 100, 200), Color.White);sBatch.End();// TODO: Add your drawing code here

base.Draw(gameTime);}}}

Para reforzar lo aprendido:

  • Carguen mas de una imagen en pantalla, que una de esas imagenes sea el fondo de la pantalla. 
  •  Prueben diferentes colores, cambiando por color.Wheat,Color.TransparentBlack,Color.Blue, etc..
  • Cambien el ancho y el alto de la imagen asi como la posicion en la que se muestra en pantalla.
  • Cambien el color de fondo de la pantalla.
  • Coloquen una imagen en una carpeta llamada Contenido y muestrenla en la pantalla.

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

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: