Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8....

34
Introducción a Por: Yolanda Martínez Treviño Concepción Villar Cuesta

Transcript of Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8....

Page 1: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Introducción a

Por: Yolanda Martínez Treviño Concepción Villar Cuesta

Page 2: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

¿Qué es XNA?

  En Agosto de 2006 Microsoft lanzó XNA Game Studio Express.

  XNA es un conjunto de herramientas que facilitan el diseño y desarrollo de juegos para computadora.

  Con esta herramienta se puede desarrollar juegos para Windows XP, Windows Vista, Xbox 360 o Zune.

2 © Yolanda Martínez, Concepción Villar

Page 3: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Requerimientos para correr juegos de XNA 3.0 en Windows

  Para correr juegos en Windows, la PC debe:

  Tener tarjeta gráfica que soporte el Shader Model 1.1 o superior (Es recomendable que soporte el Shader Model 2.0) y que soporte DirectX 9.0c.

  Tener instalado Visual C# 2008 Express Edition ó Visual Studio 2008

3 © Yolanda Martínez, Concepción Villar

Page 4: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Requerimientos para correr juegos de XNA en Xbox 360

  El Xbox 360 debe estar equipado con disco duro.

  La consola de Xbox debe estar conectada a Internet.

  Se requiere tener suscripción a Xbox Live Silver o mejor.

  Se requiere ser miembro del XNA Creators Club (http://creators.xna.com)

4 © Yolanda Martínez, Concepción Villar

Page 5: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Juegos para el Xbox

  Cuando se desarrollan juegos en XNA para correrlos en un Xbox 360 las 2 máquinas usan la conexión a Internet para comunicarse.

  Hay un procedimiento que se debe seguir para conectar ambos equipos.

  La descripción detallada de los pasos para hacer esta conexión se puede ver en el Help de la aplicación XNA Game Studio Device Center que viene como parte de la instalación del XNA.

5 © Yolanda Martínez, Concepción Villar

Page 6: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Crear un juego nuevo en XNA

Page 7: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Crear un proyecto nuevo, en la pantalla principal de Visual C# 2008 Express Edition

7 © Yolanda Martínez, Concepción Villar

Page 8: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Seleccionar XNA Game Studio 3.0 y Windows Game (3.0)

8

Coloca un nombre a tu proyecto

© Yolanda Martínez, Concepción Villar

Page 9: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Al crear un juego se crean automáticamente algunos elementos

Crea un objeto de la clase Game1 y ejecuta su método Run

Program.cs

El garbage colector solamente funciona en Windows, entonces debemos usar el using, que se asegura de que se libere la memoria al terminar de ejecutarse el juego.

9 © Yolanda Martínez, Concepción Villar

Page 10: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Al crear un juego se crean automáticamente algunos elementos

Game1.cs

Es la clase para el juego.

10 © Yolanda Martínez, Concepción Villar

Page 11: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Algunos elementos de la clase Game1

public class Game1 : Microsoft.Xna.Framework.Game { GraphicsDeviceManager graphics; SpriteBatch spriteBatch;

public Game1() { graphics = new GraphicsDeviceManager(this); Content.RootDirectory = "Content"; }

Hereda de la clase Game

Tiene un constructor

11 © Yolanda Martínez, Concepción Villar

Page 12: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Algunos elementos de la clase Game1 protected override void Initialize() { // TODO: Add your initialization logic here base.Initialize(); }

protected override void LoadContent() { // Create a new SpriteBatch, which can be used to draw textures. spriteBatch = new SpriteBatch(GraphicsDevice); // TODO: use this.Content to load your game content here }

Tiene un método Initialize()

Tiene un método LoadContent()

12 © Yolanda Martínez, Concepción Villar

Page 13: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Algunos elementos de la clase Game1 protected override void Update(GameTime gameTime) { // Allows the game to exit if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed) this.Exit();

// TODO: Add your update logic here

base.Update(gameTime); }

protected override void Draw(GameTime gameTime) { GraphicsDevice.Clear(Color.CornflowerBlue);

// TODO: Add your drawing code here

base.Draw(gameTime); }

Método Update()

Método Draw()

13 © Yolanda Martínez, Concepción Villar

Page 14: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

El Ciclo del Juego (Game Loop)

  Los juegos tienen un ciclo principal que siempre está activo, siempre está procesando la entrada del jugador y actualizando el estado de los objetos que existen en el juego.

  Este ciclo se ejecuta 60 veces por segundo. De esta forma el juego siempre está activo, aunque el jugador no lo esté.

14 © Yolanda Martínez, Concepción Villar

Page 15: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Orden de ejecución de los métodos en un juego en XNA   Lo primero que se llama es el Constructor. Aquí se

debe solicitar la memoria que se requiera.

  Después se ejecuta Initialize(). Aquí se deben ejecutar tareas de inicialización, como establecer la resolución del juego o crear objetos que serán necesarios para el juego.

  Luego se llama LoadContent(). Es en donde se cargan los recursos (imágenes o sonidos) del juego.

15 © Yolanda Martínez, Concepción Villar

Page 16: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Orden de ejecución de los métodos de un juego en XNA   Después viene el ciclo del juego como una secuencia

de llamadas a:

  Update() – En este método se procesa la entrada del usuario y se actualiza el estado de todos los objetos del juego. No debe dibujar nada.

  Draw() – En este método se deben dibujar todos los objetos que sean visibles para el usuario. No debe cambiar nada(es decir: no debe ejecutar acciones de update)

16 © Yolanda Martínez, Concepción Villar

Page 17: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Cargando imágenes en XNA

Page 18: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Formato de las imágenes en 2D

  Tus imágenes deben estar en formato:

  .DDS (Microsoft DirectX)   .BMP (Windows Bitmap),   .PNG (Portable Network Graphics)   .JPG (Joint Photographic Experts Group).   .TGA (Truevision Inc.'s)

18 © Yolanda Martínez, Concepción Villar

Page 19: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Agregar una imagen al juego

  Para agregar una imagen, debes colocarla en el directorio Content.

Hay varias maneras de hacerlo:

•  Arrastrando la imagen sobre el directorio Content dentro del Solution Explorer.

•  Hacer clic con el botón secundario sobre el directorio Content y seleccionar Add/Existing Item y seleccionar el archivo que se quiere agregar.

•  Copiar el archivo de la imagen y pegarlo en el directorio Content, con el botón secundario del ratón. 19 © Yolanda Martínez, Concepción Villar

Page 20: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Asset

  Una vez agregada la imagen, si se da clic con el botón secundario y se selecciona Properties, se puede ver la ventana inferior.

  Allí se puede ver la propiedad Asset Name, que es el nombre con el que se debe hacer referencia a la imagen dentro del programa.

20 © Yolanda Martínez, Concepción Villar

Page 21: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Texturas

  Para XNA una imagen que quieres dibujar es una textura.

  Una textura se puede dibujar como una imagen plana (en 2D) o se puede utilizar para “forrar” un modelo de 3D.

21 © Yolanda Martínez, Concepción Villar

Page 22: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Texture2D

  Ahora que ya agregaste la imagen al directorio Content, ya es parte de tu juego, pero no la has cargado para usarla en el programa.

  Para cargar la imagen al programa es necesario definir una variable de tipo Texture2D. Que manejará una textura en 2 dimensiones.

22 © Yolanda Martínez, Concepción Villar

Page 23: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Cargar la imagen 2D

1.  Define una variable de tipo Texture2D como variable de instancia de la clase Game1

private Texture2D paisaje;

2.  Carga la imagen dentro del método LoadContent utilizando:

paisaje = Content.Load<Texture2D>("Sunset");

El nombre que aparece en la propiedad Asset Name 23 © Yolanda Martínez, Concepción Villar

Page 24: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

La ventana del juego

La ventana está formada por pixeles.

(0,0)

24

x

y

© Yolanda Martínez, Concepción Villar

Page 25: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

El tamaño de la ventana del juego

  Se puede obtener el ancho y la altura de la ventana del juego utilizando las propiedades:

  graphics.GraphicsDevice.Viewport.Width   graphics.GraphicsDevice.Viewport.Height

25 © Yolanda Martínez, Concepción Villar

Page 26: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Posición de la imagen en la pantalla   Para indicarle a XNA en dónde se localizará la

imagen se puede utilizar la clase Rectangle.

  Es necesario definir un rectángulo dentro del cual se mostrará la imagen.

  El constructor de la clase rectángulo recibe:   la coordenada (x, y) de la esquina superior izquierda;   el ancho y alto, en pixeles, del rectángulo.

26 © Yolanda Martínez, Concepción Villar

Page 27: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Sprite

  En términos de juegos computacionales, un sprite es una imagen plana que se va a integrar a una escena más grande.

27 © Yolanda Martínez, Concepción Villar

Page 28: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

SpriteBatch

  Para dibujar sprites en la pantalla es necesario crear un objeto de tipo SpriteBatch.

  La clase SpriteBatch se usa para “agrupar” un conjunto de sprites que se quieren mostrar en la pantalla.

  XNA crea una variable llamada spriteBatch que es de tipo SpriteBatch; esto dentro del método LoadContent.

28 © Yolanda Martínez, Concepción Villar

Page 29: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Dibujar sprites a la pantalla

  Para dibujar sprites a la pantalla es necesario: 1.  Indicarle al objeto spriteBatch cuando iniciar a dibujar

(Begin).

2.  Llamar al método Draw para cada uno de los sprites que se quieran dibujar, usando:

spriteBatch.Draw(paisaje, rectangle, Color.White);

3.  Decirle al objeto spriteBatch cuando ya se han enviado todos los sprites que se quiere mostrar en la pantalla (End).

El color de la luz que iluminará la textura

La textura a dibujar

El rectángulo dentro del cual se dibujará la textura 29 © Yolanda Martínez, Concepción Villar

Page 30: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Dibujando la imagen 2D al tamaño de la ventana

spriteBatch.Begin(); spriteBatch.Draw( paisaje, new Rectangle( 0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height), Color.White); spriteBatch.End();

Coordinada (X,Y) inicial

Cuántos pixeles ocupará de ancho

Cuántos pixeles ocupará de alto

Imagen a dibujar

El código se escribe dentro del método Draw

En 2D, ésta es la coordenada (0,0)

30 © Yolanda Martínez, Concepción Villar

Page 31: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Dibujando la imagen 2D en distintas posiciones de la pantalla

spriteBatch.Begin(); spriteBatch.Draw( paisaje, new Rectangle( graphics.GraphicsDevice.Viewport.Width / 2 , graphics.GraphicsDevice.Viewport.Height / 2 , graphics.GraphicsDevice.Viewport.Width / 2 , graphics.GraphicsDevice.Viewport.Height / 2 ) , Color.White); spriteBatch.End();

spriteBatch.Begin(); spriteBatch.Draw( paisaje, new Rectangle( 0 , 0 , graphics.GraphicsDevice.Viewport.Width / 2 , graphics.GraphicsDevice.Viewport.Height / 2 ) , Color.White); spriteBatch.End();

31 © Yolanda Martínez, Concepción Villar

Page 32: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Dibujando la imagen 2D en distintas posiciones de la pantalla

spriteBatch.Begin(); spriteBatch.Draw( paisaje, new Rectangle( graphics.GraphicsDevice.Viewport.Width / 2, 0 , graphics.GraphicsDevice.Viewport.Width / 2 , graphics.GraphicsDevice.Viewport.Height / 2 ) , Color.White); spriteBatch.End();

spriteBatch.Begin(); spriteBatch.Draw( paisaje, new Rectangle( graphics.GraphicsDevice.Viewport.Width / 4 , graphics.GraphicsDevice.Viewport.Height / 4 , graphics.GraphicsDevice.Viewport.Width / 2 , graphics.GraphicsDevice.Viewport.Height / 2 ) , Color.White); spriteBatch.End();

32 © Yolanda Martínez, Concepción Villar

Page 33: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Dibujando la imagen del tamaño original

  Se puede obtener el ancho y la altura de una textura utilizando las propiedades: Width y Height, como se muestra en el siguiente ejemplo:

private Texture2D mickey; // debe estar declarado como atributo y // se le debe haber cargado una imagen en LoadContents

spriteBatch.Begin(); spriteBatch.Draw( mickey, new Rectangle( 0 , 0, mickey.Width, mickey.Height) ,

Color.White); spriteBatch.End();

33 © Yolanda Martínez, Concepción Villar

Page 34: Introducción a - Weeblyproyectofinalcisp.weebly.com/uploads/2/2/8/7/22873198/... · 2019. 8. 13. · ¿Qué es XNA? En Agosto de 2006 Microsoft lanzó XNA Game Studio Express. XNA

Otra versión del método Draw para dibujar la imagen del tamaño original.   En lugar de especificar el rectángulo en el que se mostrará la imagen, se

puede especificar una coordenada, para esto se usa un objeto de tipo Vector2 que contiene como propiedades X y Y.

private Texture2D mickey; // debe estar declarado como atributo y // se le debe haber cargado una imagen en LoadContents

spriteBatch.Begin(); spriteBatch.Draw( mickey, new Vector2( 0 , 0), Color.White); spriteBatch.End();

Con esta versión del Draw la imagen se dibuja de su tamaño original.

34 © Yolanda Martínez, Concepción Villar