iTween.FadeTo not working with NGUI Sprite

Question

I am trying to make fade out effect in Sprite of NGUI using iTween.FadeTo but not working. like that:

iTween.FadeTo(gOFlag, iTween.Hash("alpha",1.0f,"time",6f));

Am i doing something wrong if yes please let me know.

Answer 1

iTween uses the Unity Renderer component to fade things, but NGUI UISprites don't have renderers that iTween can access easily (they may not even have them all, I'd have to research the NGUI source to confirm this though).

I actually ran into the same problem earlier today and cooked up something for it :D

Step 0: If you don't know about Extension Methods in C#, check out this great video from Prime31. If you're familiar with Extension Methods just skip to Step 1 :p

Step 1: Make a new script called ExtensionMethods. This will not be a Monobehaviour, but a normal static class.

Step 2: Paste this into it:

public static void FadeIn (this UIWidget uiWidget, float fadeTime, AnimationCurve fadeCurve, float startAlpha, System.Action onComplete)
{
    uiWidget.StartCoroutine(DoFadeIn(uiWidget, fadeTime, fadeCurve, startAlpha, onComplete));
}

static System.Collections.IEnumerator DoFadeIn (UIWidget uiWidget, float fadeTime, AnimationCurve fadeCurve, float startAlpha, System.Action onComplete)
{
    Color endCol = uiWidget.color;
    endCol.a = 1f;
    Color startCol = uiWidget.color;

    if (startAlpha >= 0)
    {
        startCol.a = startAlpha;
    }

    float fTimer = 0;
    while (fTimer < fadeTime)
    {
        fTimer += Time.deltaTime;
        uiWidget.color = Color.Lerp(startCol, endCol, fadeCurve.Evaluate(fTimer/fadeTime));
        yield return null;
    }

    if (onComplete != null)
    {
        onComplete();
    }
}

public static void FadeOut (this UIWidget uiWidget, float fadeTime, AnimationCurve fadeCurve, System.Action onComplete)
{
    uiWidget.StartCoroutine(DoFadeOut(uiWidget, fadeTime, fadeCurve, onComplete));
}

static System.Collections.IEnumerator DoFadeOut (UIWidget uiWidget, float fadeTime, AnimationCurve fadeCurve, System.Action onComplete)
{
    Color endCol = uiWidget.color;
    endCol.a = 0f;
    Color startCol = uiWidget.color;

    float fTimer = 0;
    while (fTimer < fadeTime)
    {
        fTimer += Time.deltaTime;
        uiWidget.color = Color.Lerp(startCol, endCol, fadeCurve.Evaluate(fTimer/fadeTime));
        yield return null;
    }

    if (onComplete != null)
    {
        onComplete();
    }
}

Step 3: Modify the code a bit for your needs. Maybe you want to just pass a set alpha value like iTween.

Step 4: Call FadeIn or FadeOut on the UISprite. Check out the following example:

// Fill this by dragging the UISprite you want to Fade into the inspector
public UISprite uiSprite;

// Fade Time
public float fadeTime = 1f;

// The easing for the fade. Make sure you have a curve in the inspector or the fade will be instant / might break.
public AnimationCurve fadeCurve;

void FadeTest ()
{
    uiSprite.FadeIn(fadeTime, fadeCurve, 0f, OnFadeFinish);
}

void OnFadeFinish ()
{
    Debug.Log("Fade done!")
}

Bonus Step: Don't know how that onComplete business works? Check out this other great video from Prime31 about Actions.