• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
Question by eco_bach · Oct 02, 2014 at 05:40 PM · button

4 or 5 Making a button transparent

Did a search, how would you make an invisible button (child of a Canvas)?

I would like confirmation of the best solution.

Comment
Superboonie88
Fattie
mian_AUT

People who like this

1 Show 2
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Kiwasi · Oct 03, 2014 at 03:07 AM 0
Share

The 4.6 documentation is available online. Its also in the help menu.

http://docs.unity3d.com/460/Documentation/Manual/

http://docs.unity3d.com/460/Documentation/ScriptReference/index.html

avatar image Fattie · Aug 18, 2020 at 07:01 PM 0
Share

the correct answer: https://stackoverflow.com/a/36892803/294884

7 Replies

  • Sort: 
avatar image
Best Answer

Answer by SignalZak · Dec 11, 2014 at 03:42 AM

We ran into the same problem, how to provide a touchable, invisible area. We tried a fully-alpha'd image with no sprite attached, but you still get the overdraw (which is an issue on handhelds).

We tried implementing various UnityEngine.UI & EventSystem interfaces to see how the touch detection worked (and inheriting from various UI components) before settling on creating a Touchable component that inherits from Text (since Text detects touch outside of its rendered area and has no overdraw).

This script is called Touchable.cs Quite simply,

  1. make a Button in the normal way

  2. simply eliminate the "text" object which comes below a Button as standard

  3. simply delete the "Image" which comes on a Button as standard

  4. Simply drop this script, Touchable.cs, on to the button - you're done.

You now have a perfect invisible button. Also, say you have perhaps a compicated image or panel. You can drop an invisible button like this "inside" it, and just set the RectTransform to expand all ways. It then "makes that thing become" a perfect button. This is exactly how you can make any unusual or dynamic object in to a button.

 // Touchable component
 
 using UnityEngine;
 using UnityEngine.UI;
 
 public class Touchable : Text
 {
     protected override void Awake()
     {
         base.Awake();
     }
 }
 
 // Touchable_Editor component, to prevent treating the component as a Text object.
 
 using UnityEditor;
 
 [CustomEditor(typeof(Touchable))]
 public class Touchable_Editor : Editor
 {
     public override void OnInspectorGUI ()
     {
         // Do nothing
     }
 }

