I want this button and panel show only in a specific case; it works fine until the mouse goes in the area where the button is located. In that case, the background of the button appear, and remain on screen.
I did try to use disabled and interactable, and in both case, when I set it to false, the button frame is displayed, which is not what I want.
This is the code that I am using; this works perfectly, until I move the mouse and the pointer enter in the area where the button is; then the outer image of the button appear, and stay on screen. How do I disable this? I want the button and image to stay hidden unless I tell it otherwise.
Set interactable to false and set the alpha for the disabled color to 0, so it will be totally transparent and not visible, even when you hover with the mouse on it.
OK, a better solution is to have the parent of the Button use a CanvasGroup, then set the Alpha to 0 to hide it or 1 to activate it. You can also set whether child objects are “interactable”.
If your parent object is the camvas, then create an empty UI GO on the canvas and pace the button within it. (also read up on CanvasGroups in the manual)
I did try that; but I have many buttons that does not fall into a specific category; which translate in 20-30 canvas to turn on and off individually. Same thing that I would do for a button in the end; but I believe there is an overhead for each canvas that you create…not sure, I need to check.
Considering the time spent to set up a ton of canvas, each with one button; I find much faster to change one single parameter on the alpha of the disabled button; but the approach that you suggest is pretty good too.