Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 13 Next capture
2021 2022 2023
1 capture
13 Jun 22 - 13 Jun 22
sparklines
Close Help
  • 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
3
Question by PeteWisniewski · Apr 22, 2015 at 04:15 PM · unity 5buttonimagetransparency

How to Change transparency of button image in Unity 5.0?

Hi, I would like to change the transparency of button image from the script (written in C#). What is the best way to do it?

Comment
Add comment
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

3 Replies

· Add your reply
  • Sort: 
avatar image
9

Answer by Okido · Apr 22, 2015 at 04:46 PM

Select your Canvas (or a child object of it if you like), in the inspector click Add Component > Layout > Canvas Group.

The Canvas Group component has an alpha property (1 is completely opaque, 0 is completely transparent), which affects this object and any children of it.

In your script, you can store the Canvas Group as a variable with something like this:

 CanvasGroup yourNameHere = GetComponent<CanvasGroup>();     //(assuming the script is attached to the same game object as the Canvas Group)
 
 yourNameHere.alpha = 0;

Edit: If you want to fade it out, you can make this Coroutine and call it whenever you need:

 IEnumerator Fade (){
     while(yourNameHere.alpha > 0){                   //use "< 1" when fading in
        yourNameHere.alpha -= Time.deltaTime/1;    //fades out over 1 second. change to += to fade in    
        yield return null;
     }
  }
Comment
Add comment · Show 2 · 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 Evershifting · Aug 30, 2015 at 01:15 PM 0
Share

Well, some n00bish question) why do you put "/1" in "yourNameHere.alpha -= Time.deltaTime/1;"?

avatar image Okido · Aug 30, 2015 at 10:50 PM 0
Share

The 1 is for the duration of the fade, and the Time.deltaTime makes the fade duration take place in seconds rather than frames. You can read a bit more about it in the Unity API (they multiply in their example, though dividing has been working for me too :))

http://docs.unity3d.com/ScriptReference/Time-deltaTime.html

avatar image
5

Answer by DiegoSLTS · Aug 30, 2015 at 04:46 PM

You don't need to add a Canvas Group component to change the alpha of a single image, Canvas Group changes the alpha of the game object with the component and any child on it.

If you have an UI Image you can change the alpha of it by changing the alpha component of the color of that Image.

Just write a script to store a reference of the Image of the UI Button, then in the script change the alpha. Something like this:

 public Image ButtonBackground;
 
 public SetTransparency(float transparency) { //transparency is a value in the [0,1] range
     Color color = ButtonBackground.color;
     color.a = transparency;
     ButtonBackground.color = color;
 }
Comment
Add comment · 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 Kossuranta · Dec 01, 2016 at 07:08 AM 1
Share

Button also has Text as a child and if you only change alpha of the image, text will stay visible. Because of this I think that Canvas Group is better solution.

avatar image
2

Answer by EDevJogos · Jun 29, 2016 at 05:28 PM

You can create an extension, so that you can use anywhere on your code:

 public static class Extensions
 {
      public static void SetTransparency(this UnityEngine.UI.Image p_image, float p_transparency)
      {
          if (p_image != null)
          {
              UnityEngine.Color __alpha = p_image.color;
              __alpha.a = p_transparency;
              p_image.color = __alpha;
          }
      }
  }
 

Then you can just call this from anywhere:

 button.GetComponent<Image>().SetTransparency(float value);
Comment
Add comment · 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 meer59 · Dec 01, 2016 at 06:13 AM 0
Share

Can we use coroutine while using extension to fade? If do how? Thanks alot

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

6 People are following this question.

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

Related Questions

initiate Imagebuttons in loop 1 Answer

Clickable button area is offset 0 Answers

how do i make my button's source image bigger without changing the button hover/clickable area? 0 Answers

Image in Button is cut (New UI) 2 Answers

how to instantiate images ui in different position randomly 0 Answers


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