Creación de juegos mediante la plataforma XNA de Microsoft Visual Studio Links para descargar material: Parte 01: https://www.dropbox.com/s/2b3f27izg3wfqws/01.XNA.zip Parte 02: https://www.dropbox.com/s/ep3634jsjullkbs/02.XNA.zip Parte 03: https://www.dropbox.com/s/9e3q068t6mlkted/03.XNA.zip Parte 04: https://www.dropbox.com/s/u4navlzlhtecjm0/04.XNA.zip Parte 05: https://www.dropbox.com/s/oqjll5c73kbvu1j/05.XNA.zip

1. Uso del teclado y el mouse
Mecanismos de interacción
y control de colisiones
Juan Carlos Zuluaga

2. Introducción
 Los Mecanismos de Interacción (comúnmente llamados
Controles) permiten al usuario interactuar con nuestro
Juego. Veremos como interactuar con Teclado y el
Mouse. También podemos usar el control del XBOX o el
Kinect.

3. Uso del teclado
Proyecto #4 – Parte #1

4. Usando el Teclado
 El método tradicional para cualquier juego es
utilizando al menos una o dos teclas en el Teclado.
Cabe destacar que XNA tiene soporte para múltiples
jugadores en una misma computadora, ya que
podemos detectar múltiples teclas presionadas en
un mismo instante.
 El lugar correcto para poner nuestra lógica de input
es en el método Update. Al detectar una o más
teclas presionadas podremos modificar valores en
nuestro juego para ver reflejado en acciones el
input del usuario

5.  Cree un proyecto XNA
 Agregue estos atributos a la clase Game1:
Rectangle cuadrado;
Texture2D textura;
int width;
int height;
 En el constructor de la clase Game1, agregue las siguientes líneas:
// change windows size
width = 1100;
height = 600;
graphics.PreferredBackBufferWidth = width;
graphics.PreferredBackBufferHeight = height;
 En el Initialize creamos un rectángulo rojo en el centro de la pantalla de 100
x 100 pixeles
cuadrado = new Rectangle((width - 100) / 2, (height - 100) / 2, 100, 100);
textura = new Texture2D(graphics.GraphicsDevice, 1, 1);
textura.SetData(new Color[] { Color.Red });
 En el Draw, dibujamos el rectángulo:
spriteBatch.Begin();
spriteBatch.Draw(textura, cuadrado, Color.White);
spriteBatch.End();
 Probemos lo que llevamos hasta el momento

6.  En el método Update, identificamos si el usuario, nos presiono alguna de las
fechas del teclado
var teclado = Keyboard.GetState();
if (teclado.IsKeyDown(Keys.Right)) cuadrado.X += 10;
if (teclado.IsKeyDown(Keys.Left)) cuadrado.X -= 10;
if (teclado.IsKeyDown(Keys.Up)) cuadrado.Y -= 10;
if (teclado.IsKeyDown(Keys.Down)) cuadrado.Y += 10;
 Ya podemos probar el movimiento del cuadro rojo
 Para validar que el cuadro no se salga de la pantalla, vamos a agregar las
siguientes líneas al método Update
cuadrado.X = (int)MathHelper.Clamp(cuadrado.X, 0, width - cuadrado.Width);
cuadrado.Y = (int)MathHelper.Clamp(cuadrado.Y, 0, height - cuadrado.Height);
 Ya podemos probar el movimiento del cuadro rojo, sin permitir que salga del
área del juego

7. Utilización del mouse
Proyecto #4 – Parte #2

8. Usando el Mouse
 El segundo método de entrada tradicional es el
Mouse (o Ratón). Para detectarlo es necesario hacer
uso de la clase Mouse y, al igual que hicimos con el
teclado, obtener el estado actual. Cabe destacar
que para que el mouse sea visible en un juego XNA
debemos correr sobre plataforma PC e indicar al
momento de inicializar el juego que queremos
tener el cursor visible. En esta ocasión utilizaremos
la posición del cursor y el click. En futuros niveles
de la carrera aprenderemos a utilizar comandos
avanzados como la Rueda de Scroll, el botón
Derecho, etc.
 El ejemplo a continuación dibuja un cuadrado en
