Para poder programar un videojuego hay que saber cómo interactuar con los personajes y otros elementos del juego. La forma tradicional de interactuar es utilizar el teclado y el ratón aunque hoy hay otras formas como los controles con realidad aumentada (AR) o virtual (VR).
En este apartado vas a aprender a utilizar los eventos de teclado y ratón. Manejarlos correctamente te será imprescindible para poder programar y realizar tu reto final.
Processing tiene varias funciones y variables globales predefinidas que nos permiten aumentar la interactividad y no es necesario declararlas. Algunas de ellas se utilizan para trabajar con los eventos del teclado y del ratón.
Se pueden utilizar con condicionales pero también como funciones independiente fuera del void draw aunque para que funcionen debe existir este void draw.
Copia el código de cada ejemplo en el IDE de Processing y realiza pruebas y variaciones para jugar con sus posibilidades:
Coordenadas del ratón en el eje X y eje Y.
/* Cambia el color del rectángulo según la
posición del cursor */
void setup() {
size(300, 150);
}
void draw() {
if ( mouseX > 150) {
fill(255, 255, 0);
} else {
fill(0, 0, 255);
}
rect(100, 50, 100, 50);
}
Actúan al presionar el ratón.
Por ejemplo con la estructura condicional if:
//Dibuja cuadrados con el ratón
void setup() { size(300, 300); } void draw() { if (mousePressed) { fill(255, 100, 0, 20); rect(mouseX-50, mouseY-50, 100, 100); } }
Cuando se presiona un botón del mouse, el valor de la variable de sistema mouseButton se establece en LEFT , RIGHT o CENTER, según el botón que se presione. (Si no se presiona ningún botón, mouseButton puede restablecerse a 0 . Por esa razón, es mejor usar mousePressed primero para probar si se presiona algún botón, y solo luego probar el valor de mouseButton , como se muestra en el ejemplo.
/* Cambia el color del rectangulo según el botón
del ratón que se presione */ void draw() { if (mousePressed && (mouseButton == LEFT)) { fill(255,0,0); } else if (mousePressed && (mouseButton == RIGHT)) { fill(0,255,0); } else { fill(0,0,255); } rect(25, 25, 50, 50); }
/* ¿Qué tecla has pulsado? */
void setup() {
size(300, 200);
background(200);
}
void draw() {
textSize(30);
fill(#AF2525);
text ("Pulsa una tecla", 40, 50);
}
void keyPressed() {
background(200);
textSize(30);
fill(#3752B7);
text ("Has pulsado la " + key, 20, 150);
}
/* Cambia el color del rectángulo según la tecla
que se presione */
void setup() {
size(300, 300);
}
void draw() {
fill(255, 255, 0);
rect(100, 50, 100, 50);//amarillo
}
void keyPressed() {
fill(0, 0, 255);//azul
rect(100, 200, 100, 50);
if (keyCode == LEFT) { //flecha izquierda
fill(0, 255, 0);
rect(100, 200, 100, 50);//verde
}
}
//Dibuja cuadrados en el centro
void setup() {
size(300, 300);
}
void draw() {
if (mousePressed)
{
rectMode(CENTER);
fill(mouseX, mouseY, 150);
rect(width/2, height/2, 100, 100);
}
}
Los siguientes vídeos pueden ayudarte a comprender el funcionamiento de estas variables:
El siguiente juego es un ejemplo de aplicación de los fondos y eventos de ratón y teclado.
Copia el código y pégalo en el IDE de Processing. Tras jugar un poco, examínalo y trata de entender su funcionamiento.
/*Juego atrapa 10 bolas rojas*/
PImage juego ;
// variables globales
int gamestate = 0 ;
int Puntos = 0;
int x = 100;
int y = 100;
int tamano = 50;
int tiempo = 0;
int tiempoAcumulado = 0;
void setup() {
size(800, 450);
fill(0);
textAlign(CENTER);
juego = loadImage("campo1.png");
cursor(HAND);//el cursor se convierte en un mano
}
void draw() { // Se ejecuta 60 veces por segundo
delay(200);
if (gamestate == 0) { // Si estamos en juego, se hará todo lo siguiente
background(50, 0, 0);
textSize(20);
fill(#938D16);
text ("Atrapa 10 bolas rojas con el ratón en el menor tiempo posible", width/2, 180);
textSize(30);
fill(#AF2525);
text ("Pulsar J para Jugar", width/2, 270);
if (key == 'j') {
gamestate = 1;
Puntos = 0;
dibujarBolas();
}
}
if (gamestate == 1) { // Si estamos en el juego
if ((mouseX > x-tamano) && (mouseX < x+tamano) && (mouseY > y-tamano) && (mouseY < y+tamano)) {
Puntos += 1;
dibujarBolas();
}
if (Puntos == 10) {
gamestate = 2 ;
}
}
if (gamestate == 2) { // Si estamos en el Fin del juego
// Establecemos el fondo del final
background(200);
fill(255, 0, 0);
textSize(20);
text("Tiempo: " + tiempo +" segundos", width/2, height/2);
textSize(50);
fill(#938D16);
text ("Game Over ", width/2, (height/2)- 60);
textSize(30);
fill(#AF2525);
text ("Pulsar R para jugar de nuevo", width/2, (height/2)+60);
if (key == 'r') {
Puntos = 0;
tiempoAcumulado = millis()/1000;
dibujarBolas();
}
}
}
void dibujarBolas() {
background(#84D0F2);
//circulo
x = floor(random(10, 790));
y = floor(random(10, 440));
tamano = floor(random(20, 100));
fill(255, 0, 0);
ellipse(x, y, tamano, tamano);
//Otras bolas
for (int i = 0; i<=Puntos; i++) {
fill(random(0, 255), random(0, 255), random(0, 255));
ellipse(random(0, 800), random(0, 450), tamano, tamano );
}
//puntos
fill(255, 0, 0);
textAlign(CENTER);
textSize(18);
text("Puntos: " + (Puntos), 50, 30);
// tiempo
tiempo = (millis()/1000) - tiempoAcumulado;
//tecla
key = ' ';
//nueva pantalla
gamestate = 1;
}
Antes de seguir, para un momento y reflexiona sobre lo que has hecho.
Para ello es muy adecuado que intentes identificar qué procedimientos has tenido que poner en marcha para realizar esta actividad; cuáles eran estrategias necesarias y con qué recursos contabas para resolverla.
Piensa también en cuáles han sido las dificultades que te has encontrado a la hora de dar respuesta.
¡Todo esto te será muy útil cuando tengas que enfrentarte a alguna actividad parecida!
Entonces, estarás preparada o preparado para poder resolverla sin problemas con tu experiencia previa.
Pong (o Tele-Pong) en un clásico al que todos los amantes de los videojuegos debemos estar agradecidos, pues fue el primer videojuego de la primera generación de videoconsolas publicado por Atari, creado por Nolan Bushnell en 1972 . Está basado en el deporte de tenis de mesa (o ping pong).
Pong fue el primer videojuego con éxito comercial, y ayudó a establecer la industria de los videojuegos junto con Magnavox Odyssey. Al poco de su lanzamiento, varias empresas empezaron a producir juegos que lo imitaban. Finalmente, los competidores de Atari lanzaron nuevos tipos de videojuegos de los cuales se desviaban del formato original de Pong en varios grados, y esto, a su vez, Atari animó a su personal a ir más allá del «Pong» y producir ellos mismos juegos más innovadores. Había nacido la industria del videojuego.
Con los conocimientos que ya posees te animo a realizar un Pong elemental utilizando las interacciones de teclado.
Puedes realizar una versión simplificada llamada "frontón" con solo una raqueta o la versión de dos jugadores.
Este es un ejemplo de cómo puede quedar, aunque tu lo puedes dejar más simplificado:
Este vídeo te ayudará mucho a resolver tus dudas.
Erróneamente, mucha gente piensa que el primer juego de la historia fue Pong, pero no es así. Pong fue uno de los primeros juegos comercializados en la primera videoconsola y con éxito comercial.
La Magnavox Odyssey fue la primera videconsola y fue creada por Ralph Baer, considerado como el padre de los videojuegos.
Sin embargo el considerado primer videojuego fue muy anterior. En 1952 un juego desarrollado por Alexander Douglas y conocido como OXO era una versión del juego de Tres en raya y usaba una computadora enorme llamada EDSAC que ocupaba toda una estancia.
Años más tarde, en 1958, el equipo del Departamento de Energía de EE.UU. liderado por el físico, William Higinbotham, que participó en el desarrollo de la bomba atómica, creó un juego de computadora interactivo llamado Tennis for Two que inicialmente se jugaba en un osciloscopio.
Este juego cumple a la perfección la definición clásica de videojuego ya que se desarrolla en una pantalla, tiene interacción y es animado. Además, recuerda mucho al PONG, el primer videojuego de videoconsolas de la famosa Atari.
En el siguiente vídeo puedes ver que aspecto tenía:
Si lo necesitas, puedes descarar la descripción del video haciendo clic aquí.
Obra publicada con Licencia Creative Commons Reconocimiento No comercial Compartir igual 4.0