UnityのMaskがなんかジャギジャギになっちゃうときの対処法

Last updated at 2025-01-24Posted at 2025-01-23

はじめに

皆さんはUnityのMaskコンポーネントを使ったことがありますか？
今回Maskを利用して画像を好きな形にマスクしようとしたらおかしなことになっちゃったので、解決方法とそれに関する調査についてまとめました！

macOS Sonoma
Unity 2021.3.29f1

画像のように、ボタンを好きな形に切り抜くためMaskコンポーネントを利用したところ、輪郭がぼやけておかしな状況になってしまいました。

↓マスクとして利用した画像と実際マスクされた結果

ひとまずネットで有識者を探したところ、このような議論を見かけました！

端的にいうと Mask側のImageのアルファを1にしたらいい とのこと。半信半疑でやってみると本当に治りました！！
でもなぜ？？

手がかりを得るため、Maskがついているオブジェクトのインスペクタを見てみました。
UI/Default シェーダーのプロパティに値が設定されているようです。

おそらくステンシルマスクによってその機能が実現されていると予想し、実際にシェーダーの中身を見てみました。

ビルトインシェーダーをダウンロードしてUI/Defaultシェーダーを見てみると、frag関数内にこちらのような記述がありました。

#ifdef UNITY_UI_ALPHACLIP
    clip (color.a - 0.001);
#endif

このあたりをみると、アルファが0.001より小さいところでは描画がスキップされるとわかります。

どうやらマスクする側の画像の十分アルファが小さい部分についてはステンシルバッファへの書き込みがスキップされる仕組みになっているようです。

Mask側のImageのアルファを小さくするとマスクがうまくいったのはこれが理由だったみたいです。
同様の理屈で、シェーダー内の0.001の部分の値を大きくすることでもうまくマスクできることが確認できました。

逆にいうとマスクがうまくいかなかった時は、透明なはずの場所でアルファが0.001より大きい値を持っていたということになります。

Image内のカラーを小さくすることでマスクがうまくいったのは、それらのアルファ値が十分小さくなり、ステンシルバッファへの書き込みが行われなくなったからのようです。

しかし、なぜ透明なはずの場所にアルファ値が設定されていたんでしょうか？

画像データについて調べるため、アルファ値が 0.001 ~ 0.01 の部分が1になるようにPythonで処理し、グレースケールで表示してみました。その結果以下のようになり、画像ファイル自体には問題がなさそうだとわかりました。

↓特に輪郭に問題はなかった

ということはUnity側でインポートする際に問題が起きているのでは...？ということでインポート設定を見てみました。

結論、Alpha Is Transparency の設定を外してみるとマスクがうまくいきました。
Alpha Is Transparency とはなんのための設定なんでしょうか？

同じバージョンのUnity公式のマニュアルを見てみると、

Enable this property to dilate the color and avoid filtering artifacts on the edges if the alpha channel you specify is Transparency.

とありました。

どゆこと？？

ひとまず、フィルタリングの際にアーティファクトが生じないよう、エッジの部分に加工を施すような設定だというように認識しました。ここで周囲にアルファ値が設定されているっぽい気配がします。

新しいバージョンではこちらの処理が変更されているようで、2022.3.42f1 では特に何もせずともマスクがうまくいくようになっていました。
多分インポート時の処理がアップデートで変更されたのでは？と予想しています。
なんにせよこれからはできるだけ新しいバージョンを使おう！と決意...

マスクがうまくいかない現象について調べてみました。
結果、

がわかりました。

間違っているところなどがあればぜひご指摘お待ちしております！