Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Make FadeIn function for both text and image

Discussion in 'Scripting' started by MakerDavid, Feb 27, 2017.

  1. MakerDavid

    MakerDavid

    Joined:
    Feb 5, 2016
    Posts:
    19
    So I am trying to make a fadein component that I can attach to both both a text, and an image, and then let them fade in. Or attach it to another object, get the image and text, and then fade them in. Preferably using as much as the same code for both as possible, with generics, the var keyword and so on.

    This is the code I am experimenting with, and I do need some help.

    Code (CSharp):
    1. using System.Collections;
    2. using System.Collections.Generic;
    3. using UnityEngine;
    4. using UnityEngine.UI;
    5. public class FadeIn : MonoBehaviour {
    6.     Image imageToFade;
    7.     private Color a;
    8.     Text s;
    9.     private bool couroutineStarted = false;
    10.  
    11.     void Awake() {
    12.         imageToFade = this.GetComponent<>();
    13.         a = imageToFade.color;
    14.         imageToFade.color = new Color(a.r, a.g, a.b, 0);
    15.     }
    16.  
    17.     void Update() {
    18.         if(!couroutineStarted)
    19.         StartCoroutine(FadeInColour());
    20.     }
    21.  
    22.     public FadeIn sp() {
    23.  
    24.         return this;
    25.     }
    26.  
    27.     IEnumerator FadeInColour<T> (T imageToFade) where T: Image,
    28.     {
    29.      
    30.         couroutineStarted = true;
    31.         float time = 2f;
    32.         float alpha = 0;
    33.  
    34.         while (imageToFade.color.a < 1)
    35.         {
    36.             alpha += Time.deltaTime / time;
    37.             imageToFade.color = new Color(a.r, a.g, a.b, alpha);
    38.          
    39.             yield return null;
    40.         }
    41.  
    42.     }
    43.  
    44. }
    45.  
     
  2. Bantaru

    Bantaru

    Joined:
    May 11, 2016
    Posts:
    59
    Well I just needed it for my game and I solved it like so and in my opinion is much cleaner than Your approach:

    Code (CSharp):
    1. public Text text;
    2. private float fadeTime;
    3.  
    4. void Start(){
    5. //Get the color from the inspector, cause we need just to change alpha
    6.         currentColor = text.color;
    7. }
    8.  
    9. void Update(){
    10. float alphaChange = Time.deltaTime / fadeTime;
    11.         currentColor.a += alphaChange;
    12.         text.color = currentColor;
    13. }
    And You can have just one bool that just set it on and off. Or You can even have two, one for fade in one for fade out. You can also put the script from update into function and just reuse it with different objects.
     
  3. Suddoha

    Suddoha

    Joined:
    Nov 9, 2013
    Posts:
    2,824
    If you really do not want to distinguish between the specific elements, you can use a common base class which both inherit from and also provides the color property.
    This happens to be UnityEngine.UI.Graphic on the most abstract level. No generics needed with this approach, unless you need them.
     
  4. MakerDavid

    MakerDavid

    Joined:
    Feb 5, 2016
    Posts:
    19
    Could you expand a little bit maybe?

    I made it work by:



    Code (CSharp):
    1. Graphic ToFade;
    2. ToFade = isImage == true ? (Graphic)this.GetComponent<Image>() : (Graphic)this.GetComponent<Text>();
    3.  
    4. IEnumerator FadeInColour(Graphic Graphic); //Rest of the function removed ..
    Thanks.
     
    Last edited: Feb 27, 2017
  5. Suddoha

    Suddoha

    Joined:
    Nov 9, 2013
    Posts:
    2,824
    I've attached some code below.
    Let's start with the RequireComponent attribute. It's usually used to enforce a component of the specified type. As UnityEngine.UI.Graphic is abstract, it'll throw an error if the target object does not have an instance of a subtype attached to it.
    Strictly speaking, one could argue it's a little mis-usage, but it does its job (enforces you to attach it to objects that are "valid targets" in this context). For a proper error message you'd most-likely write your own attribute.
    You can also remove the attribute and do the usual null-checks to prevent NullReferenceExceptions.

    Next, cache the component in Awake(). Null check is not needed as we enforce the object to have a component which is assignable to our field.

    The Start method has been turned into a coroutine, you could also put that in it's own method and start it using StartCoroutine(...).

    Code (CSharp):
    1. [RequireComponent(typeof(Graphic))]
    2. public class SomeTestScript : MonoBehaviour
    3. {
    4.     [SerializeField]
    5.     private float _fadeDuration;
    6.  
    7.     private Graphic _fadeTarget;
    8.  
    9.     private void Awake()
    10.     {
    11.         _fadeTarget = GetComponent<Graphic>();
    12.     }
    13.  
    14.     private IEnumerator Start()
    15.     {
    16.         var color = _fadeTarget.color;
    17.         color.a = 0f;
    18.  
    19.         while(color.a < 1f)
    20.         {
    21.             color.a += Time.deltaTime / _fadeDuration;
    22.             _fadeTarget.color = color;
    23.             yield return null;
    24.         }
    25.     }
    26. }
     
    Last edited: Feb 27, 2017
    image28 likes this.
  6. MakerDavid

    MakerDavid

    Joined:
    Feb 5, 2016
    Posts:
    19
    That is helpful, I never knew you could turn the Ienumerator into a start function.

    Edit: Using your code instead of mine, mostly. Looks much cleaner and nicer.
     
    Last edited: Feb 27, 2017
  7. StridingDragon

    StridingDragon

    Joined:
    Jan 16, 2013
    Posts:
    78
    Just as a quick aside: If you do not want to do the coding yourself. iTween is an incredible free Unity package in the Asset Store that can do tweening for virtually anything in a variety of ways. As a result, I've never really found the need to write any tweening code myself, as I use it on everything.

    https://www.assetstore.unity3d.com/en/#!/content/84
     
  8. mgear

    mgear

    Joined:
    Aug 3, 2010
    Posts:
    9,350