That's the whole script. There's only one script (there's no separate Editor script or anything like that.)

Comment
Fattie
Devil_Inside
dhawalbanker_g
C4nDiM4n
andywolff
jaXx171
HarleyFuagras
mian_AUT
Endahs

People who like this

9 Show 6 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image SignalZak · Jan 26, 2015 at 10:38 PM 0
Share

You should just be able to attach a Touchable to a Button, yeah? We did it for the Scroll Rect content.

avatar image $$anonymous$$ · Nov 09, 2016 at 10:51 PM 0
Share

i can't attach Touchable_Editor component to the button. it says "Script Needs To Derive From MonoBehaviour"!

does anybody know what to do to get rid of this error?

avatar image SignalZak $$anonymous$$ · Nov 09, 2016 at 11:24 PM 0
Share

You only attach the Touchable component to the button. You place the Touchable_Editor code into a separate .cs file in an Editor directory. The Touchable_Editor instructs the Unity Editor how to display Touchable in an Inspector tab.

See https://unity3d.com/learn/tutorials/topics/interface-essentials/building-custom-inspector.

avatar image HarleyFuagras · Jan 09, 2019 at 10:18 PM 1
Share

Can anyone explain what is the script doing? If Text detects touch outside the rendered area, is it not possible to achieve this adding a Text component to the button?

Also, is there a better way to achieve this now, in 2019?

avatar image llMarty HarleyFuagras · Mar 31, 2019 at 04:16 PM 0
Share

You could even use an empty Text component. Clearly this solution mis-uses the Text component to archive the result. And I have to second that I seek for a better solution now in 2019, like you. I cannot or don't want to believe that the team behind Unity still has not addressed this issue by simply providing a Touchable component by themselves.

avatar image RobAnthem · Mar 31, 2019 at 04:37 PM 0
Share

I have a better solution. Maybe better.

 public class ImagelessButton : MonoBehaviour
 {
     private RectTransform _transform;
     void Awake()
     {
         _transform = transform as RectTransform;
     }
     void Update()
     {
         if (Input.GetMouseButtonDown(0))
         {
             if (RectTransformUtility.RectangleContainsScreenPoint(_transform, Input.mousePosition))
             {
             }
         }
     }
 }
 

You could easily optimize it with a management system.

avatar image

Answer by _bcristian_ · Jan 23, 2015 at 04:58 PM

As already mentioned - DO NOT use transparent images or similar tricks. A fully transparent image still renders at exactly the same cost as a regular one, so it's a very bad idea.

Improving on the answer by SignalZak, there are 2 options. For both of them, use the EventTrigger component to handle events.

  • the lazy one, no coding required: Create a Text object with no text and set the rectangle to the desired size.

  • the proper one (just a few lines of code): Create a custom UI control, derived from UnityEngine.UI.Graphic, and override Raycast to always return true (testing against the rect bounds was done already), and also OnFillVBO to do nothing (the default implementation creates a white opaque quad to fill the rectangle).

       public class Touchable : Graphic
         {
             public override bool Raycast(Vector2 sp, Camera eventCamera)
             {
                 //return base.Raycast(sp, eventCamera);
                 return true;
             }
     
             protected override void OnFillVBO(List<UIVertex> vbo)
             {
                 //base.OnFillVBO(vbo);
             }
         }
    
    
    
     [CustomEditor(typeof(Touchable))]
         public class TouchableEditor : Editor
         {
             public override void OnInspectorGUI()
             {
                 // nothing
             }
         }
    
    
Comment
green-coder
SignalZak
m4c0
segafreak1999
Superboonie88
PlutDem
madd
Fattie
karl_jones
awmcclain
v01pe_

People who like this

9 Show 4 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image darcyrayner · Nov 22, 2015 at 11:56 PM 0
Share

For Unity 5.2 and up, change OnFillVBO(List vbo) to OnPopulateMesh (Mesh toFill) . OnFillVBO was deprecated.

avatar image Fattie · Apr 04, 2016 at 12:46 AM 0
Share

While admirable, this is not correct. You would have to continually re-program this for different versions of Unity (it does not work as of writing). SignalZak has explained the best and correct approach, which fortunately will always work forever.

avatar image awmcclain · Aug 22, 2018 at 06:11 PM 0
Share

I actually think this is much cleaner than overloading what it means to be "Text".

To get this to work (as of 2018.1), use this:

    protected override void OnPopulateMesh(VertexHelper vh)
         {
             // We don't want to draw anything
             vh.Clear();
         }
avatar image AzurySimon · Aug 23, 2019 at 10:23 AM 0
Share

It's better to implement 'ICanvasRaycastFilter' instead of overriding 'Raycast' and return true in the 'IsRaycastLocationValid' method. This way the Touchable works with CanvasGroups' blocksRaycast setting. Not sure which Unity Version this was introduced though.

avatar image

Answer by Rcocuzzo8 · Apr 27, 2016 at 01:31 PM

The answers above are close, but not working because the button DOES NOT WORK once you delete or take out the invisible button.

Steps to having a WORKING invisible button:

  1. Create the button as a UI Button

  2. Delete the Text property that the button has assigned to it

  3. Go to the Button's "Image (Script)", change the sprite to UIMask. UIMask is used as a placeholder to hide elements but they will still be there

I hope this helps sum things up.

Comment
Fattie
Metalhog
Sylker
PluralDev
raiapplication
connorpopiel
magique
Xyrer
Zimbwawa

People who like this

7 Show 3 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Metalhog · Jan 26, 2017 at 02:36 AM 0
Share

This solution worked for me. And seems like the easiest solution.

avatar image Sylker · Jan 23, 2019 at 02:31 PM 0
Share

This solution here is so underestimated. Simple and efficient. Thanks.

avatar image llMarty · Mar 31, 2019 at 04:20 PM 0
Share

Will this not cost due to the draw call? Or is there no draw call at all?

avatar image

Answer by greg-harding · Apr 04, 2016 at 12:32 AM

Updated @bcristian 's Touchable for Unity 5.3+

 // Touchable.cs
 using UnityEngine;
 
 namespace UnityEngine.UI {
 
     public class Touchable : Graphic {
         
         public override bool Raycast(Vector2 sp, Camera eventCamera) {
             return true;
         }
 
         protected override void OnPopulateMesh(VertexHelper vh) {
             vh.Clear();
         }
     }
 }
 
 
 // TouchableEditor.cs
 using UnityEngine;
 using UnityEditor;
 
 namespace UnityEngine.UI {
 
     [CustomEditor(typeof(Touchable))]
     public class TouchableEditor : Editor {
 
         public override void OnInspectorGUI() {}
     }
 }
 
Comment
richardlord
QuantumCalzone

People who like this

2 Show 4 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Fattie · Apr 04, 2016 at 12:49 AM 0
Share

again, this actually only partially works.

Indeed, you'd have to totally rewrite .... all of "Text" from top to bottom, looking insidethe whole engine if you wanted to take this approach. signalZak's answer is definitely the way to go.

avatar image greg-harding Fattie · Apr 04, 2016 at 12:56 AM 1
Share

API's change - it's currently working for Unity 5.3+. If you need support for older versions of Unity then use/add in the earlier code for the deprecated api. Also, the Text api could change too which would break the other solution. Use whatever works :)

