Ryan Ryan - 27 days ago 6
C# Question

How to make an invisible transparent button work?

Looking at some of the answers in the Unity forums and Q&A site, the answers for how to make an invisible button do not work because taking away the image affiliated with the button makes it not work.

How do you get around this and keep the invisible property while allowing the button to actually work?

Answer

This is one of those weird things about Unity - 100% of real-world projects need this, but they just forgot to do it.

For anyone who can't be bothered reading, here's a short version of Touchable.cs to copy-paste, which you need in every Unity project:

// file Touchable.cs

using UnityEngine;
using UnityEngine.UI;
#if UNITY_EDITOR
using UnityEditor;
[CustomEditor(typeof(Touchable))]
public class Touchable_Editor : Editor
     { public override void OnInspectorGUI(){} }
#endif
public class Touchable:Text
     { protected override void Awake() { base.Awake();} }
  1. Use unity's 'Create Button' function

  2. That function gives you a Text component and Image component as a convenience. Delete them both.

  3. Drop this script Touchable.cs on the Button

  4. You are done. It cannot "decay" with Unity upgrades.

As a bonus, "buttonize" ANYTHING in .UI by dropping Touchable on it.


Short technical explanation:

In short, Unity forgot to, or chose not to, have a "touchable" concept in the OO chain for things like images that are, well, "touchable".

Essentially, this means us developers have to (one way or another) make our own Touchable class for Unity - which is a classic "backfilling" OO situation.

When "backfilling" the overall issue is that it must be perfectly auto-maintaining. Fortunately there seems to be one good solution, which is what everyone now uses.


Long-winded explanation:

Quite simply, when you click to add a "Button" in Unity, it gives you by default both an Image and a Text with the Button. The reason Unity did this is that Unity is made to be used by 8 year olds ;-)

In any real-world project you instantly delete the Image and Text and "do it yourself". And you often/always need a transparent button.

Button of course does nothing unless it has a component which is touchable attached. However: Unity did not make a touchable concept in the OO chain: they chose to not abstract-out that quality from touchable things.

However, you need a "Touchable" concept in every Unity project, for transparent buttons and many other uses.

So just, keep Touchable.cs in all your Unity projects. Click to create a button using the Editor convenience function, but delete the childish "Text" and "Image" components. Drop Touchable.cs on to the button. VoilĂ , the button is now an actual (transparent) button that works.

If you're a badass, feel free to experiment with different ways to create a Touchable.cs (perhaps starting with :Graphic), but this ingenious approach, which everyone now uses, seems to be best. Historic credit: it's unclear but I believe Unity forum user "signalZak" was the first to think this out.

If it really matters to you (or perhaps if your team has inexperienced members), make an editor function called "Create actually useful button" which just gives you a Button + Touchable.cs, versus Unity's default "create Button" function. (You almost always set Transition and Navigation off, so, you may want to do that as well for tidyness and convenience.)

That's it.

So a "grown-up" button in Unity looks like this:

enter image description here

You have Unity's Button (which is a magnificent piece of engineering, per se) and you have Touchable.

Extremely helpful tip...

An interesting point is, with buttons very often you want them underneath the actual UI elements. Example - you have a complex panel system that expands and has small separate parts. Amazingly, just drop one of our "better buttons" underneath the final elements after you do all the layout work.

Just set the Button+Touchable to expands to fill the parent - so easy.

enter image description here

In the image there, the things like "resume" and "quit" could be ridiculously complicated anythings .. weirdly sizing panels; things that may or may not be there at different times; dynamic content; frickin' animations; actual mere "sizer" objects that bring up something on an different camera: whatever.

In all cases, you merely drop a "real" unity button (ie, Button+Touchable, as in the image above), you just drop that underneath the "complicated thing" and you have a spectacularly reliable button.

This has a number of major advantages. Apart from anything else you can for example easily make the actual finger-working button a bit bigger than the graphical element (as you often do with small buttons), and so on.

In many situations it's tremendously clearer if you simply think of a button as something you "drop on top of" anything at all, and hence "buttonize" that thing. You do just that with "Button+Touchable" buttons as in the top image. Cheers