How to make button image change with on click anywhere on screen? - unity3d

Question

I am very new to Unity and I have trouble understanding on click possibilities with my UI buttons etc.. In my project, I have a button which changes its image whenever I click on it and the way I made it is: I created this script:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
[RequireComponent(typeof(Button))]
public class OnClickScript : MonoBehaviour
{
public static int spritenumber=1;
public Button mybutton;
public Sprite square;
public Sprite circle;
public Sprite triangle;
public int counter = 1;
void Start()
{
mybutton = GetComponent<Button>();
}
public void changeButton()
{
if (PAUSESCRIPTE.isPaused == false)
{
counter++;
if (counter == 1)
{
mybutton.image.overrideSprite = square;
spritenumber = 1;
soundmanagerscript.PlaySound("buttonpress");
}
if (counter == 2)
{
mybutton.image.overrideSprite = circle;
spritenumber = 2;
soundmanagerscript.PlaySound("buttonpress");
}
if (counter == 3)
{
mybutton.image.overrideSprite = triangle;
spritenumber = 3;
counter = counter - 3;
soundmanagerscript.PlaySound("buttonpress");
}
}
}
}
I attached this script to my button, selected sprites which I want to use and I added on On Click() function to the button.
Afterwards I decided that I no longer want to change the sprite of my button by clicking on the button itself but rather by clicking anywhere on the screen. I tried using Input.GetMouseButtonDown(0) but got no results since I used it incorrectly. Any help on, how to achieve what I want, is very welcome. Thanks in advance.

Answer 1

Here's how I'd do it:
using UnityEngine.UI;
using UnityEngine;
public class ButtonScript : MonoBehaviour
{
// Public objects
public Sprite[] sprites;
//Private objects/variables
private Image buttonImage;
private int spriteIndex;
void Start()
{
buttonImage = GetComponent<Image>(); // Get the image component of your button
spriteIndex = 0; // Set the index to 0
buttonImage.sprite = sprites[spriteIndex]; // Set the image to the first image in your sprite array
}
void Update()
{
if (Input.GetMouseButtonDown(0))
{
spriteIndex++; // Increment the index
if (spriteIndex > sprites.Length - 1) // Ensure that you stay within the array size
{
spriteIndex = 0;
}
buttonImage.sprite = sprites[spriteIndex]; // Set the image
}
}
}
However, you need to change the image settings to:
Image Type: simple
Use Sprite Mesh: true
(maybe) Preserve aspect: true

Answer 2

As an answer to your comment above, I will suggest you to have a button in the background and your pause button above. Then, replace your Update() method with an event OnClick() as you did before.
Your pause button will catch the left click and your background button will not.
Be sure to tick Interactable in the Button component.
Then you can safly remove the Image component of your background button, if you don't need it.
What it means is you can create (or modify) a class for your pause button
using UnityEngine.EventSystems;
public class PauseButton : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
public bool IsMouseOver = false;
public void OnPointerEnter(PointerEventData eventData)
{
IsMouseOver = true;
}
public void OnPointerExit(PointerEventData eventData)
{
IsMouseOver = false;
}
// --
// Your OnClick method
// --
}
Note: the using eventSystems.
Now you can use this bool value within a code like amengelbrecht send you.
I'll will copy and paste his code from his answer, and add the bool value based on the previous class above.
public class BackgroundButtonScript : MonoBehaviour
{
// Public objects
public Sprite[] sprites;
public PauseButton pauseButton;
//Private variables
private Image buttonImage;
private int spriteIndex;
private void Start()
{
buttonImage = GetComponent<Image>(); // Get the image component of your button
spriteIndex = 0; // Set the index to 0
buttonImage.sprite = sprites[spriteIndex]; // Set the image to the first image in your sprite array
}
private void Update()
{
if (Input.GetMouseButtonDown(0) && !pauseButton.IsMouseOver)
{
spriteIndex++; // Increment the index
if (spriteIndex > sprites.Length - 1) // Ensure that you stay within the array size
{
spriteIndex = 0;
}
buttonImage.sprite = sprites[spriteIndex]; // Set the image
}
}
}
This will allow you to click anywhere on your screen except if the mouse is over your pause button. In this case, OnClick from the pause button will be called.
Be careful
If your game is is pause and the user left click anywhere but the pause button, depends on how your pause works, the Update() method of BackgroundButtonScript will be called and can lead to if (Input.GetMouseButtonDown(0) && !pauseButton.IsMouseOver).