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