【Unity NGUI】フェードインとフェードアウトの実装

第7回目は、NGUIで「フェード(Fade)」についてです。 主に、SceneやLayerを切り変える時に利用できるのではないかと考えています。 前回:【Unity NGUI】文字を表示する | albatrus.com

NGUI:フェードイン、フェードアウト

これができるまでに色々と調べたのですが、[Tween Alpha]を利用すれば簡単に実装ができました。

2014-9-2-fdsasa

黒のテクスチャを用意

まずは、黒いテクスチャを用意します。 これを[UITexture]を利用して画面に配置をします。

2014-9-2-fdsada

フェードイン

[Tween Alpha]の設定です。 フィードインは、From[1],From[0]に設定すれば実現できます。

2014-9-2-fdsasa

フェードアウト

フィードアウトは、From[0],From[1]に設定すれば実現できます。

2014-9-2-fdsas

フェードのスピード

フェードの速度は[Animation Curve]で調整をします。

2014-9-2-fdsasda

画面の遷移

これは、通常のTweenと同じように[On Finished]で、画面遷移のメソッドを指定して上げればOKです。

【参考】 [Unity2D] Unity2DのSpriteをフェードイン・フェードアウトさせる : West Hill 開発メモ

NGUIを使わない方法

先ほどはNGUIを利用した方法でしたが、何も利用をしない場合は[GUI Texture]を利用すれば実装が可能です。

2014-9-2-fdsasdaoo

同じように、黒いテクスチャを利用します。 [Tween]のようなスクリプトが利用できないので、独自に実装します。 [c] public class Fade : MonoBehaviour {

private bool  _play;
private bool _fadeIn;
private float time;

// Use this for initialization
void Start () {

    _play = false;
    _fadeIn = false;
    time = 0;
}
// Update is called once per frame
void Update () {

    if(_play){

        time += Time.deltaTime;
        if(_fadeIn){

            guiTexture.color =new Color(1,1,1,Mathf.Lerp(1,0,time) );

        }else{

            guiTexture.color = new Color(1,1,1,Mathf.Lerp(0,1,time));

        }


        if(time >= 1){

            _play = false;

        }

    }

}

public void startFadeIn(){

    _play = true;
    _fadeIn = true;
    time = 0;

}

public void startFadeOut(){

    _play = true;
    _fadeIn = false;
    time = 0;

}

}

[/c]

startFadeInstartFadeOutを必要な時に呼び出してあげます。

最後に

これで簡単ながら「フェード」を実装することができました。 私は、画面が遷移する際に良く「フェード」を利用しているので勉強のやりがいがありました。 以前にこんな記事も書いていましたので、こちらも参考にしてみてください。