1
\$\begingroup\$

I know this question has been asked and asked but none of the topics i visited gave me an answer. I'm making a game programmed in c# where you control a boat and i want my UI to appear smoothly by fading in after X seconds. May someone help me?

\$\endgroup\$
7
\$\begingroup\$

Here is a rather simple extension class that you can use.

public static class GraphicExtensions
{
   /// <summary>
   /// Fade methods forUI elements;
   /// </summary>
   /// <param name="g"></param>
   public static void FadeIn(this Graphic g)
   {
    g.GetComponent<CanvasRenderer>().SetAlpha(0f);
    g.CrossFadeAlpha(1f, .15f, false);//second param is the time
   }
   public static void FadeOut(this Graphic g)
   {
    g.GetComponent<CanvasRenderer>().SetAlpha(1f);
    g.CrossFadeAlpha(0f, .15f, false);
   }
}

To use it do something like this :

public class FadeTest : MonoBehaviour
{
  void Start()
  {
    gameObject.GetComponent<Graphic>().FadeIn();
  }
}

Make sure that you include the namespace where you have put the static extension class and that you have attached this script to a UI element.

\$\endgroup\$
3
\$\begingroup\$

Another approach, non-programmatically:

  1. Add animator component to your Text element. Create an animator asset for it, or:

  2. Select your text and Ctrl+6. In the opened window, click 'Create animation', that will add Animator component and Animator controller asset.

  3. Click add property and select Text->Color.

  4. Click on Color.a
  5. Click on Curve editor tab.
  6. You see two keys. Select leftmost key and right-click it, select edit keys. In the appeared box type Time '0' and Value '0'.
  7. Select rightmost key, right-click. edit keys, type Time '1' and value '1'.
  8. Set a condition for a transition from Idle state to FadeIn state in animation controller if you need it. also, you should add IdleState and make default transition to that state before you jump into FadeIn state.

Animation window That's how your animator controller state machine should look like

\$\endgroup\$
2
\$\begingroup\$

You can use a coroutine to change the alpha. You'd attach a CanvasGroup component to the UI's container object. Then adjust the alpha like so:

public class Fade : MonoBehaviour {

public float changeTimeSeconds = 5;
public float startAlpha = 0;
public float endAlpha = 1;

float changeRate = 0;
float timeSoFar = 0;
bool fading = false;
CanvasGroup canvasGroup;


void Start()
{
    canvasGroup = this.GetComponent<CanvasGroup>();
    if(canvasGroup == null)
    {
        Debug.Log("Must have canvas group attached!");
        this.enabled = false;
    }
}

public void FadeIn()
{
    startAlpha = 0;
    endAlpha = 1;
    timeSoFar = 0;
    fading = true;
    StartCoroutine(FadeCoroutine());
}

public void FadeOut()
{
    startAlpha = 1;
    endAlpha = 0;
    timeSoFar = 0;
    fading = true;
    StartCoroutine(FadeCoroutine());
}

IEnumerator FadeCoroutine()
{
    changeRate = (endAlpha - startAlpha) / changeTimeSeconds;
    SetAlpha(startAlpha);
    while (fading)
    {
        timeSoFar += Time.deltaTime;

        if (timeSoFar > changeTimeSeconds)
        {
            fading = false;
            SetAlpha(endAlpha);
            yield break;
        } else
        {
            SetAlpha(canvasGroup.alpha + (changeRate * Time.deltaTime));
        }

        yield return null;
    }
}



public void SetAlpha(float alpha)
{
    canvasGroup.alpha = Mathf.Clamp(alpha, 0, 1);
}

}

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.