SlideShare una empresa de Scribd logo
1 de 14
Uso del teclado y el mouse
Mecanismos de interacción
y control de colisiones
Juan 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 teclado
Proyecto #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 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
 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
Utilización del mouse
Proyecto #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 colisiones
Proyecto #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 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 });
 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.

Más contenido relacionado

La actualidad más candente

Proyecto tres en_raya_f_inal_mathias_y_grupo
Proyecto tres en_raya_f_inal_mathias_y_grupoProyecto tres en_raya_f_inal_mathias_y_grupo
Proyecto tres en_raya_f_inal_mathias_y_grupo
Robertho Mathias
 
Creando juegos con game maker 8
Creando juegos con game maker 8Creando juegos con game maker 8
Creando juegos con game maker 8
Henrydarklite
 
Tutorial game maker
Tutorial game makerTutorial game maker
Tutorial game maker
Joserichi
 
Practicas derive 6
Practicas derive 6Practicas derive 6
Practicas derive 6
Edson Olvera
 
Presentacion del proyecto
Presentacion del proyectoPresentacion del proyecto
Presentacion del proyecto
123santi9
 
Manual de practicas de Open GL
Manual de practicas de Open GLManual de practicas de Open GL
Manual de practicas de Open GL
Alincita Simon
 

La actualidad más candente (20)

Proyecto tres en_raya_f_inal_mathias_y_grupo
Proyecto tres en_raya_f_inal_mathias_y_grupoProyecto tres en_raya_f_inal_mathias_y_grupo
Proyecto tres en_raya_f_inal_mathias_y_grupo
 
Creando juegos con game maker 8
Creando juegos con game maker 8Creando juegos con game maker 8
Creando juegos con game maker 8
 
Tutorial game maker
Tutorial game makerTutorial game maker
Tutorial game maker
 
Game Maker Primera parte
Game Maker Primera parteGame Maker Primera parte
Game Maker Primera parte
 
Actividades sencillas 1
Actividades sencillas 1Actividades sencillas 1
Actividades sencillas 1
 
Java AWT Tres en Raya
Java AWT Tres en RayaJava AWT Tres en Raya
Java AWT Tres en Raya
 
Aventura
AventuraAventura
Aventura
 
Proyecto
ProyectoProyecto
Proyecto
 
Creacion de tablas geograficas en postgres
Creacion de tablas geograficas en postgresCreacion de tablas geograficas en postgres
Creacion de tablas geograficas en postgres
 
Presentación3d
Presentación3dPresentación3d
Presentación3d
 
Sudoku
SudokuSudoku
Sudoku
 
Acmar trucos de visual basic(2)
Acmar   trucos de visual basic(2)Acmar   trucos de visual basic(2)
Acmar trucos de visual basic(2)
 
Practicas derive 6
Practicas derive 6Practicas derive 6
Practicas derive 6
 
Numeros aleatorios
Numeros aleatoriosNumeros aleatorios
Numeros aleatorios
 
Comandos r
Comandos rComandos r
Comandos r
 
Presentacion del proyecto
Presentacion del proyectoPresentacion del proyecto
Presentacion del proyecto
 
Manual de practicas de Open GL
Manual de practicas de Open GLManual de practicas de Open GL
Manual de practicas de Open GL
 
Programación de Videojuegos con Python y Pilas (VIII)
Programación de Videojuegos con Python y Pilas (VIII)Programación de Videojuegos con Python y Pilas (VIII)
Programación de Videojuegos con Python y Pilas (VIII)
 
Manual de App
Manual de App Manual de App
Manual de App
 
Girar plano en layout y configuracion de guardado
Girar plano en layout y configuracion de guardado Girar plano en layout y configuracion de guardado
Girar plano en layout y configuracion de guardado
 

Destacado

1728517760.1. portafolio estudiantil
1728517760.1. portafolio estudiantil1728517760.1. portafolio estudiantil
1728517760.1. portafolio estudiantil
Barbosa Wagner
 
Teoría xna
Teoría xnaTeoría xna
Teoría xna
Dada3311
 
Hébergement web professionnel - plaquette commerciale
Hébergement web professionnel - plaquette commercialeHébergement web professionnel - plaquette commerciale
Hébergement web professionnel - plaquette commerciale
Platine
 
Les cares divertides de les abelles
Les cares divertides de les abellesLes cares divertides de les abelles
Les cares divertides de les abelles
tescoda3
 
26687 changer roue9
26687 changer roue926687 changer roue9
26687 changer roue9
Sofija J.
 
Mini miss relance le d sur l'hypersexualisation
Mini miss relance le d sur l'hypersexualisationMini miss relance le d sur l'hypersexualisation
Mini miss relance le d sur l'hypersexualisation
personalcare
 

