Disable buttons under UI Image

Hello,

I have a children's learning game in the works and I've hit a problem. basically there is a screen with 26 buttons, one for each letter of the alphabet. when they click the letter, it pops up an image matching that letter (E.G when A is pressed, a picture pops up saying A is for Apple then auto deactivates after 2 seconds)

The issue is when clicking one letter button, the image appears but you can still click other letters underneath. I want the buttons to disable when the image is up and enable after the image deactivates. Im not sure how to go about this though. This is the script I'm using:

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4.  
5. public class letteropener : MonoBehaviour
6. {
7.  
8.     public GameObject Panel;
9.  
10.     public void OpenPanel()
11.     {
12.         if(Panel != null)
13.         {
14.             Panel.SetActive(true);
15.         }
16.     }
17.  
18.     public void DeactivateMe()
19.     {
20.         StartCoroutine(RemoveAfterSeconds(2));
21.     }
22.  
23.     IEnumerator RemoveAfterSeconds(int seconds)
24.     {
25.         yield return new WaitForSeconds(seconds);
26.         Panel.SetActive(false);
27.     }
28. }

Thanks,

 

Code (CSharp):

1. // The UGUI namespace needed
2. using UnityEngine.UI;
3.  
4. // A field that we use to define the button via the Inspector
5. [SerializeField]
6. private Button button;
7.  
8. // This can be called to enable interactions with the button
9. public void EnableButton()
10. {
11.     button.interactable = true;
12. }
13.  
14. // This can be called to disable interactions with the button
15. public void DisableButton()
16. {
17.     button.interactable = false;
18. }

 

thank you for your answer. How would this work with the 26 buttons at once and how will this disable and enable it to work with the coroutine?

 

Make a list or an array of buttons and iterate through them with a for loop. Here's the Unity tutorial on loops if you are unfamiliar.

Also, in general, you've probably noticed that how you position elements in the hierarchy has an impact on the way UI elements are rendered. It also has an impact on how elements react to input.

Say you have an image that renders on top of all your buttons. If your image component has "Raycast Target" ticked, it means that it will intercept input. While you can do fancy stuff with this, it also means that ticking this box will prevent raycasts from hitting everything that's rendered behind it.

This, in my opinion, isn't good practice since the functionality of your GUI will rely on the position of the image. If you were to move it away from the buttons it is blocking, everything would break. However, for prototyping, if you understand how it works, it's pretty handy.