Una parte fundamental de un videojuego son sus elementos gráficos. De ellos va a depender en gran parte el interés de los usuarios, ya que la apariencia visual del juego es lo primero que vemos y nos puede resultar más o menos atrayente.
Como he comentado anteriormente, en los equipos de desarrollo profesionales existen los llamados artistas de entorno en 3D (3 dimensiones) o ilustradores en 2D (2 dimensiones) que son especialistas en crear los entornos gráficos de los videojuegos.
En Processing trabajamos fundamentalmente con imágenes vectoriales que utilizaremos tanto para los fondos como para los personajes. De esta forma, dominar los elementos gráficos, te ayudará para construir tu juego final.
1. Los fondos
En un videojuego los fondos pueden ser y comportarse de distintas formas:
Fondos en un videojuego
Fondos
Comportamiento
Fijo
El personaje se mueve pero el fondo no.
Scroll
El personaje siempre está en la misma posición y es el fondo el que se mueve.
Dinámico
El fondo cambia en cada nivel o pasado un tiempo.
GUI
Una "Graphical User Interface" o GUI, es una interfaz entre la persona y la máquina.
Scroll y Parallax
Varias capas de fondo que se mueven a distinta velocidad.
Tarea: debes ir copiando los códigos de los siguientes ejemplos en el IDE de Processing para ver su resultado. Prueba con otros fondos o utiliza los que se acompañan en algunos casos.
Fondo fijo
Fondo fijo del juego de "Recoge manzanas"
Es el sistema más simple. Sólo necesita el código necesario para visualizarlo el fondo como el siguiente:
PImage fondo; ....
fondo = loadImage("campo.png"); ...
image(fondo, 0, 0);
Scroll
El fondo móvil aporta mayor dinamismo al juego. La imagen de fondo debe tener una mayor extensión que la pantalla y se denomina "mapa del juego". Un juego puede tener varios mapas que cambiarán según los distintos niveles. Las teclas de dirección en este caso modifican las coordenadas del fondo en lugar de las del personaje.
En este caso debe haber una condición que ocasione el cambio del fondo, como pueden ser:
Se han alcanzado un determinado nivel de puntos.
Ha transcurrido el tiempo máximo estipulado.
El personaje ha llegado a un punto determinado en el mapa del juego.
El código necesario básicamente es como el de la GUI que veremos a continuación. Pero la condición para cambiar de fondo, variable "gamestate" en el ejemplo, puede ser alguna de las tres comentadas o similar.
GUI
La interfaz gráfica de usuario, conocida también como GUI, es una parte de un programa informático o videojuego en nuestro caso, que actúa de interfaz de usuario, utilizando un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz.
Todo juego que se precie, por simple que sea, debe tener al menos tres partes. Como mínimo, debe aparecer al inicio del juego con las opciones y menús, durante el juego con uno o varios niveles y al final del juego normalmente con el marcador final y la posibilidad de volver a jugar.
PImage juego ;
int gamestate = 0 ;
void setup() { // inicialización
size(797, 463); // Tamaño de la ventana: ancho x alto (px)
fill(0);
textSize(40); // ... Tamaño de la letra
juego = loadImage("campo1.png");
}
void draw() { // Se ejecuta 60 por segundo
//delay(75);
if (gamestate == 0) { // Si estamos en juego, se hará todo lo siguiente
background(50);
// Establecemos el inicio del juego
textSize(50);
fill(#938D16);
text ("Este es el Inicio del juego ", 70, 200);
textSize(30);
fill(#AF2525);
text ("Pulsar Click para empezar", 200, 250);
if (mousePressed == true) gamestate = 1;
}
if (gamestate == 1) { // Si estamos en juego
// Establecemos el fondo del juego
imageMode(CORNER);
image(juego, 0, 0);
textSize(50);
fill(#938D16);
text ("Este es el fondo del juego ", 70, 200);
textSize(30);
fill(#AF2525);
text ("Pulsar F para finalizar", 200, 250);
if (key == 'f') {
gamestate = 2;
}
}
if (gamestate == 2) { // Si estamos en el Fin del juego
// Establecemos el fondo del final
background(200);
imageMode(CORNER);
textSize(50);
fill(#938D16);
text ("Game Over ", 240, 200);
textSize(30);
fill(#AF2525);
text ("Pulsar I para reiniciar", 220, 250);
line (pmouseX, pmouseY, mouseX, mouseY);
if (key == 'i') gamestate = 0 ;
}
}
Fondo en paralaje (parallax)
El desplazamiento de paralaje es una técnica en gráficos por computadora, en la que las imágenes de fondo pasan por la cámara más lentamente que las imágenes de primer plano, creando una ilusión de profundidad en una escena 2D de distancia.
Aunque parezca una tendencia muy actual (y de hecho lo es en el mundo del diseño web), el Parallax es en realidad un truco con mucha historia, inventado por Disney para dotar a sus películas de dibujos animados de una ligera tridimensionalidad, intentando lograr con ello un mayor realismo. El invento se bautizó como «cámara multiplano» y más tarde se adaptó al mundo de los videjuegos en 2D.
Motus dice ¿Has hablado contigo mismo para resolver esta actividad?
No, no eres rara ni raro. Es muy frecuente que cuando estamos trabajando hablemos en silencio con nosotros mismos. Es una forma de comprender mejor lo que hacemos y de buscar soluciones a las tareas o actividades.
De hecho, te aconsejo que lo hagas con mucha frecuencia porque te ayudará a:
Recordar algunos pasos que necesites para realizar la actividad.
Hacerte preguntas para entender mejor la información.
Animarte a terminar la actividad, mantenerte concentrado…
