XNA: Cargar un sprite

noviembre 28, 2008


Lo primero que uno se da cuenta nada más empezar un proyecto nuevo con XNA es que ya funciona. Si exacto, ya sale una ventana perfectamente. Esto me recuerda las paranoias que había que montarse con C++ y GLUT para poder lograr sacar una simple ventana. Ya había leído esto antes de empezar y lo comprobé. Realmente muy bueno aunque claro esta, se trata de código autogenerado, no le demos mayor importancia.

Nada más empezar observamos distintas cosas. La primera es que los métodos principales ya están medio implementados automáticamente, lo cual, facilita enormemente la orientación a la hora de empezar y ayuda a entender que y como estamos haciendo las cosas.

Una vez orientados y mínimamente familiarizados con el lenguaje C# y el IDE lo primero que hay que hacer es, pulsar F1. Por primera vez en todo el tiempo que llevo utilizando Microsoft Windows, la ayuda sirve de algo y en este caso concreto, es mi guía personal de aprendizaje de XNA.

La ayuda de Visual Studio C# 2008 Express es muy buena gracias al estar conectado directamente si disponemos de internet a MSDN cosa que ayuda pues no hay que liarse con la web y podemos ir directamente a lo que nos interesa.

De momento, voy a ir siguiendo paso por paso, uniendo o separando, a mi modo de ver cada uno de los mini-tutoriales disponibles que son, de gran ayuda, aunque de mayor ayuda es aun los mini-ejemplos ya implementados. Sin lugar a dudar, un 9,5/10 para Microsoft, sería un 10 si estuviese en distintos idiomas.

Empezaré con cargar un sprite que viene a resumir los dos primeros puntos. Omitiré ciertas cosas en las explicaciones (XBox360, zune, etc) pero siempre será 100% funcional lo descrito aquí.

Lo primero (dejando de lado crear un proyecto la plataforma Windows) es pode añadir el contenido que utilizaremos en nuestro proyecto. Nada más fácil. Existen 2 formas de añadir contenido, como recurso o como link a recurso.

Para añadir un contenido como recurso pulsamos botón derecho en el panel de soluciones y pulsamos en agregar objeto existente. Una vez seleccionado el fichero le damos a agregar. Simple. Si por contra deseamos añadirlo como link a recurso seguimos exactamente los mismos pasos pero en el botón de agregar, si nos fijamos, vemos que hay una flecha. Al pulsarla saldrá un menú contextual y podremos elegir entre agregar o agregar como link. Seleccionamos como link y ya esta. Más que simple.

Se recomienda la segunda forma a no ser que sea un proyecto en el que solo intervengas tu según dice la ayuda. Desde el principio a mi me pareció la mejor opción sin duda.

Para empezar la primera prueba con un sprite, añadiremos un sprite en mi caso un JPEG. En propiedades del recurso podremos renombrarlo y ver que tipo de paquetería se utiliza del framework entre otras cosas. Interesante saberlo.

Pasemos a cargar un sprite en pantalla siguiendo el tutorial de F1 (xD).

Lo primero es crear los atributos, privados, tanto para la textura 2D como para la capa de dibujo de la textura como el recuadro de seguridad para no salirse de las dimensiones del dispositivo, en este caso pantalla. Los atributos son atributos de clase.

private Texture2D SpriteTexture;
private SpriteBatch ForegroundBatch;
private Rectangle TitleSafe;

Una vez tenemos definidos los atributos que utilizaremos para cargar y manejar el sprite vamos al método overrided LoadContent para crear la nueva capa y se cargará el sprite que deseemos. Luego calcularemos el área visible del dispositivo (pantalla).

ForegroundBatch = new SpriteBatch(graphics.GraphicsDevice);
SpriteTexture = Content.Load("sprite");
TitleSafe = GetTitleSafeArea(.8f);


Content.Load
especifica el modelo que utilizaremos, en este caso Texture2D entre mayor/menor y entre paréntesis el nombre del recursos que se encuentra en Content. Para saber el nombre debemos ir a propiedades del recurso aunque de normal es el nombre del recurso. Respecto a TitleSafe, en él se guarda en que posiciones se puede dibujar con seguridad llamando al metodo GetTitleSafeArea que escribiremos a continuación.

protected Rectangle GetTitleSafeArea(float percent){
Rectangle RetVal = new Rectangle(graphics.GraphicsDevice.Viewport.X,
graphics.GraphicsDevice.Viewport.Y,
graphics.GraphicsDevice.Viewport.Width,
graphics.GraphicsDevice.Viewport.Heigth);
return RetVal;
}

Al método se le pasa como argumento el porcentaje del dispositivo que se verá aunque en este caso, al tratarse de una pantalla de monitor, el porcentaje es siempre 100% por ello, le pasamos directamente los valores que debe tener gracias al framework que lo facilita.

Ahora solo queda dibujar el sprite en la capa que hemos creado y especificar la posición que deseamos que sea dibujado utilizando el método Draw.

GraphicsDevice.Clear(Color.CornFlameBlue);
ForegroundBatch.Begin();
Vector2 pos = new Vector2(TitleSafe.Left, TitleSafe.Top);
ForegroundBatch.Draw(SpriteTexture, pos, Color.White);
ForegroundBatch.End();
base.Draw(gameTime);

Primero hemos limpiado la pantalla decidiendo el color de fondo. Luego inicializamos la capa y creamos un vector pos del tipo Vector2 en el que indicamos la posicion (X,Y) en la que se dibujará el sprite y lo dibujamos.

ACTUALIZACIÓN(03.12.08): para concretar la posición (X,Y) que deseamos se utiliza el TilteSafe.X = int x y TitleSafe.Y = int y siendo el lateral izquierdo-derecha el (0,0) tal que: Vector2 pos = new Vector2(TitleSafe.X = 300, TitleSafe.Y = 400);

ACTUALIZACIÓN(19.01.09): el paramentro Color.White es para teñir la imagen de modo que si ponemos Color.Green la imagen se ve verde. Con White no se modifica.

Anuncios

One Response to “XNA: Cargar un sprite”


  1. […] las que vienen en ejemplo de F1, concretamente Courier New. Para ello me remito a la entrada de dibujar sprites donde se explica como añadir contenidos al […]


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: