Un sprite en XNA está compuesto por una textura que contiene la imagen y un rectángulo que describe su posición en la pantalla. El método LoadContent carga los recursos, mientras que Initialize configura valores como la posición. SpriteBatch dibuja los sprites usando la textura, rectángulo y color especificados en el método Draw.

2. Agenda
 Describir el principio de los sprites en los juegos y ver
como se crean estos en un juego XNA.
 Aprender mas acerca del ciclo de vida de los juegos en
XNA.
 Aprender a como utilizar el XNA Content Manager
para cargar imágenes, cuando un juego comienza su
ejecución.
 Descubrir como XNA permite crear operaciones que
hagan un mejor uso del Hardware, que den un mejor
soporte a los juegos.
 Usar el XNA para dibujar imágenes en la pantalla.

3. ¿Qué es un sprite ?
 Un sprite es cualquier elemento grafico dentro de un
juego, que se requiere manipular y mostrar.
 Un fantansma en el pac-man
 Un aliens en Space Invanders.
 Además puede ser algo mas grande.
 El fondo de la pantalla en un juego.
 Es posible pensar en un sprite como un composición
entre una imagen y una posición en pantalla.

4. Imágenes en el XNA
 Una imagen plana es manipulada por el XNA
utilizando un tipo Texture2D.
 Se crean variables de este tipo para representar las
imágenes que el juego muestra.
 Esta variables forman parte del mundo del juego, por
lo que deben estar declaradas dentro del juego.
// Game World
Texture2D jakeTexture;

5. Cargando el contenido del juego
 Cuando un juego comienza su ejecución, este puede
cargar todos los contenidos necesarios.
 Esto es algo que no puede ser ejecutado por los
métodos Draw o Update.
 El XNA Provee el método LoadContent, el cual es
llamado cuando el juego comienza.
 Este método es llamado una vez al inicio del juego.

6. El rol del LoadContent
 El método LoadContent es llamado para colocar los
valores dentro del mundo del juego.
 Es llamado solo una vez, al inicio del juego, antes de
los métodos Updata y Draw

7. El método LoadContent
 El método LoadContent que se provee el proyecto,
debe crear un valor del tipo SpriteBatch.
 Contiene una sentencia TODO para mostrar donde se
debe de adicionar el código para cargar el contenido.
protected override void LoadContent()
{
// Create a new SpriteBatch
SpriteBatch = new SpriteBatch(GraphicsDevice);
// TODO: use this.Content to load your game content
}

8. Carga de la textura
 La sentencia asigna jakeTexture el valor retornado por
el método Load.
 Le decimos al método Load que tipo de datos entregar
(una del tipo Texture2D) y el nombre del asset (jake)
protected override void LoadContent()
{
// Create a new SpriteBatch
SpriteBatch = new SpriteBatch(GraphicsDevice);
jakeTexture = this.Content.load<Texture2D>("jake");
}

9. Carga de la textura
 El item de la izquierda de la asignación es siempre la
variable siendo asignada.
protected override void LoadContent()
{
// Create a new SpriteBatch
SpriteBatch = new SpriteBatch(GraphicsDevice);
jakeTexture = this.Content.load<Texture2D>("jake");
}
El destino de la asignación

10. Carga de la textura
 El carácter = le dice a C# que vamos a realizar una
asignación
protected override void LoadContent()
{
// Create a new SpriteBatch
SpriteBatch = new SpriteBatch(GraphicsDevice);
jakeTexture = this.Content.load<Texture2D>("jake");
}
El operador igual

11. Carga de la textura
 La palabra this provee una referencia al objeto del
juego que esta corriendo en el método LaodContent
protected override void LoadContent()
{
// Create a new SpriteBatch
SpriteBatch = new SpriteBatch(GraphicsDevice);
jakeTexture = this.Content.load<Texture2D>("jake");
}
Una referencia al actual objeto

12. Carga de la textura
 Cuando un juego se ejecuta, este tiene su propio Content
Manager, el cual provee métodos que pueden ser utilizados
para manipular el contenido del juego.
protected override void LoadContent()
{
// Create a new SpriteBatch
SpriteBatch = new SpriteBatch(GraphicsDevice);
jakeTexture = this.Content.load<Texture2D>("jake");
}
El administrador de contenido para este juego

13. Carga de la textura
 El método Load es llamado para traer el asset.
 No debemos preocuparnos por como se esto se lleva a cabo,
simplemente llamamos y recibimos el contenido
protected override void LoadContent()
{
// Create a new SpriteBatch
SpriteBatch = new SpriteBatch(GraphicsDevice);
jakeTexture = this.Content.load<Texture2D>("jake");
}
Se llama el método Load

14. Carga de la textura
 El Content Manager usa el mecanismo de C# llamado
generics para crear un método que pueda cargar diferentes
tipos de recursos.
protected override void LoadContent()
{
// Create a new SpriteBatch
SpriteBatch = new SpriteBatch(GraphicsDevice);
jakeTexture = this.Content.load<Texture2D>("jake");
}
El tipo de recurso a ser recobrado