Destacado (20)

1728517760.1. portafolio estudiantil
1728517760.1. portafolio estudiantil1728517760.1. portafolio estudiantil
1728517760.1. portafolio estudiantil
 
07. Data Structures
07. Data Structures07. Data Structures
07. Data Structures
 
Desarrollo De Videojuegos Con Xna
Desarrollo De Videojuegos Con XnaDesarrollo De Videojuegos Con Xna
Desarrollo De Videojuegos Con Xna
 
Teoría xna
Teoría xnaTeoría xna
Teoría xna
 
[Code Camp 2009] Desarrollo de videojuegos multiplataforma en la nueva genera...
[Code Camp 2009] Desarrollo de videojuegos multiplataforma en la nueva genera...[Code Camp 2009] Desarrollo de videojuegos multiplataforma en la nueva genera...
[Code Camp 2009] Desarrollo de videojuegos multiplataforma en la nueva genera...
 
Hébergement web professionnel - plaquette commerciale
Hébergement web professionnel - plaquette commercialeHébergement web professionnel - plaquette commerciale
Hébergement web professionnel - plaquette commerciale
 
Slides fotos pinturas la obsesion de van gogh e millet
Slides fotos pinturas la obsesion de van gogh e milletSlides fotos pinturas la obsesion de van gogh e millet
Slides fotos pinturas la obsesion de van gogh e millet
 
Conceptualizacion
ConceptualizacionConceptualizacion
Conceptualizacion
 
Carte de voeux
Carte de voeuxCarte de voeux
Carte de voeux
 
Aborto
AbortoAborto
Aborto
 
Cx pres1
Cx pres1Cx pres1
Cx pres1
 
Competencias 2
Competencias 2Competencias 2
Competencias 2
 
Les cares divertides de les abelles
Les cares divertides de les abellesLes cares divertides de les abelles
Les cares divertides de les abelles
 
Uniad inforamcion recomencaciones
Uniad inforamcion recomencacionesUniad inforamcion recomencaciones
Uniad inforamcion recomencaciones
 
26687 changer roue9
26687 changer roue926687 changer roue9
26687 changer roue9
 
Chiffres-clés de la sinistralité au travail selon le sexe
Chiffres-clés de la sinistralité au travail selon le sexeChiffres-clés de la sinistralité au travail selon le sexe
Chiffres-clés de la sinistralité au travail selon le sexe
 
Bonsais en fleurs
Bonsais en fleurs Bonsais en fleurs
Bonsais en fleurs
 
Mina kouk
Mina koukMina kouk
Mina kouk
 
Mini miss relance le d sur l'hypersexualisation
Mini miss relance le d sur l'hypersexualisationMini miss relance le d sur l'hypersexualisation
Mini miss relance le d sur l'hypersexualisation
 
Les rimes
Les rimesLes rimes
Les rimes
 

Similar a Xna game studio presentación 04

Jueves Part2
Jueves Part2Jueves Part2
Jueves Part2
nera24mx
 
Getting started book response
Getting started book   responseGetting started book   response
Getting started book response
patpatpati
 
Manual práctico de edición de Renders (1).pdf
Manual práctico de edición de Renders (1).pdfManual práctico de edición de Renders (1).pdf
Manual práctico de edición de Renders (1).pdf
octavio
 

Similar a Xna game studio presentación 04 (20)

Guía de programación de videojuegos i
Guía de programación de videojuegos iGuía de programación de videojuegos i
Guía de programación de videojuegos i
 
Jueves Part2
Jueves Part2Jueves Part2
Jueves Part2
 
Herramienta de construcción recursos y scripts en second life
Herramienta de construcción  recursos y scripts en second lifeHerramienta de construcción  recursos y scripts en second life
Herramienta de construcción recursos y scripts en second life
 
Casillas y botones con GeoGebra
Casillas y botones con GeoGebraCasillas y botones con GeoGebra
Casillas y botones con GeoGebra
 
Xna game studio presentación 03
Xna game studio   presentación 03Xna game studio   presentación 03
Xna game studio presentación 03
 
Xna game studio presentación 02
Xna game studio   presentación 02Xna game studio   presentación 02
Xna game studio presentación 02
 
Getting started book response
Getting started book   responseGetting started book   response
Getting started book response
 
Presentacion proyecto
Presentacion proyectoPresentacion proyecto
Presentacion proyecto
 
Presentacion proyecto
Presentacion proyectoPresentacion proyecto
Presentacion proyecto
 
Manual3 d studiomax
Manual3 d studiomaxManual3 d studiomax
Manual3 d studiomax
 
