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
0
Question by DigitalKnifeInteractive · Aug 27, 2014 at 03:01 PM · uiimagelerpfade4.6

[4.6 UI] Image fading - How to?

I want to make the FadePanel image to fade from 0 to 128, but its not really working :/

     using UnityEngine;
     using System.Collections;
     using UnityEngine.UI;
     
     public class PanelTransition : MonoBehaviour {
         public Image FadePanel;
 
         void Update ()
         {
            FadePanel.color.a = Mathf.Lerp(0,128,Time.time);
         }
     }
     
     

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 GluedBrain · Sep 22, 2014 at 09:43 AM 0
Share

In case anyone wants to avoid scripting and achieve this using the built in animation system to achieve this effect, check out the link below

Add Fade Between Scenes

2 Replies

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

Answer by carrollh · Dec 30, 2014 at 03:59 AM

So, the answer above links to a solution from 2012. The author wants to know how you do it in the new 4.6 GUI library, which is only recently available. Take a look at UI.Graphic.CrossFadeAlpha found here.

Say you have a UI.Text object named text, and you want it to fade out over the next half second:

 text.CrossFadeAlpha(0, .5f, false);

I hope this helps someone else. Sorry, I don't understand what the false (ignore timestamp) does. The docs page for it is missing.

Comment
Add comment · 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 Lohrion · Jan 10, 2015 at 09:36 PM 0
Share

This should be the correct answer, because it is exactly what is asked for - the 4.6 way (and the more robust one) for doing this.

avatar image CodeAssembler · Feb 17, 2015 at 09:39 PM 0
Share

I'll vote this one up since I like the solution a lot and like carrollh says is the newer UI system. However I understand the original (accepted answer) was correct too, since the new UI requirement was not specified at the original question text ? (even tough it has the tag for 4.6 and the include can be seen is still a valid method at 4.6 too, a manual but still valid method)

Edit: Also note that there's even yet another method that I can think of, if you do add a CanvasGroup element to the parent panel you can access its alpha value directly too and in turn it will also fade all its child contents for your automatically. Like this for example that fades alpha from current alpha value to 1:

 public CanvasGroup myParentPanel;
 
 
 public IEnumerator PlayerTurn (float aTime)
 {
      float alpha = myParentPanel.alpha;
      for (float t = 0.0f; t < 1.0f; t += Time.deltaTime / aTime)
      {
          myParentPanel.alpha = $$anonymous$$athf.Lerp(alpha,1,t);
          yield return null;
      }
 
      yield return null;
 }


Thanks for both answers!

avatar image carrollh · Apr 08, 2015 at 04:33 PM 0
Share

@CodeAssembler If we're going to go that route, you can still use CrossFadeAlpha(). You can probably still put it in a coroutine, and it doesn't require explicit lerping :) Just put this script on your GUI Canvas:

 Graphic[] graphics = GetComponentsInChildren<Graphic>();
 
 for (int i = 0; i < graphics.Length; i++)
 {
     graphics[i].CrossFadeAlpha(0, .5f, false);
 }


For what it's worth I like your version better because you're not iterating over every GUI element. But I can also understand a person's desire to not use $$anonymous$$athf.Lerp ever. So I'm including this for those folks...

avatar image
1

Answer by jokim · Aug 27, 2014 at 03:25 PM

Found an answer Here

Basically, stay away from Time.time. that value is equal to the number of seconds that passed since you started the program.

There's 2 options available to achieve what you want. either you use an incrementing value (that goes from 0 to 1 over time) instead of Time.time. Something like :

 float timer = 0;
 void Update()
 {
     timer += Time.deltaTime;
     FadePanel.color.a = Mathf.Lerp(0,128,timer);
 }

Or, you use a different "from value" every frame... your "current value" actually. like so :

 void Update()
 {
     FadePanel.color.a = Mathf.Lerp(FadePanel.color.a,128,Time.deltaTime);
 }

The effects are slightly different, The first one will be more linear, as for the second one, it will be more "quadratic"... it depends on which you prefer.

Comment
Add comment · 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 DigitalKnifeInteractive · Aug 28, 2014 at 10:16 AM 1
Share

Thanks, I used: :)

 FadePanel.color = Color.Lerp(FadePanel.color, new Color(0,0,0,0.75f), Time.deltaTime*2);

avatar image Moikle · Oct 28, 2014 at 11:15 PM 0
Share

I get an error from the same code that was posted here

error CS1612: Cannot modify a value type return value of `UnityEngine.UI.Graphic.color'. Consider storing the value in a temporary variable

avatar image robertbu · Oct 28, 2014 at 11:18 PM 0
Share

@$$anonymous$$oikle - you would use a temporary variable like this:

  Color c = FadePanel.color;
  c.a = $$anonymous$$athf.Lerp(FadePanel.color.a,0.5f,Time.deltaTime * speed);
  FadePanel.color = c;

I'm assuu$$anonymous$$g that FadePanel.color is of Color type not Color32. The r,g,b,a of the Color class goes from 0.0 to 1.0, not from 0 to 255.

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

Unity 5.2 Canvas.RenderOverlays serious fps hit 2 Answers

[4.6] How can I make children images not stretch with the parents? where to place anchors? 1 Answer

Unity 4.6 UI - Image Order 4 Answers

Fade in with CrossFadeAlpha 1 Answer

9 Sliced Image Is Bleeding Edges 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