Contenido principal
Escenas interactivas
Ahora que sabemos cómo hacer escenas animadas lindas, vamos a asegurarnos de que podamos manejar los otros tipos de escenas no estáticas: escenas que responden a la interacción del usuario. Por ejemplo, queremos dibujar una escena donde Winston tenga bebés (después de su fase de estrella de rock, por supuesto). Pero también queremos permitir que el usuario haga clic para darle a Winston MÁS bebés. Porque siempre podemos tener más pequeños Winstonitos en el mundo, ¿cierto?
He aquí cómo se vería esa escena como un programa independiente. El programa dibuja la parte estática de la escena y luego, en
mouseClicked, dibuja imágenes de bebés Winston en el punto donde se hizo clic, en una capa encima de lo que ya esté dibujado.¿Cómo integraríamos eso en nuestro programa de escenas múltiples? Bueno, empezaríamos por incluir todo el código de dibujo estático en la función de dibujar escenas
drawScene5(), y agregar la lógica del cambio de escenas a mouseClicked:var drawScene5 = function() {
currentScene = 5;
background(173, 239, 255);
fill(7, 14, 145);
textSize(39);
text("¡Winston tiene bebés!", 10, 47);
...
};
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();
}
};He aquí cómo se ve eso:
¿Pero cómo integramos la funcionalidad de
mouseClicked? Ya definimos un mouseClicked en nuestro código, y no podemos definirlo dos veces. En JavaScript, la última definición de la función "gana": reemplaza cualquier definición anterior. Eso significa que tenemos que encontrar un buen lugar para poner esa línea que dibuje bebés dentro de nuestro mouseClicked existente. Consideremos algunas opciones:1. Podríamos poner la línea al inicio de la función:
mouseClicked = function() {
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
...
};Entonces será llamada CADA vez que el usuario haga clic con el ratón, incluso si no es la escena de hacer bebés (y sería extraño si un bebé Winston tuviera un bebé). No está bien.
2. Podríamos poner la línea dentro del bloque if
currentScene === 4:mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene5();
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
} else if (currentScene === 5) {
drawScene1();
}
};Después de todo, ahí es donde llamamos a
drawScene5(), y los bebés deberían ser añadidos a la escena 5. Pero piénsalo: eso significaría que siempre dibujaríamos un bebé adicional, cada vez que dibujamos la escena. También significaría que nunca dibujaríamos más bebés, porque currentScene se haría igual a 5 y el código en ese bloque if no se ejecutaría otra vez.3. Podríamos poner la línea dentro del bloque if
currentScene === 5: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) {
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
drawScene1();
}
};Eso significaría que no dibujaríamos bebés hasta el primer clic después del dibujo inicial de la escena. Pero, como puedes ver en la línea después de esto, el bebé sería instantáneamente sustituido con la escena 1.
Aquí es donde nos damos cuenta de una falla fatal en nuestra idea de integrar esta escena de clic-bebés en nuestras escenas: estamos usando exactamente la misma interacción (un clic del ratón en cualquier lugar de la pantalla) tanto para cambiar escenas como para interactuar con la escena. Ahora tenemos un problema en las manos, y debemos considerar opciones más radicales para integrar la escena.
4. Podríamos detener redibujar la escena 1 al final, y decirle al usuario que reinicie en ese caso. Seguro, eso funcionaría, pero eso depende de que nuestra pantalla controlada por clics esté en la última escena. ¿Qué tal si quisiéramos una escena anterior controlada por clic? Esa solución fallaría.
5. Podríamos usar otro tipo de interacción, como
mouseDragged. Eso funcionará, porque arrastrar no causa un evento de clic. Aún debemos revisar que currentScene === 5, para asegurarnos de que al arrastrar no se dibujen bebés en cualquier otra escena:mouseDragged = function() {
if (currentScene === 5) {
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
}
};Pruébalo a continuación, asegurándote de arrastrar en la escena final:
Entonces, eso funciona más o menos, aunque estoy un poco preocupado acerca de con cuántos bebés puede acabar Winston. Por lo general, esta no es una solución óptima, pues significa que tenemos que limitarnos a diseñar escenas que no respondan a los clics del ratón. No queremos tener esa restricción, debe haber una mejor manera.
¿Qué tal si en lugar de eso, diferenciamos los clics del ratón por ubicación, de manera que un clic en un lugar significaría cambiar escenas y clics en otro lugar pudieran ser usados para la interacción dentro de la escena? Tú sabes, ¡como un botón! De hecho, así es como la mayoría de los programas de escenas múltiples abordan este problema, y nosotros hablaremos de ello a continuación.
¿Quieres unirte a la conversación?
esta todo en castellano,excelente explicacion y como abordar problemas con la programacion.(8 votos)
excelente,me encanta,me gusta mas programar en javascript que etiquetar en HTML.Siento como mi cerebro trabaja.(6 votos)
Tras la actualización el texto está en inglés, pero antes en castellano, espero que lo solucionen pronto(2 votos)
lol la verdad es que si me gusta(2 votos)
no entendí bien este tema es bastante complicado(2 votos)
Porque no simplemente se usa un botón para cambiar de escenas?(2 votos)