Swapping Sprites on a Button using an Array

Hello!

What is the easiest way for me to create buttons that swap Sprites based on whether they are clicked on or rolled over with the mouse?
I have attached an image of 3 buttons that shows what I am trying to do.

I thought the best method would be to create an Array that holds the buttons (I have 3 buttons) and then referencing each variable Sprite like below.

Code (CSharp):

1. public Button[] buttons;
2.    
3.          public Sprite normal;
4.          public Sprite selected;
5.          public Sprite normalRollover;
6.          public Sprite selectedRollover;

And then I have OnClick() and PointerEnter() and PointerExit() Event Triggers attached to those buttons methods with a loops that swaps the Sprite Images for example like this:

Code (CSharp):

1. public void ButtonPressed(int buttonNum)
2. { // gets sent the int index of the button from the OnClick()
3.     for (int i = 0; i < buttons.Length; i++)
4.     { // loop through the array buttons
5.         if (i == buttonNum)
6.         { // this will be the button that you sent the index of
7.             buttons[i].GetComponent<Image>().sprite = selected;
8.         }
9.         else
10.         { // this is every other button
11.             buttons[i].GetComponent<Image>().sprite = normal;
12.         }
13.     }
14. }

I tried using bools and if statements but after multiple attempts I couldn't get this to work.
Any help or advice you could offer on how best to accomplish this would be really appreciated!

 

You should store the sprites in a sprite array, e.g.

Sprite[]

and then you could access each sprite by index, which would be determined by the int index of the button from the OnClick() event.

An example:

Code (CSharp):

1. public Sprite[] sprites; //Define the variables through the editor
2.  
3. public void ButtonPressed(int buttonNum)
4. {
5.        buttons[buttonNum].GetComponent<Image>().sprite = sprites[buttonNum];
6. }

"buttons" should be an array defined like so:

public Button[] buttons;

Also, make sure that each button actually has an image component on it. If it doesn't, then it won't change sprites because it can't.

But another question is why don't you handle all this from the OnClick()? From what you've shown, there's no reason it shouldn't. It would save time instead of subscribing to the ButtonPressed() event.

 

Hi Shreddedcoconut, thank you so much for your help!
I am trying out your method. Here is my code:

Code (CSharp):

1. public class GameManager : MonoBehaviour
2. {
3.     public Button[] buttons;
4.     public Sprite[] spriteArray;
5.  
6.     public void ButtonPressed(int buttonNum)
7.     {
8.         buttons[buttonNum].GetComponent<Image>().sprite = spriteArray[1];
9.         Debug.Log("Pressed");
10.     }
11.  
12.     public void ButtonOnPointerEnter(int buttonNum)
13.     {
14.         buttons[buttonNum].GetComponent<Image>().sprite = spriteArray[2];
15.         Debug.Log("Pointer Enter");
16.     }
17.  
18.     public void ButtonOnPointerExit(int buttonNum)
19.     {
20.         buttons[buttonNum].GetComponent<Image>().sprite = spriteArray[3];
21.         Debug.Log("Pointer Exit");
22.     }
23. }

I have referenced the above methods on my button's OnClick() and OnPointerEnter() and OnPointerExit() event triggers. (I have attached a screenshot called unity-buttonevents.jpg)

But this method doesn't work exactly.
When I click on a button to make it the "Selected" sprite the other 2 buttons should go back to the "Normal" sprite. Also when a button is showing the "Selected" sprite the rollover should be the "SelectedRollover" sprite.

I hope I am making sense, thank you!!

 

What is rollover supposed to be?

Iterate through the buttons array and change each sprite back to normal except the one which is located at the index specified by buttonNum, e.g.

Code (CSharp):

1. for (int i = 0; i < buttons.Length; i++)
2. {
3.       if (i != buttonNum)
4.       {
5.             //Reset the sprite
6.       }
7. }

..I put this together just now, it should work though. Or you can use some if-statements instead of a for-loop, this is just an example.

Another question is what is buttonNum? The screenshot shows that it's 0. Is it always 0? If it's always 0 then it will only effect the first button in the buttons array.