¶ Toggle Parts of Layouts
Sometimes it's good to have the choice! Maybe some of your users don't like constantly hearing Rick Astley as menu music or want a different cute anime girl as menu background.
Well, that's no problem! You can make it so your users can toggle on/off parts of your layouts or cycle through multiple versions of said parts.
¶ Toggle On/Off
To toggle, for example, the visibility of an element by clicking a button, you just need to use a variable that gets set on button click and the element you want to toggle needs to check in its loading requirements if said variable has the correct value.
¶ The Variable
The first thing is creating the variable you will use to store the visibility state of the element you want to toggle.
To add a new variable, navigate to the Customization tab in the menu bar and click on Variables -> Manage Variables, then add a new variable with a unique name! Make sure to use a really unique name that isn't used already.
After creating the variable, set its value to true.
¶ The Element
The next step is to add the element you want to toggle on/off.
Now right-click the element and click on Loading Requirements.
This will open the Manage Requirements screen. Click on Add Requirement.
Search for the Is Variable Value requirement, select it and click on Edit Requirement Value.
Now input the name of the variable you created earlier and let the requirement check for true as value.
That's it for that part. Now your element will be visible when the variable's value is true.
¶ The Button
Now we need to add a new Button element.
After adding, right-click it and click on Edit Action Script.
This will open the button's Manage Action Script screen.
Click on Add IF Statement, add the Is Variable Value requirement to it and set the requirement's mode to OPPOSITE.
Now click on Edit Requirement Value, just like you did with the element before and just input the exact same variable name and value to check for.
Because we set the requirement mode to OPPOSITE, it will now check if the variable value is NOT true, which is exactly what we want.
Back in the Edit Action Script screen you will now see the IF statement we just added.
Now click on Add Action, search for the Set Variable Value action, select it and then click on Edit Action Value.
As action value, input your variable name first and the value you want to set it to after. Separate name and value by :.
In this case we want to set our value to true, because this action later gets executed when the value is NOT true.
Now append the action to the IF statement by grabbing and moving it over the IF statement, so it only gets executed when our variable's value is NOT true.
After doing that, select the IF statement and then click on Append ELSE Statement.
Now add another Set Variable Value action, but instead of setting the variable value to true, set it to false.
Now append the second action to the ELSE statement, so it gets executed if the variable value IS true.
And that's it! Feels like lots of steps the first time, but it's actually a pretty easy and quick thing to do once you got used to it.
Now you can save your layout, leave the editor and press the button to see if it works!
Feel free to use the same variable for other elements, so you toggle multiple elements at once by pressing the button.
You can even toggle whole layouts by using the Layout-Wide Loading Requirements. To configure layout-wide requirements, right-click the editor background. Just make sure to add the button to another layout, not the one you want to toggle.
¶ Cycle Through
Other than toggling between two values, cycling through values needs the action script to be able to cycle between more than two values.
The action script logic is really similar to the one used for toggling, so I will keep it really short here. Make sure to also read the part about toggling.
I added 3 images. The first image is visible when the variable value is 1, the second one if the value is 2 and the third one if the value is 3.
After that I added the cycle button and made it cycle the variable value from 1 to 2 to 3 to 1.
And that's it. Now save the layout, leave the editor and check if the cycle button is working correctly.