0 Favourites

How do I make a toggle button

  • 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!

    [attachment=0:11kqna2p][/attachment:11kqna2p]

  • 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.

  • 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

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • 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."

    [attachment=0:233avn7m][/attachment:233avn7m]

  • 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.

  • 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.

  • opacity to 0... Invisible is better as draw is skipped

    + Button: On clicked
        + Grid: Is Visible  -> Grid: Set Invisible
        + Else              -> Grid: Set Visible[/code:3b90y1lx]
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)
Similar Topics Posts Views Last Post
Unread hot topic
167 14,518
DMT2005's avatar
DMT2005
Unread sticky
1 Favourites
C2 Games made with CocoonIO
136 89,844
minhcuong's avatar
minhcuong
Unread hot topic
99 10,159
karshinkoff's avatar
karshinkoff