Uso del teclado y el mouse

Mecanismos de interacción

y control de colisionesJuan Carlos Zuluaga

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.

Uso del tecladoProyecto #4 – Parte #1

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

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 sizewidth = 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

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 Updatecuadrado.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

Utilización del mouseProyecto #4 – Parte #2

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.

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

Control de colisionesProyecto #4 – Parte #3

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.

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 atributosList<Rectangle> recObstaculos;Texture2D textura;

Para agrugar los obstáculos, agreguemos las siguientes líneas antes del base.Initialize();

// ObstaculosrecObstaculos = 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 });

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);

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.