こんにちは、Unityエンジニアのオオバです。
uGUIでUI開発をするときCanvasGroupは外せません。
CanvasGroupとはuGUIのコンポーネントで 子階層全ての透明度を一括で変更できる超便利機能です。
ところでなぜCanvasGroupは透明度を一括変更できるのでしょうか？
本記事ではCanvasGroupの処理内容の解説とCanvasGroupを使ってやってはいけない事について解説していきます。
CanvasGroupは頂点カラーを操作して透明度調整している
CanvasGroupは頂点カラーの透明度を操作しています。uGUIのシェーダーがカラーを合成する時に参照して透明度を再現しています。
👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう！
CanvasGroupを使う上で頂点カラーを操作するシェーダは書いてはダメ
CanvasGroupを使うときにuGUIのシェーダに頂点カラーを操作するシェーダを書いてはいけません。
前述の通りCanvasGroupは頂点カラーのアルファ値を操作しているからです。
uGUIのカスタムシェーダを書く際はご注意を。
内部処理を理解するとトラブルに強いエンジニアになれる
プログラミングで重要なことは理解していない内部処理を放置しないことです。
何かプログラミングでトラブルが起きた時、内部処理を理解しておけば対処法がすぐに思いつきます。
こういう理にかなった判断をできるエンジニアは信頼されます。
逆に内部処理を理解していないどうでしょう。
対応方法が当てずっぽうになり無駄に時間が取られてしまいます。
身近な機能の内部処理から始めるのがオススメ
もちろん全ての処理を理解することは難しいです。
CanvasGroupのようにuGUI使用者には身近な存在。身近な疑問は興味が強くなるため内部処理を理解する対象としてオススメです。
オオバは以前からCanvasGroupは 「なぜ一括処理できるのだろうか？」 と疑問でした。
CanvasGroupが動かないトラブルで気づいた
uGUIのシェーダーを新たに書いたとき、CanvasGroupが動かなくなりました。
シェーダーの変更前後を比較しながら調査すると CanvasGroupは頂点カラーを操作していたという事が分かりました。
厳密には自分自身と子階層のメッシュの頂点を取得し、その頂点カラーのアルファに値を代入しています。
こちらはUI-Default.shaderのフラグメントシェーダーの冒頭です。
fixed4 frag(v2f IN) : SV_Target
{
half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
fixed4 frag(v2f IN) : SV_Target
{
half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd);
変更後は頂点シェーダーから送られる頂点カラー（IN.color）の乗算処理を外しています。
するとCanvasGroupは適用されなくなりました。この現象を確認したことで 「CanvasGroupは頂点カラーを操作している」 という事が分かりました。
内部処理の理解を放置すると開発効率は下がる
CanvasGroupのトラブルをきっかけに感じたことは、「理解していない内部処理を放置すると開発効率が下がる」
もちろん内部処理を調査するのは時間がかかるためバランスは大事。調査することで新たな技術的な発見もあって面白いです。
まとめ：CanvasGroupを使う時は頂点カラーの操作に注意しましょう
記事の内容をまとめます。
- CanvasGroupは頂点カラーの透明度を操作するコンポーネント
- カスタムなuGUIシェーダーを書く際は頂点カラーの扱いに注意（CanvasGroupが動かなくなります）
- 理解していない内部処理を調査すると学びが多い
普段何気なく使っているCanvasGroupの事を１つのトラブルをきっかけに理解できました。
超優秀なプログラマーたちが作っているUnityエンジンには多くの工夫が盛り込まれています。
その氷山の一角を知るだけでも大きなメリットがあるのではないかと思った次第です。
これからもUnityの分からないをなくす旅は続きそうです。
筆者のXをフォローしよう
「Unity初心者大学」というUnity初心者向けのYouTube始めました！！
ぜひチャンネル登録をお願いします！
最後まで読んでいただきありがとうございました！
すばらしいCanvasGroupライフをお過ごしください。
- Unity2021.3.15f2