こんにちわ、オオバです。

uGUIでUI開発をするとき
CanvasGroupは外せません。

CanvasGroupとはuGUIのコンポーネントで、
子階層全ての透明度を一括で変更できる超便利機能です。

ところでなぜCanvasGroupは透明度を
一括変更できるのでしょうか?

本記事ではCanvasGroupの処理内容の解説と
CanvasGroupを使ってやってはいけない事について
解説していきます。

CanvasGroupは頂点カラーを操作して透明度調整している

CanvasGroupは頂点カラーの透明度を操作しています。
uGUIのシェーダーがカラーを合成する時に
参照して透明度を再現しています。

この記事の内容

CanvasGroupを使う上で頂点カラーを操作するシェーダは書いてはダメ

CanvasGroupを使うときにuGUIのシェーダに
頂点カラーを操作するシェーダを書いてはいけません。

前述の通りCanvasGroupは
頂点カラーのアルファ値を操作しているからです。

uGUIのカスタムシェーダを書く際はご注意を。

内部処理を理解するとトラブルに強いエンジニアになれる

プログラミングで重要なことは
理解していない内部処理を放置しないことです。

何かプログラミングでトラブルが起きた時、
内部処理を理解しておけば対処法がすぐに思いつきます。

こういう理にかなった判断をできるエンジニアは信頼されます。

逆に内部処理を理解していないどうでしょう。
対応方法が当てずっぽうになり
無駄に時間が取られてしまいます。

身近な機能の内部処理から始めるのがオススメ

もちろん全ての処理を理解することは難しいです。

CanvasGroupのようにuGUI使用者には身近な存在。
身近な疑問は興味が強くなるため
内部処理を理解する対象としてオススメです。

オオバは以前からCanvasGroupは
「なぜ一括処理できるのだろうか?」
と疑問でした。

👉 年収UP率93.8% / 平均年収UP額126万円のエンジニア転職サイト【転職ドラフト】

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の事を
1つのトラブルをきっかけに理解できました。

超優秀なプログラマーたちが作っている
Unityエンジンには多くの工夫が盛り込まれています。

その氷山の一角を知るだけでも
大きなメリットがあるのではないかと思った次第です。

これからもUnityの分からないをなくす旅は続きそうです。

オススメ記事
検証環境
参考サイト