読者です 読者をやめる 読者になる 読者になる

(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

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

Unity uGUI

このエントリーをはてなブックマークに追加

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


はじめに


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


f:id:kan_kikuchi:20160513133142g:plain


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


Canvas Group

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

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

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


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

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


f:id:kan_kikuchi:20160513133545j:plain


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以外で止める事はできないのであしからず(:3っ)∋〜