Main content
Button-controlled scene changes
We've gotten away so far with just having the user click anywhere at all in order to change scenes. But we've realized there's a drawback to that approach: we can't use clicks within scenes for any sort of additional interaction. The way that many games and apps solve that is by adding specific UI elements, like menus and buttons, and only navigating scenes upon interaction with a specific UI element. Let's add a button in the top right to control the scenes in our program.
What is a "button"? It's two things really: 1) the visual indicator that an area is clickable and 2) the logic that makes that area respond to clicks. Let's start with the visual indicator, a
rect()
with some text()
, and wrap it in a function, in case we want to call it multiple times:var drawButton = function() {
fill(81, 166, 31);
rect(15, 10, 50, 25);
fill(255, 255, 255);
textSize(16);
text("NEXT", 19, 29);
};
Now where should we call it? There are a lot of potential places -- all the times when we want to make sure the button gets drawn on top:
- When the program first loads, after we call
drawScene1()
- Inside
mouseClicked()
, after we draw each scene - Inside
mouseDragged()
, after we draw a new baby - Inside
draw()
, after we re-draw the animated scene
As a general rule, we want to call functions only as often as actually necessary, and no more than that. Otherwise, we're just wasting our computer's energy!
We know that we need to call it in
draw()
, because otherwise it'll disappear while the drummer is drumming. Remember that the draw()
method is called constantly, more often than all of the other methods. That means that we can call it only from draw()
, and that should take care of all the other cases as well. Try it out for yourself! If you feel like you need it anywhere else, you can always stick another call in your code.
draw = function() {
if (currentScene === 4) {
drawScene4();
}
drawButton();
};
Woo! Now we've got a button in every scene, all the time. Check it out:
But, haha, you know what's hilarious? The button does nothing! I mean, the user might think it does something, if they decide to click only that area. But in fact, they could click anywhere, and it'd do the same thing. We need to change our
mouseClicked
logic so that we check the button location before we decide it's scene-a-changing time.Like we did in the button challenges in Intro to JS, we need to come up with an
if
condition to check mouseX
and mouseY
. All these things need to be true:- Is
mouseX
greater than the x position of the left side of therect
? - Is
mouseX
less than the x position of the right side of therect
? - Is
mouseY
greater than the y position of the top side of therect
? - Is
mouseY
less than the y position of the bottom side of therect
?
We use
&&
to check that all four conditions are true, and if so, we go to the next scene:mouseClicked = function() {
if (mouseX >= 15 && mouseX <= 65 &&
mouseY >= 10 && mouseY <= 45) {
...
}
};
That's it! With that check, we now have a program where the user clicks a particular area of the screen to move to the next scene. Try out clicking the button and non-button parts:
Now that we have a way of knowing when a click is meant for changing scenes, we can use clicks for other interactions in our scenes, as long as they're not clicking on the button. That means we can let the user add the Winston babies on click instead of drag, like we originally wanted. We'll just add an else to our if, and move the code from
mouseDragged
into that else:mouseClicked = function() {
if (mouseX >= 15 && mouseX <= 65 &&
mouseY >= 10 && mouseY <= 45) {
...
} else {
if (currentScene === 5) {
image(getImage("creatures/BabyWinston"),
mouseX-20, mouseY-20);
}
}
};
Note that we need to keep the check for current scene, to make sure it only happens for that scene. But now, it's easy for us to add click interaction on any other scene too. What else could you let the user add? Drums? Facial hair? Play around with the program below:
Want to join the conversation?
- How would one implement a back button to all 'scenes' besides the first one? I'm trying to figure this out for things I would like to do. Can someone help me through this?(14 votes)
- You'd just do everything backwards. So, right now:
makes it so that if you click on the button you move up one scene . All you'd have to do to make it go down one is:mouseClicked = function() {
if (mouseX >= 15 && mouseX <= 65 &&
mouseY >= 10 && 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();
}mouseClicked = function() {
if (mouseX >= 15 && mouseX <= 65 &&
mouseY >= 10 && mouseY <= 45) {
if (currentScene === 1) {
//nothing
} else if (currentScene === 2) {
drawScene1();
} else if (currentScene === 3) {
drawScene2();
} else if (currentScene === 4) {
drawScene3();
} else if (currentScene === 5) {
drawScene4();
}(17 votes)
- How would I make it so that when the mouse clicks the button, it will get slightly darker? I know she taught us at some point, but I forgot when.(13 votes)
- You could have an if clause in the button draw code that checks if the mouseIsPressed.(6 votes)
- Isn't programming kind of the same thing as coding?(4 votes)
- Programming is one kind of coding.
Coding is writing any kind of information in a specific form.
In programming, that information is the instructions for the computer.(13 votes)
- how do you make a scene that automatically changes scene ever 0.04 seconds(3 votes)
- try this:
var time = 0;
draw = function() {
time ++
if(time > 10){
scene ++;
time = 0;
}
};
This isn't changing every 0.04 seconds but you get the idea.(15 votes)
- I have two things to say. (1) The sun is way big, but it is also way far away from the earth. It is about 92.96 million miles away, and the moon is 238,900 miles away, so the sun is about the same size as the sun when you see a solar eclipse. (2) I'm am trying to make a video game and it is not coming out the way I want it to come out. Can someone help me?(2 votes)
- I can't figure out why my mouseClicked function is'nt working.
Can someone help me pls?
Here is the code
var CurrentScene;
var Scene = 0, Text = [
"he\n\nmpossible\n\nrack",
"Use the arrow keys or buttons to move the car"
];
noStroke();
var b = function() {
background(255, 0, 0);
fill(0, 0, 255);
triangle(0, 0, width, 0, 0, height);
fill(0, 255, 0);
triangle(159900, width*width, 0, 0, height, 0);
fill(255, 255, 0);
triangle(400, width, 200, 400/2, height, 0);
};
b();
var Scene1 = function() {
CurrentScene = 1;
fill(0, 0, 0);
textSize(50);
text(Text[Scene], 150, 100);
rect(130, 26, 10, 75);
rect(100, 26, 75, 10);
rect(75, 206, 75, 10);
rect(107, 141, 10, 75);
rect(75, 140, 75, 10);
rect(130, 259, 10, 75);
rect(100, 259, 75, 10);
rect(100, 100, 105, 5);
rect(75, 216, 300, 5);
rect(100, 331, 150, 5);
};
var Scene2 = function() {
CurrentScene = 2;
fill(0, 0, 0);
textSize(35);
text(Text[Scene], 20, 20);
text("elp", 200, 50);
rect(191, 0, 5, 50);
rect(156, 22, 40, 5);
rect(153, 0, 5, 50);
rect(150, 50, 95, 5);
};
var b1 = function() {
fill(0, 0, 0);
rect(215, 125, 85, 35);
fill(255, 255, 255);
textSize(20);
text("Play", 235, 148);
};
var b2 = function() {
fill(0, 0, 0);
rect(250, 250, 85, 35);
fill(255, 255, 255);
textSize(20);
text("Help", 270, 274);
};
mouseClicked = function() {
if(mouseX > 215 && mouseY < 85 && mouseX < 125 && mouseY > 35) {
if (CurrentScene === 1) {
Scene2();
}
}
b1();
};
b1();(1 vote)- I know of no number that is greater and 215 and less than 125.(6 votes)
- how do you add a draw function in this code?(2 votes)
- There is a function assigned to
draw
on lines 89-94.(4 votes)
- its the same thing over and over again(3 votes)
- How do I get rid of the stroke on the button without changing any other lines? In the drawButton function I'm doing noStroke(); and that gets rid of the buttons stroke. But it also gets rid of the drummer Winstons body. How do I fix this?(1 vote)
- You can always wrap your special stylizations in
pushStyle
andpopStyle
.pushStyle();
noStroke();
draw the buttons
popStyle();(3 votes)
- How can I make it so if I have a button that I only want to display in one scene I can make it so?(2 votes)
- Yes, with conditionals.
if (scene === ”somescene”) {
// do this
)
The same conditional in the mouseClicked() function where you check the buttons.
Or you could have a scene property in your button object that checks if it is active or not.(1 vote)