15. Carga de la textura
 El nombre del recurso es un valor string de C#
 Se colocar un string en un programa C#, colocando un texto
entre los caracteres “”.
protected override void LoadContent()
{
// Create a new SpriteBatch
SpriteBatch = new SpriteBatch(GraphicsDevice);
jakeTexture = this.Content.load<Texture2D>("jake");
}
Nombre del recurso a ser adicionado al proyecto

16. Carga de la textura
 Cuando un juego ejecuta el método LoadContent, lo
hace al principio.
 Primero se crea el SpriteBatch para luego ejecutar la
sentencia que carga las texturas que serán
administradas por el juego.
 Tener en cuenta que aun no se ha dibujado nada.
 Ahora trataremos lo de hacerlo.

17. Nombres malos del asset y errores
en tiempo de ejecución.
 Si un asset no puede ser
encontrado, el programa se
detendrá.
 VS mostrará la sentencia
donde se produce el error.
 Esto es un error en tiempo
de ejecución.
 El juego compila de manera
correcta, pero fallará en
tiempo de ejecución por
que no se encuentra el
recurso.

18. Demo

19. Posicionando el sprite usando un
rectangulo
 Un sprite esta hecho de una textura y una posición.
 XNA puede usar estas dos piezas de información para
dibujarlo en la pantalla.
 Para expresar la posición de un ítem, XNA provee un
tipo llamado Rectangle.
 Necesitamos adicionar un valor de rectángulo, para
que se pueda dibujar “jake” en el juego.
 Esto es otro ítem del mundo del juego.

20. Adicionar un rectángulo al mundo
del juego
 El mundo del juego ahora tiene dos variables.
 Ambas describen el sprite jake, pero cada una describe
un aspecto diferente del sprite.
 Se les ha dado identificadores sensibles que además
dejan claro el tipo de datos que almacenan.
 Al compilador C# no le importa esto, pero a los
ingenieros del software si.

21. La pantalla del XNA
 Un juego XNA puede ejecutarse en diferentes tamaños
de pantalla.
 Una Computadora y un Xbox soportan varios tamaños
de pantallas.
 El Zune tiene solo un tamaño de pantalla.

22. La pantalla del XNA
 Cuando un nuevo programa XNA es creado para la
computadora, se muestra en una pantalla de 800 de
ancho por 600 de alto.
 El programa puede cambiar el tipo de pantalla en el
que se muestra
800 pixels
600 pixels

23. Las coordenadas de la pantalla
 Se puede pensar como un área de pantalla como un
gráfico que tiene su origen en la esquina superior
izquierdo.
 La coordenada X da la distancia a través de la pantalla.
 La coordenada Y da la distancia hacia abajo.
X
Y
(0,0)

24. Posición de jake
 Queremos dibujar la foto con una distancia a través de
la pantalla de 30 pixeles y hacia debajo de 20 pixeles.
 Esto hace que tengamos la coordenada X=30 y la
coordenada Y=20
30
20
(0,0)
(30,20)

25. El tamaño
 Vamos a darle un tamaño de 600 pixeles de ancho por
450 pixeles de alto.
 XNA puede escalar la imagen a cualquier dimensión
que se desee
600
450

26. Construyendo el rectángulo
 La palabra reservada new crea un nuevo objeto.
 La construcción toma lugar cuando el programa se
ejecuta.
 La construcción es ejecutada por un método que es
suplido por los valores del rectángulo.
 En este caso se dan como parámetros la posición y el
tamaño.
jakeRect = new Rectangle(30, 20, 600, 450);

27. El método Initialize
 El mejor lugar para configurar los valores de jakeRect
es dentro del método Initialize.
 Es muy similar al método LoadContent.
 Es llamado por el XNA cuando el programa comienza a
ejecutarse.
 Podemos configurar jakeRect dentro del método
LoadContent, pero como esto es una configuración del
juego y no esta relacionada con el contenido, es mas
sensato hacerlo dentro del método Initialize.
 Un nuevo proyecto de XNA contiene un método
Initialize completamente vacio.

28. El método Initialize completo
 Este código configura jakeRect.
 Explicaremos el significado de base.Initialize() luego.
 Ahora tenemos una textura y posición con los que
podemos dibujar el sprite en la pantalla.
protected override void Initialize()
{
jakeRect = new Rectangle(30, 20, 600, 450);
base.Initialize();
}

29. Dibujando sprites en XNA con
SpriteBatch
 XNA provee un tipo para manejar el dibujado de
sprites.
 Este tipo es llamado SpriteBatch.
 El spriteBatch crea los lotes de sprite a ser dibujados y
envía las instrucciones apropiadas hacia el dispositivo
de graficas.
 Esto hace que el dibujado sea lo ejecutado de la
manera mas eficiente posible.
 El objeto SpriteBatch para un juego es creado dentro
del método LoadContent.

30. Utilizando el método Draw
 El código siguiente dibuja en pantalla la textura de jake
protected override void Draw(GameTime gameTime)
{
graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.begin();
spriteBatch.draw(jakeTexture, jakeRect, Color.White);
spriteBatch.end();
base.draw(gameTime);
}

