• Unity
  • Services
  • Made with Unity
  • Learn
  • 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
  • Forums
  • Answers
  • Feedback
  • Issue Tracker
  • Blog
  • Evangelists
  • User Groups

Navigation

  • Home
  • Unity
  • Industries
  • Made with Unity
  • Learn
  • Community
    • Forums
    • Answers
    • Feedback
    • Issue Tracker
    • Blog
    • Evangelists
    • User Groups
  • Get Unity
  • Asset Store

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
0
Question by Prehm · Jan 24 at 01:51 AM · c#

UI Image fading via button

Hey there. I'm completely new to programming, and i can't find the reason why this is not working. I am trying to fade in a UI Image on the press of a button. my script looks like this:

public class Fade : MonoBehaviour{

 public Image Image;
 public bool Fading;

 public void ToggleFade()
 {
     Fading = true;
 }

 void Start()
 {
     var tempColor = Image.color;
     tempColor.a = 0f; 
     Image.color = tempColor;
 }

 void Update()
 {
     if (Fading == true)
     {          
         Image.CrossFadeAlpha(1, 2.0f, false);
     }
 }

 

I have my Image referenced to Image, and the button is calling the function ToggleFade() on Click. The image is transparent when i hit play, but the button doesnt seem to do anything. Any help would be much appreciated! Thanks for taking a look :)

cheers

Comment
Add comment · Show 1
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 DCordoba · Jan 24 at 04:15 AM 0
Share

CrossFadeAlpha uses properties from the CanvasRenderer to make the fading effect, not the color properties of image...

basically u are "fading" your image from a method and "fading in" from other method... who can't reverse the previous effect

so on start change your way to setting the alpha to "transparent"

 void Start()
  { 
      Image.canvasRenderer.SetAlpha(0.01);
  }

or you can change (more clumsy) the way of make the "fade in" effect on update

 void Update()
  {
      if (Fading == true)
      {          
               var tempColor = Image.color;
               tempColor.a += Time.DeltaTime/2f; 
               if(1 < tempColor.a)
                               tempColor.a = 1; 
               Image.color = tempColor;
      }
  }

3 Replies

· Add your reply
  • Sort: 
avatar image
0
Best Answer

Answer by ranch000 · Jan 24 at 04:29 AM

In your Start() method. Do this instead:

Image.canvasRenderer.SetAlpha( 0.0f );

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 Prehm · Jan 24 at 01:41 PM 0
Share

simple as that. worked, thanks!

avatar image
0

Answer by Sabre-Runner · Jan 24 at 09:21 AM

I'm not sure I understand what you're doing here or what's wrong. But you can use my package as it works perfectly.

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 Prehm · Jan 24 at 01:54 PM 0
Share

thanks. but i have no idea how i would get this working <.<

avatar image
0

Answer by Gekoga · Jan 24 at 10:10 AM

Hi @Prehm, Instead of only trying to get the alpha and changing with CrossFadeAlpha, I got the color and used Color.Lerp, I hope this helps.

 public class FadeImage : MonoBehaviour
 {
     public Image image;         //The Image
     public bool fading;         //Bool if it should be fading
 
     private Color startLerp;    //The start color where the alpha is 0
     private Color endLerp;      //The end color with full alpha
 
     private float startTime;    //The time you've pressed the button
     private float t;
 
     public float speed;         //The speed with which you want to increase the alpha
 
     public void ToggleFade()
     {
         fading = true;
         startTime = Time.time;
     }
 
     //Set the start and end lerp
     public void Start()
     {
         endLerp = image.color;
         image.color = new Color(endLerp.r, endLerp.g, endLerp.b, 0.0f);
         startLerp = image.color;
 
     }
 
     //Lerp the color and turn off fading when you are at max alpha
     public void Update()
     {
         if (fading)
         {
             t = (Time.time - startTime) * speed;
             image.color = Color.Lerp(startLerp, endLerp, t);
 
             if (image.color == endLerp)
                 fading = false;
 
         }
     }
 }
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 Prehm · Jan 24 at 01:49 PM 0
Share

thanks! i tried it, worked well, only that the image kept flashing in everytime i hit the button, which was not what i wanted in this case :) good to read through other peoples thoughts though, maybe ill get a basic idea of how to think when writing code that way someday^^'

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.

Welcome to Unity Answers

The best place to ask and answer questions about development with Unity.

To help users navigate the site we have posted a site navigation guide.

If you are a new user to Unity Answers, check out our FAQ for more information.

Make sure to check out our Knowledge Base for commonly asked Unity questions.

If you are a moderator, see our Moderator Guidelines page.

We are making improvements to UA, see the list of changes.



Follow this Question

Answers Answers and Comments

593 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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

Multiple Cars not working 1 Answer

Distribute terrain in zones 3 Answers

Initialising List array for use in a custom Editor 1 Answer

Flip over an object (smooth transition) 3 Answers

Illuminating a 3D object's edges OnMouseOver (script in c#)? 1 Answer

  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges