How do I make a toggle button

Get help using Construct 2

Post » Sun Mar 16, 2014 3:14 am

I have a Grid sprite with opacity of 0. I have a GridButton that when clicked makes the Grid opacity to 100, thus showing the Grid. My Grid and GridButton do not have any variables.
How do I make this same button a toggle, so that if it is clicked again, the Grid opacity then goes back to 0? Thank you!

grid.png
You do not have the required permissions to view the files attached to this post.
B
7
S
2
Posts: 34
Reputation: 670

Post » Sun Mar 16, 2014 3:53 am

I do it like this, create a global variable call opacityToggle, it holds one of two values, it is either on or off (or maybe 1 or 0). On your grid button give it two frames of animation (set animation speed to 0). Everything then works off the variable. If oppacityToggle is "on" then set the animation frame for the button to on. If oppacityToggle is "off" set the Gridbutton animation frame to 2 (off). Make sure frame one is your On image of the button, and frame 2 is your off animation for the button (I am assuming here that the button is a sprite with the on touch/on click behavior). You then have an event that says if opacityToggle = "On" Set opacity to 100, Else Set opacity to 0 (or whatever it should be.

Basically you use the variable to track if the opacity is on or off and everything else uses that.
B
49
S
12
G
10
Posts: 1,833
Reputation: 14,573

Post » Sun Mar 16, 2014 5:21 am

Make an instance boolean variable named "opa" in your "Grid" sprite.

GridButton on clicked > Toggle "opa"
Is opa O & Trigger Once > Set Grid opacity to 100
Is opa X & Trigger Once > Set Grid opacity to 0
B
23
S
8
G
1
Posts: 172
Reputation: 2,780

Post » Sun Mar 16, 2014 5:45 pm

shaircast wrote:Make an instance boolean variable named "opa" in your "Grid" sprite.

GridButton on clicked > Toggle "opa"
Is opa O & Trigger Once > Set Grid opacity to 100
Is opa X & Trigger Once > Set Grid opacity to 0


Thank you. That worked for me. I am attaching an image so other users who may need help can see how to code it. My boolean variable is named "Helper."

grid2.png
You do not have the required permissions to view the files attached to this post.
B
7
S
2
Posts: 34
Reputation: 670

Post » Sun Mar 16, 2014 5:46 pm

BluePhaze wrote:I do it like this, create a global variable call opacityToggle, it holds one of two values, it is either on or off (or maybe 1 or 0). On your grid button give it two frames of animation (set animation speed to 0). Everything then works off the variable. If oppacityToggle is "on" then set the animation frame for the button to on. If oppacityToggle is "off" set the Gridbutton animation frame to 2 (off). Make sure frame one is your On image of the button, and frame 2 is your off animation for the button (I am assuming here that the button is a sprite with the on touch/on click behavior). You then have an event that says if opacityToggle = "On" Set opacity to 100, Else Set opacity to 0 (or whatever it should be.

Basically you use the variable to track if the opacity is on or off and everything else uses that.


Thank you for your help. This is a good way to do it with animation.
B
7
S
2
Posts: 34
Reputation: 670

Post » Mon Mar 17, 2014 12:05 am

Even with the method you used you can still set the animation frame of your button as well. If Is Helper > Button Frame = 1. If Not (X) is Helper > Button Frame = 2. This way you can give a visual indicator of what the current setting is.
B
49
S
12
G
10
Posts: 1,833
Reputation: 14,573

Post » Mon Mar 17, 2014 3:28 am

opacity to 0... Invisible is better as draw is skipped
Code: Select all
+ Button: On clicked
    + Grid: Is Visible  -> Grid: Set Invisible
    + Else              -> Grid: Set Visible
B
66
S
22
G
14
Posts: 1,484
Reputation: 16,511


Return to How do I....?

Who is online

Users browsing this forum: Cubus32, tarek2 and 8 guests