この記事の使用環境: Unity 2017.3.1f1 Personal (.NET 4.6 Equivalent), Visual Studio Community 2017, Windows10 ]

CanvasGroupは便利

Unity UI の CanvasGroup コンポーネント、知ってましたか? 自分はつい最近知りました。

Unity公式マニュアルの説明はこちら。
Canvas Group は、個別に処理することなく一ヶ所から UI 要素のグループ全体における特定の機能を与えるのに用いることができます。Canvas Group のプロパティーは、そのコンポーネントがアタッチされているゲームオブジェクトだけでなく、すべての子要素に影響を与えます。
まあ、説明のこのとおりなんですけどね。

変更できるフィールド

変更できるフィールドは下図のとおり。
png
alpha は不透明度、interactable は 操作可能かどうか、blockRaycasts は Rayにぶつかるかどうか、ignoreParentGroups は親にアタッチされたCanvasGroupの設定を無視するかどうか。

CanvasGroup コンポーネントがアタッチされたUIオブジェクト自身と、その子要素のオブジェクトについて、これらをまとめて変更できます。

Panelの切り替えなどに便利

軽量なPanelを切り替えたりするのに便利です。

たとえば、このパネルと
png

このパネルを切り替えるときは、
png

それぞれのパネルに CanvasGroup コンポーネントをアタッチして初期値を設定しておいたうえで、以下のようなスクリプトのメソッドから変更するといいかも。CanvasGroupのalpha、interactable、blockRaycastsの値をまとめて変更するものです。少し書き換えれば不透明度を徐々に変えていくことなどもできますね。

【CanvasGroupのフィールドの値を切り替えるメソッドの例】
    private void SetCanvasGroupEnable ( CanvasGroup canvasGroup, bool enable )
    {
        if ( enable )
        {
            canvasGroup.alpha = 1;
            canvasGroup.interactable = true;
            canvasGroup.blocksRaycasts = true;
        }
        else
        {
            canvasGroup.alpha = 0;
            canvasGroup.interactable = false;
            canvasGroup.blocksRaycasts = false;
        }
    }

これを呼び出せば、もともと表示していたほうのパネルを非表示かつ接触不可にして、隠しておいたほうのパネルを表示することなどが簡単にできます。

親のゲームオブジェクトをまるごと SetActive(false) にしてしまうと、アタッチされているスクリプトなどもまとめて使えなくなってしまうので、それを避けたい場合などには便利かもしれません。

こちらのゲームで使っています

↓↓↓ 画像をクリックで開くよ(unityroom) ↓↓↓ 
png
プレイしてみてね!


今回は以上です。