COMANDOS BASICOS EN AUTOCAD
COMANDOS BASICOS  EN AUTOCAD COMANDOS BASICOS  EN AUTOCAD
COMANDOS BASICOS EN AUTOCAD
 
Manual práctico de edición de Renders (1).pdf
Manual práctico de edición de Renders (1).pdfManual práctico de edición de Renders (1).pdf
Manual práctico de edición de Renders (1).pdf
 
Programación i
Programación iProgramación i
Programación i
 
Botones pulsantes
Botones pulsantesBotones pulsantes
Botones pulsantes
 
Codigo Explicado Rompe Bloques.docx
Codigo Explicado Rompe Bloques.docxCodigo Explicado Rompe Bloques.docx
Codigo Explicado Rompe Bloques.docx
 
Tutorial de Scratch
Tutorial de ScratchTutorial de Scratch
Tutorial de Scratch
 
Cuadernillo de-ejercicios-parte-1
Cuadernillo de-ejercicios-parte-1Cuadernillo de-ejercicios-parte-1
Cuadernillo de-ejercicios-parte-1
 
Cuadernillodeejercicios parte1-160324160448
Cuadernillodeejercicios parte1-160324160448Cuadernillodeejercicios parte1-160324160448
Cuadernillodeejercicios parte1-160324160448
 
Cuadernillo de-ejercicios-parte-1
Cuadernillo de-ejercicios-parte-1Cuadernillo de-ejercicios-parte-1
Cuadernillo de-ejercicios-parte-1
 
cuadernillo-de-ejercicios-parte-1.pdf
cuadernillo-de-ejercicios-parte-1.pdfcuadernillo-de-ejercicios-parte-1.pdf
cuadernillo-de-ejercicios-parte-1.pdf
 

Más de Juan Cardona (8)

Xna game studio presentación 01
Xna game studio   presentación 01Xna game studio   presentación 01
Xna game studio presentación 01
 
Diplomado edumatica sesión #2
Diplomado edumatica   sesión #2Diplomado edumatica   sesión #2
Diplomado edumatica sesión #2
 
Diplomado edumatica sesión #1
Diplomado edumatica   sesión #1Diplomado edumatica   sesión #1
Diplomado edumatica sesión #1
 
Taller de programación clase #5
Taller de programación   clase #5Taller de programación   clase #5
Taller de programación clase #5
 
Taller de programación clase #4
Taller de programación   clase #4Taller de programación   clase #4
Taller de programación clase #4
 
Taller de programación clase #3
Taller de programación   clase #3Taller de programación   clase #3
Taller de programación clase #3
 
Taller de programación clase #2
Taller de programación   clase #2Taller de programación   clase #2
Taller de programación clase #2
 
Taller de programación clase #1
Taller de programación   clase #1Taller de programación   clase #1
Taller de programación clase #1
 

Último

Chat GPT para la educación Latinoamerica
Chat GPT para la educación LatinoamericaChat GPT para la educación Latinoamerica
Chat GPT para la educación Latinoamerica
EdwinGarca59
 
Editorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdfEditorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdf
Yanitza28
 
microsoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamtemicrosoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamte
2024020140
 

Último (20)

Chat GPT para la educación Latinoamerica
Chat GPT para la educación LatinoamericaChat GPT para la educación Latinoamerica
Chat GPT para la educación Latinoamerica
 
10°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-810°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-8
 
Editorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdfEditorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdf
 
Función del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacionFunción del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacion
 
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdfpresentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
 
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdfRedes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
 
Imágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la informaciónImágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la información
 
Desarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - EstradaDesarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - Estrada
 
BUSCADORES DE INTERNET (Universidad de Sonora).
BUSCADORES DE INTERNET (Universidad de Sonora).BUSCADORES DE INTERNET (Universidad de Sonora).
BUSCADORES DE INTERNET (Universidad de Sonora).
 
Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024
 
De Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptxDe Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptx
 
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
 
Editorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdfEditorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdf
 
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptxinfor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
 
Tipos de datos en Microsoft Access de Base de Datos
Tipos de datos en Microsoft Access de Base de DatosTipos de datos en Microsoft Access de Base de Datos
Tipos de datos en Microsoft Access de Base de Datos
 
herramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaherramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el tema
 
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptxAVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
 
Tipos de Datos de Microsoft Access-JOEL GARCIA.pptx
Tipos de Datos de Microsoft Access-JOEL GARCIA.pptxTipos de Datos de Microsoft Access-JOEL GARCIA.pptx
Tipos de Datos de Microsoft Access-JOEL GARCIA.pptx
 
microsoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamtemicrosoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamte
 
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptxTarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
 

Xna game studio presentación 04

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