UIをまとめてフェード【Unity】【uGUI】

この記事でのバージョン
Unity 5.3.4f1 Personal

はじめに

今回はuGUIで作ったUIをまとめてフェードする場合の記事です。

NGUIで言うところの、UIPanelのalphaを変更してフェードさせるのと同じ感じですね。

Canvas Group

uGUIでまとめてalpha値を変更したい場合は、

Canvas Groupを使うと楽なようです。

Canvas Group は、個別に処理することなく一カ所から UI 要素のグループ全体における特定の側面をコントロールするのに用いることができます。Canvas Group のプロパティーは、そのコンポーネントがアタッチされている GameObject だけでなく、すべての子に影響を与えます。

このCanvas Groupを親に、一括でフェードしたいUIを子に置き、

Canvas GroupのAlphaを操作すればUI全体をフェードさせる事が出来ます。

CanvasFader

上記の方法を利用してUI全体を簡単にフェードイン、フェードアウトする

CanvasFaderなるものを作ったので、ついでにこれもご紹介！

使い方は以下の通り、CanvasFader.Beginを使うだけです。

//gameObjectを0.2秒でフェードアウトする
//ignoreTimeScaleとonFinishedは省略可
CanvasFader.Begin (target:gameObject, isFadeOut:true, duration:0.2f, ignoreTimeScale:true, onFinished:OnFinished);

/*
targetにCanvasFaderやCanvasGroupのコンポートがあらかじめ付いてる必要はない
*/

//フェード後に呼び出されるメッソッド
private void OnFinished(){}

再利用したい場合や、インスペクターで設定したCanvasFaderを使いたい場合は

Beginと同じような感じにPlayを使います。

target.GetComponent<CanvasFader>().Play(isFadeOut, duration, ignoreTimeScale, onFinished);

おわりに

CanvasFaderはNGUIのTween〇〇のような感覚で使えるように作りましたが、

アニメーションカーブが無かったり、alphaを0や1以外で止める事はできないのであしからず(:３っ)∋〜

---