Contenido principal
Programación de computadoras
Cambios de escena controlados con botones
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(15, 10, 50, 25);
fill(255, 255, 255);
textSize(16);
text("SIGUIENTE", 19, 29);
};Ahora, ¿dónde deberíamos llamarla? Hay muchos lugares potenciales, todas las veces que queramos estar seguros de que el botón se dibuje encima:
- Cuando el programa carga por primera vez, después de que llamamos
drawScene1() - Dentro de
mouseClicked(), después de dibujar cada escena - Dentro de
mouseDragged(), después de dibujar un nuevo bebé - Dentro de
draw(), después de volver a dibujar la escena animada
Como una regla general, solamente queremos llamar funciones tan seguido como sea necesario y no más que eso. De lo contrario, ¡solo estamos desperdiciando la energía de nuestra computadora!
Sabemos que tenemos que llamarla en
draw(), porque de lo contrario desaparecerá mientras el baterista está tocando. Recuerda que el método draw() se llama constantemente, más seguido que todos los demás métodos. Eso significa que solo podemos llamarla desde draw(), y eso también debería encargarse de todos los demás casos. ¡Inténtalo tú mismo! Si sientes que lo necesitas en algún otro lado, siempre puedes pegar otra llamada en tu código.
draw = function() {
if (currentScene === 4) {
drawScene4();
}
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 del botón en Introducción a JS, necesitamos una condición
if para revisar mouseX y mouseY. Todas estas cosas necesitan ser verdaderas:- ¿
mouseXes mayor que la posición x del lado izquierdo delrect? - ¿
mouseXes menor que la posición x del lado derecho delrect? - ¿
mouseYes mayor que la posición y del lado superior delrect? - ¿
mouseYes menor que la posición y del lado inferior delrect?
Usamos
&& para revisar que las cuatro condiciones sean verdaderas, y si es así, continuamos a la siguiente escena:mouseClicked = function() {
if (mouseX >= 15 && mouseX <= 65 &&
mouseY >= 10 && mouseY <= 45) {
...
}
};¡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 >= 15 && mouseX <= 65 &&
mouseY >= 10 && 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:
¿Quieres unirte a la conversación?
excelente,me encanta,me gusta mas programar en javascript que etiquetar en HTML.Siento como mi cerebro trabaja.(6 votos)
Exactamente, se siente más didáctico y creo que hay más oportunidades nuevas de programación(1 voto)
cómo me gusta programar en javascript(2 votos)- Concuerdo, a mi me encantan todos estos lenguajes de programación, sin embargo prefiero el HTML, además siento que trabajo más en dicho lenguaje en comparación a JS .(1 voto)
Me gustaría que al presionar un botón me saliese una escena y presionando otro botón me saliese otra escena pero no se como hacerlo! alguien me podría ayudar?
gracias.(2 votos)- Puedes usar el condicional "if" dentro de la función mouseClicked. Solo tienes que especificar las coordenadas de los botones y luego que va a hacer cada uno. Osea si aprietas botón 1 que se muestra la escena inicial, o si se presiona el botón 2, que salga la escena final.(5 votos)
Tengo problemas al intentar agregar una interacción con el mouse (donde puedo agregar tambores al dar click) en la escena animada, porque la escena se llama dentro de la función draw, y los tambores se borran inmediatamente cuando la escena se vuelve a dibujar. ¿Alguien sabe como hacerlo?(1 voto)
Mi eterno gradeciiento a Kan Academy y a Los profesores como Pamela Fox. Cuando descubrí esta página hace como 6 años y que se podía programar dbujos juegos y animaciones en Javascript. jamas pensé que aprendería tanto. Volví aquí cada año...Y siempre me desafío a contibuar aprendiendo...porque realmente me costó mucho esfuerzo los niveles avazados de programacion, pero me apasiona y desde niño queria aprender a programar juegos. desgraciadamente en esa època eran pocas las familias que podían comprar computadoras o pagar cursos de computación a sus hijos. pero tarde o temprano uno logra aprender.-la programación orientada a objetos, las animaciones y las funciones se me hacían muy difíciles de aprender, al igual que los If.- Pero poco a poco voy aprendiendo todo lo que antes no podía hacer. Así que los aliento a no desanimarse y a continuar siempre el curso. Cuando te atascas, dejas unos meses y luego repasas todos los cursos y ejercicios anteriores. o tratas de aprender otros lenguajes o en otras plataformas...hasta que vuelves con mas superpoderes y logras pasar los desafíos. - es muy bueno tambien toda la gente que colabora posteando preguntas, ayudando a otros y posteando desafíos resueltos. (a veces la única forma de seguir adelante es copiar un desafío resuelto y analizarlo a fondo.) - recomiendo tambien ver todos los derivados que hacen otros alumnos y hacer copias y remixes. analizar, remiar y reutilizar código que hicieron otros es una gran fuente de conocimientos. Y sobre todo, usar la creatividad y la tecnología inversa, reutilizar código, etc. - creo que este año lograré terminar todos los cursos de programación de KA...solo me falta terminar algunos ejercicios de éste curso y la mitad de él de visualizaciones. (que es bastante complejo...) pero voy a lograrlo. Los espero, en sus comentarios y en los otros ejercicios y cursos. gracias a todos. Es un sitio genial. mis dificultades para aprender estan por fin teminando. tal vez no llegue a ser un genio de la programación, pero hasta aquí he aprendido mucho mas de lo que esperaba. y todo gratis y muy bien explicado, a pesr que hay ciertos contenidos difíciles, pero desafiarse es la única forma de superarse. Ahora que son super heroes de la programación...usen sus superpoderes para salvar el mundo!(1 voto)