xna 01 - intro e imagenes

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.
© Yolanda Martínez, Concepción Villar
2
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
© Yolanda Martínez, Concepción Villar
3
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)
© Yolanda Martínez, Concepción Villar
4
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.
© Yolanda Martínez, Concepción Villar
5
Crear un juego nuevo en
XNA
Crear un proyecto nuevo, en la pantalla
principal de Visual C# 2008 Express Edition
© Yolanda Martínez, Concepción Villar
7
Seleccionar XNA Game Studio 3.0
y Windows Game (3.0)
Coloca un nombre
a tu proyecto
© Yolanda Martínez, Concepción Villar
8
Al crear un juego se crean
automáticamente algunos elementos
Program.cs
Crea un objeto de la
clase Game1 y
ejecuta su método
Run
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.
© Yolanda Martínez, Concepción Villar
9
Al crear un juego se crean
automáticamente algunos elementos
Game1.cs
Es la clase para
el juego.
© Yolanda Martínez, Concepción Villar
10
Algunos elementos de la clase
Game1
Hereda de la clase Game
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Tiene un constructor
public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
}
© Yolanda Martínez, Concepción Villar
11
Algunos elementos de la clase
Game1
Tiene un método Initialize()
protected override void Initialize()
{
// TODO: Add your initialization logic here
base.Initialize();
}
Tiene un método LoadContent()
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
}
© Yolanda Martínez, Concepción Villar
12
Algunos elementos de la clase
Game1
Método Update()
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);
}
Método Draw()
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
// TODO: Add your drawing code here
base.Draw(gameTime);
}
© Yolanda Martínez, Concepción Villar
13
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é.
© Yolanda Martínez, Concepción Villar
14
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.
© Yolanda Martínez, Concepción Villar
15
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)
© Yolanda Martínez, Concepción Villar
16
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)
© Yolanda Martínez, Concepción Villar
18
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.
© Yolanda Martínez, Concepción Villar
20
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.
© Yolanda Martínez, Concepción Villar
21
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.
© Yolanda Martínez, Concepción Villar
22
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
© Yolanda Martínez, Concepción Villar
23
La ventana del juego
La ventana está formada por pixeles.
(0,0)
x
y
© Yolanda Martínez, Concepción Villar
24
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
© Yolanda Martínez, Concepción Villar
25
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.
© Yolanda Martínez, Concepción Villar
26
Sprite
 
En términos de juegos computacionales, un
sprite es una imagen plana que se va a
integrar a una escena más grande.
© Yolanda Martínez, Concepción Villar
27
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.
© Yolanda Martínez, Concepción Villar
28
Dibujar sprites a la pantalla
Para dibujar sprites a la pantalla es necesario:
 
1. 
2. 
Indicarle al objeto spriteBatch cuando iniciar a dibujar
(Begin).
Llamar al método Draw para cada uno de los sprites que
se quieran dibujar, usando: El color de la luz que iluminará la textura
spriteBatch.Draw(paisaje, rectangle, Color.White);
La textura a dibujar
3. 
Decirle al objeto spriteBatch cuando ya se han enviado
todos los sprites que se quiere mostrar en la pantalla
(End).
El rectángulo dentro del cual se dibujará la textura
© Yolanda Martínez, Concepción Villar
29
Dibujando la imagen 2D al tamaño
2D, ésta es la
de la ventana En
coordenada (0,0)
Coordinada (X,Y) inicial
spriteBatch.Begin();
Cuántos pixeles ocupará de ancho
spriteBatch.Draw( paisaje,
new Rectangle( 0, 0,
graphics.GraphicsDevice.Viewport.Width,
Imagen a dibujar
graphics.GraphicsDevice.Viewport.Height),
Color.White);
spriteBatch.End();
Cuántos pixeles ocupará de alto
El código se escribe dentro del método Draw
© Yolanda Martínez, Concepción Villar
30
Dibujando la imagen 2D en
distintas posiciones de la pantalla
spriteBatch.Begin();
spriteBatch.Draw( paisaje,
new Rectangle( 0 , 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 / 2 ,
graphics.GraphicsDevice.Viewport.Height / 2 ,
graphics.GraphicsDevice.Viewport.Width / 2 ,
graphics.GraphicsDevice.Viewport.Height / 2 ) ,
Color.White);
spriteBatch.End();
© Yolanda Martínez, Concepción Villar
31
Dibujando la imagen 2D en
distintas posiciones de la pantalla
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();
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();
© Yolanda Martínez, Concepción Villar
32
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();
© Yolanda Martínez, Concepción Villar
33
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;
LoadContents
// debe estar declarado como atributo y
// se le debe haber cargado una imagen en
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.
© Yolanda Martínez, Concepción Villar
34