Transcript for:
How to Create a Toggle Button in Roblox

so to create a button which you can toggle on and off firstly we'll create the screen GUI and I'm just going to insert a text button and I'm going to drag it over here now the purpose of this button is that you'll be able to toggle it on and off and so we'll store the value of that button and depending on whether it's on or off you can make some action occur such as turning a light on or off but for the purpose of this video we'll just be storing the value you can do whatever you like with that value you could change the um visibility of a UI or you could like I say turn a light on or you could teleport a player you could do all sorts of things so we're going to by default want to have this button set to off so we're going to set the text to be off and I'm going to insert a local script inside this text button now whenever this text button is clicked so script. parent Mouse button one click connect to a function we want to change the onoff toggle value so we'll store this as an attribute now you could store this as a variable but because we might want to access the value from another script we're going to set it as an attribute so I'm going to go to the Explorer and I don't know what happened there let's just head back there we go let's go to the Explorer and let's scroll down to the attributes down here and I'm going to click on the click on the plus if I can get my words out and we're going to name this um toggle I'm going to call it toggle and it's going to be a Boolean so I'll click on Save and then we will inside this function we will say script. parent set attributes toggle and we're going to set that to the opposite of what it currently is so let's just get the current value by saying script. parent get attribute toggle like so and we want to get the inverse of it so we can say not script. parent get attribute toggle and that's going to set the attribute to the opposite of what it currently is so that is toggling it we now need to update the text of the button so we can say script. parent. text equals and then we can get the value the attribute and if it's true then we can say on or off like this okay so we'll just put this into brackets to make it a little easier to read so if this is true then it will return and otherwise it will return off and that's it really one other thing you can do is you can have this line at the beginning of your script outside of the event and if you don't set the text manually yourself it it will update it for you so let's click on the play button and see what happens here so you can see it's pre-loaded the off text because I just removed it and if I click the button the toggle is now on and I can toggle on off on off and if you have a look at our toggle button just going to search for it in the Explorer we scroll down you can see the attribute down here is changing between on and off checked and unchecked so that's how you make the toggle button how do you then do some kind of action so for example turning a light on let's just imagine we have this part which is our light okay and what I'm going to do is I'm going to create a function which will turn the light on so we'll just call it toggle light and we'll take the value true or false as to whether to turn it on or not and then we can say game. workspace do light do color equals toggle so if the toggle is true we will give it a brick color of new yellow which is yellow or we will just give it a brick color of um medium Stone gray which I believe is the default gray color for a new part so this function will toggle the color of our light part so we can just then call this function and pass the new value okay so the new value will have been set up here so we're just getting that new value and passing it to our function and then you can do anything really all you need to do is just to check to see if the toggle value is true now I'm using a shortened way um of setting the brick color here because I'm using this toggle and value or value which means if it's true then return this value otherwise if it's any other value such as false return this value which is exactly the same as just saying if toggle then else you know you get the idea it's just condensing it all into one line but let's go ahead and just try this out what we what you might also want to do is call toggle light outside of the event just like I've done here with the text because of course the value could be set to on when the game starts and you'll want to toggle that that light to make sure it is turned on when the game starts to retain its current value so we'll click on play one more time and hopefully our light should be in perfect working order so I'm going to click on button and the part becomes illuminated and we can turn it off and on and on and off off and it all seems to be working and again you can do anything you like here if you wanted to you could set the time of day to toggle and 12:00 or nighttime I think this is how you set the time of day I haven't used it for ages so we'll just hope for the best yes okay so it is it's night I click on the the button it's now daytime okay so that is how you create a toggle button in Roblox now all of this code has been client side of course you might want to have buttons which execute some code on the server all you'd have to do is use a remote event and pass the new toggle value okay or you might want to store that toggle value on the server and change it on the server it's up to you anyway that is it for this video on how to make a toggle button I hope you enjoyed it if you did please leave a like don't forget to subscribe let me know if you have any other videos you'd like me to see and I'll catch you in the next one thanks for watching