- Home /
Unity UI How to make Multiple Clickable Next / Back Buttons?
Hi, I'm looking for buttons that can be clickable multiple times.
For example; 1. click on next button: runs script A 2. click on same next button: runs script B 3. click on same next button : runs script C
Here's my code, but it only works with next button. I also need to multiple clickable back button on this code.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class NextBackButton: MonoBehaviour
{
public apPortrait portrait;
private int currentOption = 0;
[SerializeField] private Button previousButton;
[SerializeField] private Button nextButton;
public void RunCode0()
{
//Do something
}
public void RunCode1()
{
//Do something
}
public void RunCode2()
{
//Do something
}
public void RunCode3()
{
//Do something
}
private void Start()
{
// set the initial text of the button
//setButtonText(currentOption);
// add an event listener to look out for button clicks
nextButton.onClick.AddListener(myButtonClick);
}
public void myButtonClick()
{
switch (currentOption)
{
case 0:
// run stuff for option 1
RunCode0();
// change the current option for the next click
currentOption = 1;
// change the text on the button to be the next option
//setButtonText(currentOption);
break;
case 1:
Debug.Log("Doing option 2 things");
RunCode1();
// change the current option for the next click
if(nextButton.interactable)
{
currentOption = 2;
}
else if(previousButton.interactable)
{
currentOption = 0;
}
//setButtonText(currentOption);
break;
case 2:
Debug.Log("Doing option 3 things");
RunCode2();
// change the current option for the next click
if (nextButton.interactable)
{
currentOption = 3;
}
else if (previousButton.interactable)
{
currentOption = 1;
}
//setButtonText(currentOption);
break;
case 3:
Debug.Log("Doing option 4 things");
RunCode3();
// change the current option for the next click
if (nextButton.interactable)
{
currentOption = 4;
}
else if (previousButton.interactable)
{
currentOption = 2;
}
//setButtonText(currentOption);
break;
}
}
void setButtonText(string buttonText)
{
nextButton.transform.GetChild(0).GetComponent<Text>().text = buttonText;
}
}
Source: https://answers.unity.com/questions/1759036/how-to-use-button-multiple-times.html
Answer by Hellium · Dec 21, 2020 at 01:21 AM
What some terrible code... Here is a complete rework I can suggest you. It involves more classes, but is way more extensible and manageable that what you have right now.
CODE NOT TESTED
NextBackButton.cs
using System.Collections;
using UnityEngine;
using UnityEngine.UI;
public class NextBackButton: MonoBehaviour
{
[SerializeField] private Button previousButton;
[SerializeField] private Button nextButton;
[SerializeField] private Text previousButtonLabel;
[SerializeField] private Text nextButtonLabel;
private int currentOption = 0;
private ButtonListener[] listeners = new ButtonListener[]
{
new Foo(), new Bar(), new Baz("hello world")
};
private void Start()
{
SetListeners(0);
previousButton.onClick.AddListener(() => SetListeners(currentOption - 1));
nextButton.onClick.AddListener(() => SetListeners(currentOption + 1));
}
void SetListeners(int index)
{
listeners[currentOption].RemoveAsListener();
listeners[(currentOption - 1 + listeners.Length) % listeners.Length].RemoveAsListener();
currentOption = (index + listeners.Length) % listeners.Length;
previousButton.interactable = currentOption > 0;
if (previousButton.interactable)
{
listeners[(currentOption - 1 + listeners.Length) % listeners.Length].AddAsListener(previousButton);
listeners[( currentOption - 1 + listeners.Length ) % listeners.Length].SetLabel(previousButtonLabel);
}
else
{
previousButtonLabel.text = "";
}
nextButton.interactable = currentOption < listeners.Length - 1;
if (nextButton.interactable)
{
listeners[currentOption].AddAsListener(nextButton);
listeners[currentOption].SetLabel(nextButtonLabel);
}
else
{
nextButtonLabel.text = "";
}
}
}
ButtonListener.cs
public abstract class ButtonListener
{
protected Button button;
public abstract void SetLabel(Text text);
public virtual void AddAsListener(Button button)
{
this.button = button;
button.onClick.AddListener(PerformAction);
}
public virtual void RemoveAsListener()
{
if(button == null) return;
button.onClick.RemoveListener(PerformAction);
}
protected abstract void PerformAction();
}
Foo.cs = your RunCode0 function
public class Foo : ButtonListener
{
public override void SetLabel(Text text)
{
text.text = "Foo";
}
protected override void PerformAction()
{
Debug.Log("Hey, I'm foo!");
}
}
Bar.cs = your RunCode1 function
public class Bar : ButtonListener
{
private int selectedCount = 0;
public override void SetLabel(Text text)
{
text.text = "Bar";
}
public override void AddAsListener(Button button)
{
base.AddAsListener(button);
Debug.Log("Listener added"); // Just for the sake of the example, you don't need the function
}
protected override void PerformAction()
{
selectedCount++;
Debug.Log("This option has been clicked " + selectedCount + " times");
}
}
Baz.cs = your RunCode2 function
public class Baz : ButtonListener
{
private string input;
public Baz(string input)
{
this.input = input;
}
public override void SetLabel(Text text)
{
text.text = input;
}
protected override void PerformAction()
{
Debug.Log(input);
}
}
Hello, thanks for the code. I tested it and next button works fine but it's unlimited. Does not stop when it's come to end. And previous button works a bit, then gives error.
Answer by CmdrZin · Dec 21, 2020 at 12:43 AM
Change your myButtonClick() to myButtonClick(int n). When in the On Click() for the Button, when you pick NextBackButton > myButtonClick you'll see it request an int value. Set this to 1 for your forwards button and to -1 for your back button and use it to adjust a counter.
Use the counter in myButtonClick to keep track of thing and test the count so that it doesn't go below 0 or greater than 3.
Hello, thanks for your suggestion. I tried something like this but it gives error that "n does not exist in the current context"
You don't need to use AddListener. LInk to myButtonClick in the Inspector using the OnClick () box.
Answer by DryreL · Dec 21, 2020 at 11:50 AM
Finally, this works. Here's my code;
NextBackButton.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class NextBackButton: MonoBehaviour
{
[Range(0, 3)] public int currentOption = 0;
[SerializeField] private Button previousButton;
[SerializeField] private Button nextButton;
private void Start()
{
// set the initial text of the button
//setButtonText(currentOption);
// add an event listener to look out for button clicks
previousButton.onClick.AddListener(() => myButtonClick(currentOption--));
nextButton.onClick.AddListener(() => myButtonClick(currentOption++));
}
private void Update()
{
// Minimum Value
if (currentOption < 0)
{
currentOption = 0;
}
// Maximum Value
if (currentOption > 3)
{
currentOption = 3;
}
}
public void myButtonClick(int optionValue)
{
switch (currentOption)
{
case 0:
// run stuff for option 1
RunCode0();
// change the text on the button to be the next option
optionValue++;
//setButtonText(currentOption);
break;
case 1:
Debug.Log("Doing option 2 things");
RunCode1();
// change the text on the button to be the next option
optionValue++;
//setButtonText(currentOption);
break;
case 2:
Debug.Log("Doing option 3 things");
RunCode2();
// change the text on the button to be the next option
optionValue++;
//setButtonText(currentOption);
break;
case 3:
Debug.Log("Doing option 4 things");
RunCode3();
// change the text on the button to be the next option
optionValue++;
//setButtonText(currentOption);
break;
}
}
void setButtonText(string buttonText)
{
previousButton.transform.GetChild(0).GetComponent<Text>().text = buttonText;
nextButton.transform.GetChild(0).GetComponent<Text>().text = buttonText;
}
public void RunCode0()
{
//Do something
}
public void RunCode1()
{
//Do something
}
public void RunCode2()
{
//Do something
}
public void RunCode3()
{
//Do something
}
}
Your answer
Follow this Question
Related Questions
Please help with playing music for button click 2 Answers
How to control an AudioSource with an AudioClip? 2 Answers
Draw with GL by script 0 Answers
Texture2d Array with Next Button 1 Answer
How to display exact video by index, property on button click 0 Answers