Bueno, antes que nada quiero empezar por asumir que ya instalaron XNA 3.0 ó 3.1 en su sistema y estan usando visual studio: cualquier version que tengan.

Este tutorial usa Visual Studio 2008 + XNA 3.1, pero por la simplicidad XNA 3.0 es lo mismo.

Abriremos Visual Studio, y abriremos un nuevo proyecto. (Archivo + nuevo + projecto) y lo llamaremos: SpriteTest

Una vez que la pantalla de visual studio muestre ya nuestro código por modificar notaremos lo siguiente:

• La clase de nuestro se llama: Game1
• Dentro de esta clase los métodos principales son:

1. Initialize(); – Inicializa todo lo que va dentro del juego en forma de código
2. LoadContent(); – Obtiene la referencia de los objetos conforme a su localización física
3. Update(); – Este método es importante para actualizar nuestros objetos
4. Draw(); – Este método dibuja los objetos que queremos usar

Antes que nada, necesitamos agregar un sprite a nuestro proyecto, esto lo haremos en el folder de contenido, haremos un folder nuevo llamado Imágenes.

1. Click derecho en folder de contenido (parte izquierda del visual studio)
2. Agregar
3. Nuevo Folder (llamarlo Imágenes)

En este folder agregaremos el sprite que queremos utilizar, de la misma manera que agregamos el folder pero en lugar de agregar el folder, agregaremos un objeto existente. Pueden usar la imágen que quieran por la simplicidad no importa que imagen sea pero que sea suficientemente pequeña para que quepa en la pantalla.

Ahora empieza lo interezante, El sprite básico en sí no lo podemos poner en el código y tratar de usarlo nadamas así, sino que necesitamos referenciarlo para que podamos reusar esta imágen cuantas veces queramos.

Necesitamos agregar una variable de clase a nuestro juego,  el típo de variable es de tipo Texture2D, este tipo de variables es muy útil por que nos ayuda a agregar todo típo de imágenes en 2 dimensiones. puede ser fondos, fotos, imágenes etc.

Al inicio de nuestra clase Game1 agregaremos la siguiente variable de textura:

Texture2D textura;

Señalando:

• Texture2D – Tipo de la variable, tipo de variables que hay: int, float, string, Vector2… entre muchas otras
• textura  - Nombre de la variable
• ;  - No se nos olvide el famoso “;” sin esto el código no correría es la terminación de código o línea de código

Una vez agregada esa variable al inicio, buscaremos el método de LoadContent(), puesto que ahi….. Así es adivinaron! es donde referenciaremos la imágen con su nombre. Es decir, buscaremos la localización física de esta imágen y la coordinaremos con su nombre de variable (textura)

en el método de LoadContent() agregaremos lo siguiente:

textura = Content.Load<Texture2D>(@”Images\logo”);

Cosas por notar:

• Aqui estamos cargando la imágen y la estamos poniendo en la variable “textura”
• Content.Load – Carga los objetos
• <Texture2D> – El tipo de objeto por cargar
• (@”Images\logo”) – el lugár físico de la imágen. Recuerden que agregamos la imágen al folder de contenido/imagenes

Una vez hecho esto la imágen ya esta lísta para ser mostrada, pero todvía no. Necesitamos dibujarla antes de poder verla en nuestra ventana de animación!

Buscaremos el método de Draw() en el cuál dibujaremos la imágen o textura a nuestra ventana. En Draw() agregaremos el siguiente código:

spriteBatch.Begin();

spriteBatch.Draw(textura, Vector2.Zero, Color.White);

spriteBatch.End();

Cosas por notar:

• spriteBatch.Begin() – inicializa la paleta de dibujo, los colores el espacio para poder agregar imágenes
• spriteBatch.Draw() – dibuja el objeto o textura que estamos utilizando, en este caso adquiere 3 parametros:

1. textura – Nombre de la Textura o Texture2D
2. Vector2.Zero – Posición de la textura
3. Color.White – Se podría decir que el tipo de luz que se le aplicara al objeto

Por fin ya esta dibujado y ya puden probar si funciona o no! construyan su proyecto (F5), y veamos como salió

Podremos ver en la ventana que surge, nuestra imágen estática en la posición alta izquierda. La razón por la cuál esta en esa pocisión es por que nuestro código le esta diciendo que se vaya al orígen. Es decir Vector2.Zero en cierta forma es como decir posición: (0, 0)

El código de fuente lo puedes encontrar aqui