pantalla y lo mueve a la posición exacta en donde
hacemos clic con el Mouse.

9.  En el constructor de la clase Game1, agregue la siguiente línea:
this.IsMouseVisible = true;
 Ahora en el método Update antes de las línea del MathHelper, agreguar las
siguientes líneas:
var mouse = Mouse.GetState();
if (mouse.LeftButton == ButtonState.Pressed)
{
cuadrado.X = mouse.X;
cuadrado.Y = mouse.Y;
}
 Probemos lo que llevamos hasta el momento

10. Control de colisiones
Proyecto #4 – Parte #3

11. Control de colisiones
 Es fundamental para nuestros juegos identificar el control de colisiones.
Cuando un proyectil disparado por un objeto, impacta otro objeto. Cuando
una patada o puño alcanza un oponente, cuando un carro choca contra un
obstáculo, son características presentes en casi todos los juegos. XNA nos
provee herramientas para hacer nuestro trabajo más fácil y divertido.

12.  Vamos a desativar el mouse para este concepto. En el constructor de la clase
Game1, comentaree la siguiente línea:
//this.IsMouseVisible = true;
 Ahora en el método Update antes de las línea del MathHelper, comentariar las
siguientes líneas:
var mouse = Mouse.GetState();
if (mouse.LeftButton == ButtonState.Pressed)
{
cuadrado.X = mouse.X;
cuadrado.Y = mouse.Y;
}
 Agregar los siguientes atributos
List<Rectangle> recObstaculos;
Texture2D textura;
 Para agrugar los obstáculos, agreguemos las siguientes líneas antes del
base.Initialize();
// Obstaculos
recObstaculos = new List<Rectangle>();
recObstaculos.Add(new Rectangle(150, 0, 10, height - 150));
recObstaculos.Add(new Rectangle(300, 150, 10, height));
recObstaculos.Add(new Rectangle(450, 0, 10, height - 150));
recObstaculos.Add(new Rectangle(600, 150, 10, height));
recObstaculos.Add(new Rectangle(750, 0, 10, height - 150));
obstaculo = new Texture2D(graphics.GraphicsDevice, 1, 1);
recObstaculos.Add(new Rectangle(900, 150, 10, height));
obstaculo.SetData(new Color[] { Color.Green });

13.  Cambiemos la posición inicial del cuadro con la siguiente línea:
cuadrado = new Rectangle(10, 10, 100, 100);
 En el método Draw, pintemos los obstáculos, con las siguientes líneas:
foreach(Rectangle recObstaculo in recObstaculos)
{
spriteBatch.Draw(obstaculo, recObstaculo, Color.White);
}
robemos lo que llevamos
 Ahora controlemos las colisiones en el método Update. El método Update queda:
var teclado = Keyboard.GetState();
int antX = cuadrado.X;
int antY = cuadrado.Y;
if (teclado.IsKeyDown(Keys.Right)) cuadrado.X += 10;
if (teclado.IsKeyDown(Keys.Left)) cuadrado.X -= 10;
if (teclado.IsKeyDown(Keys.Up)) cuadrado.Y -= 10;
if (teclado.IsKeyDown(Keys.Down)) cuadrado.Y += 10;
foreach (Rectangle recObstaculo in recObstaculos)
{
if (recObstaculo.Intersects(cuadrado))
{
cuadrado.X = antX;
cuadrado.Y = antY;
}
}
cuadrado.X = (int)MathHelper.Clamp(cuadrado.X, 0, width - cuadrado.Width);
cuadrado.Y = (int)MathHelper.Clamp(cuadrado.Y, 0, height - cuadrado.Height);
base.Update(gameTime);

14. Taller #3
 Realizar un juego donde aparezcan los cuadrados de 100 x 100, uno rojo y
otro verde. Ambos cuadros se pueden mover por pantalla. El rojo con las
teclas W, S, A, D (arriba, abajo, izquierda, derecha) y el verde con las flechas
arriba, abajo, izquierda, derecha. Se debe controlar que ambos cuadros no se
puedan cruzar.