31. Limpiar el fondo
 La sentencia limpia la pantalla mediante el color
Cornflower.
 Esto se crea como parte de un nuevo proyecto XNA
protected override void Draw(GameTime gameTime)
{
graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.begin();
spriteBatch.draw(jakeTexture, jakeRect, Color.White);
spriteBatch.end();
base.draw(gameTime);
}

32. Inicia el dibujado
 Esta sentencia le dice al SpriteBatch que comienze el
lote de comandos para dibujar
protected override void Draw(GameTime gameTime)
{
graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.begin();
spriteBatch.draw(jakeTexture, jakeRect, Color.White);
spriteBatch.end();
base.draw(gameTime);
}

33. Dibujar el Sprite
 spriteBatch provee el método Draw
 Tiene como parámetros, la textura, el rectángulo y el
color de luz para iluminar la imagen
protected override void Draw(GameTime gameTime)
{
graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.begin();
spriteBatch.draw(jakeTexture, jakeRect, Color.White);
spriteBatch.end();
base.draw(gameTime);
}

34. Finalizar el Batch
 Cuando el método End es llamado, SpriteBatch colocar
junto a todos los request de Draw y los envía al
dispositivo de pantalla
protected override void Draw(GameTime gameTime)
{
graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.begin();
spriteBatch.draw(jakeTexture, jakeRect, Color.White);
spriteBatch.end();
base.draw(gameTime);
}

35. Demo
 Dibujar a jake

36. Resumen
 Un sprite es hecho de una textura conteniendo una
imagen y un rectángulo que describe la posición del
sprite en la pantalla.
 El método LoadContent es parte de un juego XNA que
es llamado para cargar el contenido.
 El tipo ContentManager provee el método Load el cual
puede cargar el contenido dentro de un juego.
 EL tipo Rectangle en XNA pude ser usado para
describir un rectángulo en la pantalla.
 El tipo SpriteBatch administra el dibujado.

37. Verdadero o Falso
 La imagen a ser dibujada en un sprite es mantenida
dentro de los valores de Rectangle.
 El Content Manager controla la posición de un sprite
que es dibujado en pantalla.
 Las coordenadas de origen de la pantalla estan en la
esquina superior izquierda.
 El contenido debe ser cargado dentro del método
Initialize.
 SpriteBatch ejecuta el dibujado en la pantalla.
 El método Draw indica el color del sprite

38. Verdadero o Falso
 La imagen a ser dibujada en un sprite es mantenida
dentro de los valores de Rectangle.
 El Content Manager controla la posición de un sprite
que es dibujado en pantalla.
 Las coordenadas de origen de la pantalla estan en la
esquina superior izquierda.
 El contenido debe ser cargado dentro del método
Initialize.
 SpriteBatch ejecuta el dibujado en la pantalla.
 El método Draw indica el color del sprite

39. Verdadero o Falso
 La imagen a ser dibujada en un sprite es mantenida
dentro de los valores de Rectangle.
 El Content Manager controla la posición de un sprite
que es dibujado en pantalla.
 Las coordenadas de origen de la pantalla están en la
esquina superior izquierda.
 El contenido debe ser cargado dentro del método
Initialize.
 SpriteBatch ejecuta el dibujado en la pantalla.
 El método Draw indica el color del sprite

40. Verdadero o Falso
 La imagen a ser dibujada en un sprite es mantenida
dentro de los valores de Rectangle.
 El Content Manager controla la posición de un sprite
que es dibujado en pantalla.
 Las coordenadas de origen de la pantalla están en la
esquina superior izquierda.
 El contenido debe ser cargado dentro del método
Initialize.
 SpriteBatch ejecuta el dibujado en la pantalla.
 El método Draw indica el color del sprite

41. Verdadero o Falso
 La imagen a ser dibujada en un sprite es mantenida
dentro de los valores de Rectangle.
 El Content Manager controla la posición de un sprite
que es dibujado en pantalla.
 Las coordenadas de origen de la pantalla están en la
esquina superior izquierda.
 El contenido debe ser cargado dentro del método
Initialize.
 SpriteBatch ejecuta el dibujado en la pantalla.
 El método Draw indica el color del sprite

42. Verdadero o Falso
 La imagen a ser dibujada en un sprite es mantenida
dentro de los valores de Rectangle.
 El Content Manager controla la posición de un sprite
que es dibujado en pantalla.
 Las coordenadas de origen de la pantalla están en la
esquina superior izquierda.
 El contenido debe ser cargado dentro del método
Initialize.
 SpriteBatch ejecuta el dibujado en la pantalla.
 El método Draw indica el color del sprite

43. Verdadero o Falso
 La imagen a ser dibujada en un sprite es mantenida
dentro de los valores de Rectangle.
 El Content Manager controla la posición de un sprite
que es dibujado en pantalla.
 Las coordenadas de origen de la pantalla están en la
esquina superior izquierda.
 El contenido debe ser cargado dentro del método
Initialize.
 SpriteBatch ejecuta el dibujado en la pantalla.
 El método Draw indica el color del sprite