avatar image Fattie greg-harding · Apr 04, 2016 at 01:07 AM 0
Share

No. The Text call will always work, because it's the fundamental element one is replacing in a Unity Button structure.

"Use whatever works" no, we should use the correct solution - and note that happily it's much easier!

Since you're substituting out Unity's Text function from the structure in question, you override it (removing what you don't want, i.e. the lettering).

There are a number of specific reasons to not use the "write your own Touchable" approach (not least of which it has a raycast)

avatar image _bcristian_ · Apr 04, 2016 at 05:31 AM 0
Share

Haven't touched (sic) that code in ages, except for the updates with the API changes. @Fattie, when you say that it only partially works, what do you say it doesn't do? And it doesn't do any raycasting, BTW.

avatar image

Answer by Kiwasi · Oct 02, 2014 at 06:32 PM

Simply attach a button component to an empty GameObject

Rendering transparent items is expensive. If the button is to be invisible do away with the image component altogether.

Remember, UI elements are just GameObjects. GameObjects are defined by the attached components. You can combine components in any way you like to produce the behaviour you are after. There is nothing forcing you to stick with the defaults from the Create->UI menu, and in many cases sticking to the default is a bad idea.

Comment
karl_jones

People who like this

1 Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Superrodan · Oct 07, 2014 at 10:12 PM 0
Share

I have tried this solution myself, but am not able to get the new button scripts to work without an image script also attached.

When I remove the image script the button ceases to function entirely. The only way I have found that works is to have an image with no sprite set to complete transparency.

  • 1
  • 2
  • ›

Unity Answers is in Read-Only mode

Unity Answers content will be migrated to a new Community platform and we are aiming to launch a public beta by June 9. Please note, Unity Answers is now in read-only so we can prepare for the final data migration.

For more information and updates, please read our full announcement thread in the Unity Forum.

Follow this Question

Answers Answers and Comments

22 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Detect which local player clicked a button 0 Answers

Hide GUI Text when button is pressed 1 Answer

Image texture not visible when loaded in script, and button placement wrt image 0 Answers

GUI.Depth text input/button issues 1 Answer

UI button not working 1 Answer


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges