Hasta ahora hemos podido cambiar escenas al hacer que el usuario haga clic en cualquier lado. Pero nos hemos percatado que hay una desventaja con ese enfoque: no podemos usar clics dentro de las escenas para cualquier otro tipo de interacción adicional. La forma en que muchos juegos y aplicaciones resuelven eso es agregando elementos específicos en la interfaz de usuario, como menús y botones, y únicamente navegar por las escenas al interactuar con un elemento específico de esa interfaz. Vamos a agregar un botón en la parte superior derecha para controlar las escenas en nuestro programa.
¿Qué es un "botón"? Son dos cosas en realidad: 1) el indicador visual de que se puede hacer clic en un área, y 2) la lógica que hace que esa área responda a los clics. Empecemos con el indicador visual, un rect() con algún text() y vamos a incluirlo en una función, en caso de que queramos usarlo varias veces:
var drawButton = function() {
    fill(81, 166, 31);
    rect(340, 10, 50, 25);
    fill(255, 255, 255);
    textSize(16);
    text("SIGUIENTE", 344, 29);
};
Ahora, ¿dónde deberíamos invocarlo? Definitivamente tenemos que hacerlo cuando dibujamos la primera escena, de manera que se pueda llegar a la siguiente escena:
drawScene1();
drawButton();
También tenemos que mostrarlo en cada escena posterior. Podríamos invocarlo desde dentro de la función que dibuja a cada escena, pero hay una manera más sencilla: solo pégalo al final de nuestra función mouseClicked, para asegurarnos de que se llame después de dibujar cada escena:
mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene4();
    }  else if (currentScene === 4) {
        drawScene5();
    } else if (currentScene === 5) {
        drawScene1();
    }
    drawButton();
};
Ok, te mentí, no es así de sencillo. Con el código anterior, veríamos el botón en cada escena excepto una. ¿Puedes descubrir cuál? Te daré unos segundos... ¡deja de leer esto! ¿Estás pensando en ello? Ok, ok, es la escena animada. Eso es porque el código dentro de draw() dibujará la escena 4 inmediatamente encima del botón, así que también tenemos que agregarlo al final de esa función:
draw = function() {
    if (currentScene === 4) {
        drawScene4();
    }
    drawButton();
};
Y por si acaso algún individuo emprendedor decide arrastrar bebés encima del botón, también la colocamos al final de mouseDragged:
mouseDragged = function() {
    if (currentScene === 5) {
        image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
    }
    drawButton();
};
Woo! Ahora tenemos un botón en cada escena, todo el tiempo. Echa un vistazo:
Pero, jaja, ¿sabes qué es chistoso? ¡El botón no hace nada! Es decir, el usuario puede pensar que hace algo, si decide hacer clic solo en esa zona. Pero de hecho, podría hacer clic en cualquier lugar y haría lo mismo. Tenemos que cambiar nuestra lógica de mouseClicked para revisar la ubicación del botón antes de decidir que es momento de cambiar de escena.
Como lo hicimos en los desafíos de botones en la Introducción a JS, tenemos que idear un condicional if para revisar mouseX y mouseY. Normalmente, eso significa combinar cuatro condiciones con el operador &&, que revisen que mouseX sea mayor que el lado izquierdo, mouseX sea menor que el lado derecho, mouseY sea mayor que el borde superior, y mouseY sea menor que el borde inferior. Pero nuestro botón está en la esquina superior derecha, y quiero darle al usuario un poco de espacio de maniobra de todos modos, así que vamos a simplificar y solo revisar dos condiciones: ¿es mouseX mayor que el lado izquierdo? y ¿es mouseY menor que el borde inferior?
mouseClicked = function() {
    if (mouseX >= 340 && mouseY <= 45) {
        if (currentScene === 1) {
            drawScene2();
        } else if (currentScene === 2) {
            drawScene3();
        } else if (currentScene === 3) {
            drawScene4();
        }  else if (currentScene === 4) {
            drawScene5();
        } else if (currentScene === 5) {
            drawScene1();
        }
        drawButton();
    }
};
¡Eso es todo! Con ese chequeo, ahora tenemos un programa donde el usuario hace clic en un área particular de la pantalla para pasar a la siguiente escena. Prueba hacer clic en las partes con y sin botón:
Ahora que tenemos una manera de saber cuándo un clic es para cambiar las escenas, podemos usar clics para otras interacciones en nuestras escenas, siempre y cuando no sea un clic en el botón. Eso significa que podemos permitirle al usuario agregar bebés de Winston al hacer clic en vez de al arrastrar, como queríamos originalmente. Solo agregaremos un else a nuestro if, y moveremos el código de mouseDragged dentro de ese else:
mouseClicked = function() {
    if (mouseX >= 340 && mouseY <= 45) {
        ...
    } else {
        if (currentScene === 5) {
            image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
        }
    }
};
Observa que necesitamos mantener el chequeo de la escena actual para asegurarnos de que solo suceda para esa escena. Pero ahora también nos es fácil agregar la interacción de clic en cualquier otra escena. ¿Qué otra cosa podrías permitir que el usuario agregara? ¿Tambores? ¿Vello facial? Juega con el programa a continuación:
Cargando