Post on 11-Aug-2021
transcript
Introducción a
Por: Yolanda Martínez Treviño Concepción Villar Cuesta
¿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
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
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
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
Crear un juego nuevo en XNA
Crear un proyecto nuevo, en la pantalla principal de Visual C# 2008 Express Edition
7 © Yolanda Martínez, Concepción Villar
Seleccionar XNA Game Studio 3.0 y Windows Game (3.0)
8
Coloca un nombre a tu proyecto
© Yolanda Martínez, Concepción Villar
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
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
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
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
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
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
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
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
Cargando imágenes en 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
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
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
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
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
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
La ventana del juego
La ventana está formada por pixeles.
(0,0)
24
x
y
© Yolanda Martínez, Concepción Villar
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
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
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
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
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
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
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
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
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
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