1. 1. 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 imgenes, cuando un juego comienza su ejecucin. 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 imgenes en la pantalla.
2. 2. 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. Adems puede ser algo mas grande. El fondo de la pantalla en un juego. Es posible pensar en un sprite como un composicin entre una imagen y una posicin en pantalla.
3. 3. Imgenes en el XNA Una imagen plana es manipulada por el XNA utilizando un tipo Texture2D. Se crean variables de este tipo para representar las imgenes 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;
4. 4. Cargando el contenido del juego Cuando un juego comienza su ejecucin, este puede cargar todos los contenidos necesarios. Esto es algo que no puede ser ejecutado por los mtodos Draw o Update. El XNA Provee el mtodo LoadContent, el cual es llamado cuando el juego comienza. Este mtodo es llamado una vez al inicio del juego.
5. 5. El rol del LoadContent El mtodo LoadContent es llamado para colocar los valores dentro del mundo del juego. Es llamado solo una vez, al inicio del juego, antes de los mtodos Updata y Draw
6. 6. El mtodo LoadContent El mtodo 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 cdigo 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 }
7. 7. Carga de la textura La sentencia asigna jakeTexture el valor retornado por el mtodo Load. Le decimos al mtodo 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("jake"); }
8. 8. Carga de la textura El item de la izquierda de la asignacin es siempre la variable siendo asignada. protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load("jake"); } El destino de la asignacin
9. 9. Carga de la textura El carcter = le dice a C# que vamos a realizar una asignacin protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load("jake"); } El operador igual
10. 10. Carga de la textura La palabra this provee una referencia al objeto del juego que esta corriendo en el mtodo LaodContent protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load("jake"); } Una referencia al actual objeto
11. 11. Carga de la textura Cuando un juego se ejecuta, este tiene su propio Content Manager, el cual provee mtodos 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("jake"); } El administrador de contenido para este juego
12. 12. Carga de la textura El mtodo 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("jake"); } Se llama el mtodo Load
13. 13. Carga de la textura El Content Manager usa el mecanismo de C# llamado generics para crear un mtodo que pueda cargar diferentes tipos de recursos. protected override void LoadContent() { // Create a new SpriteBatch SpriteBatch = new SpriteBatch(GraphicsDevice); jakeTexture = this.Content.load("jake"); } El tipo de recurso a ser recobrado
14. 14. 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("jake"); } Nombre del recurso a ser adicionado al proyecto
15. 15. Carga de la textura Cuando un juego ejecuta el mtodo LoadContent, lo hace al principio. Primero se crea el SpriteBatch para luego ejecutar la sentencia que carga las texturas que sern administradas por el juego. Tener en cuenta que aun no se ha dibujado nada. Ahora trataremos lo de hacerlo.
16. 16. Nombres malos del asset y errores en tiempo de ejecucin. 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 ejecucin. El juego compila de manera correcta, pero fallar en tiempo de ejecucin por que no se encuentra el recurso.
17. 17. Demo
18. 18. Posicionando el sprite usando un rectangulo Un sprite esta hecho de una textura y una posicin. XNA puede usar estas dos piezas de informacin para dibujarlo en la pantalla. Para expresar la posicin de un tem, XNA provee un tipo llamado Rectangle. Necesitamos adicionar un valor de rectngulo, para que se pueda dibujar jake en el juego. Esto es otro tem del mundo del juego.
19. 19. Adicionar un rectngulo 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 adems dejan claro el tipo de datos que almacenan. Al compilador C# no le importa esto, pero a los ingenieros del software si.
20. 20. La pantalla del XNA Un juego XNA puede ejecutarse en diferentes tamaos de pantalla. Una Computadora y un Xbox soportan varios tamaos de pantallas. El Zune tiene solo un tamao de pantalla.
21. 21. 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
22. 22. Las coordenadas de la pantalla Se puede pensar como un rea de pantalla como un grfico que tiene su origen en la esquina superior izquierdo. La coordenada X da la distancia a travs de la pantalla. La coordenada Y da la distancia hacia abajo. X Y (0,0)
23. 23. Posicin de jake Queremos dibujar la foto con una distancia a travs 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)
24. 24. El tamao Vamos a darle un tamao de 600 pixeles de ancho por 450 pixeles de alto. XNA puede escalar la imagen a cualquier dimensin que se desee 600 450
25. 25. Construyendo el rectngulo La palabra reservada new crea un nuevo objeto. La construccin toma lugar cuando el programa se ejecuta. La construccin es ejecutada por un mtodo que es suplido por los valores del rectngulo. En este caso se dan como parmetros la posicin y el tamao. jakeRect = new Rectangle(30, 20, 600, 450);
26. 26. El mtodo Initialize El mejor lugar para configurar los valores de jakeRect es dentro del mtodo Initialize. Es muy similar al mtodo LoadContent. Es llamado por el XNA cuando el programa comienza a ejecutarse. Podemos configurar jakeRect dentro del mtodo LoadContent, pero como esto es una configuracin del juego y no esta relacionada con el contenido, es mas sensato hacerlo dentro del mtodo Initialize. Un nuevo proyecto de XNA contiene un mtodo Initialize completamente vacio.
27. 27. El mtodo Initialize completo Este cdigo configura jakeRect. Explicaremos el significado de base.Initialize() luego. Ahora tenemos una textura y posicin con los que podemos dibujar el sprite en la pantalla. protected override void Initialize() { jakeRect = new Rectangle(30, 20, 600, 450); base.Initialize(); }
28. 28. 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 enva 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 mtodo LoadContent.
29. 29. Utilizando el mtodo Draw El cdigo 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); }
30. 30. 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); }
31. 31. 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); }
32. 32. Dibujar el Sprite spriteBatch provee el mtodo Draw Tiene como parmetros, la textura, el rectngulo 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); }
33. 33. Finalizar el Batch Cuando el mtodo End es llamado, SpriteBatch colocar junto a todos los request de Draw y los enva 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); }
34. 34. Demo Dibujar a jake
35. 35. Resumen Un sprite es hecho de una textura conteniendo una imagen y un rectngulo que describe la posicin del sprite en la pantalla. El mtodo LoadContent es parte de un juego XNA que es llamado para cargar el contenido. El tipo ContentManager provee el mtodo Load el cual puede cargar el contenido dentro de un juego. EL tipo Rectangle en XNA pude ser usado para describir un rectngulo en la pantalla. El tipo SpriteBatch administra el dibujado.
36. 36. Verdadero o Falso La imagen a ser dibujada en un sprite es mantenida dentro de los valores de Rectangle. El Content Manager controla la posicin 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 mtodo Initialize. SpriteBatch ejecuta el dibujado en la pantalla. El mtodo Draw indica el color del sprite
37. 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 posicin 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 mtodo Initialize. SpriteBatch ejecuta el dibujado en la pantalla. El mtodo Draw indica el color del sprite
38. 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 posicin de un sprite que es dibujado en pantalla. Las coordenadas de origen de la pantalla estn en la esquina superior izquierda. El contenido debe ser cargado dentro del mtodo Initialize. SpriteBatch ejecuta el dibujado en la pantalla. El mtodo Draw indica el color del sprite
39. 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 posicin de un sprite que es dibujado en pantalla. Las coordenadas de origen de la pantalla estn en la esquina superior izquierda. El contenido debe ser cargado dentro del mtodo Initialize. SpriteBatch ejecuta el dibujado en la pantalla. El mtodo Draw indica el color del sprite
40. 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 posicin de un sprite que es dibujado en pantalla. Las coordenadas de origen de la pantalla estn en la esquina superior izquierda. El contenido debe ser cargado dentro del mtodo Initialize. SpriteBatch ejecuta el dibujado en la pantalla. El mtodo Draw indica el color del sprite
41. 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 posicin de un sprite que es dibujado en pantalla. Las coordenadas de origen de la pantalla estn en la esquina superior izquierda. El contenido debe ser cargado dentro del mtodo Initialize. SpriteBatch ejecuta el dibujado en la pantalla. El mtodo Draw indica el color del sprite
42. 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 posicin de un sprite que es dibujado en pantalla. Las coordenadas de origen de la pantalla estn en la esquina superior izquierda. El contenido debe ser cargado dentro del mtodo Initialize. SpriteBatch ejecuta el dibujado en la pantalla. El mtodo Draw indica el color del sprite