【Unity】チュートリアル実装で大活躍！逆マスクを作るUnmaskForUGUI【uGUI】

本記事はサムザップ #1 AdventCalendar 2020の12/11の記事です。
12/10の記事は@norimatsu_yusukeさんのDefaultAssetを使ってディレクトリを指定するでした。

はじめに

本記事では、画像の内側を切り抜いて表示する逆マスクの実装方法について紹介させていただきます。
しかしこちらの逆マスク、Unityの標準機能では実現することができません。
シェーダーで実現することも可能ですが、慣れていない人にとってはかなり難易度が高いものかと思います。
そこで、今回は「UnmaskForUGUI」という拡張機能を利用していきたいと思います。
※Unity 5.5以降であればサポートされています。
UnmaskForUGUI

導入について

上記のリンク（gitページ）から、リンクをコピーしてPackageManagerからダウンロードしてください。UI Unmaskが入れば大丈夫です。

逆マスクの実装

今回は以下の画面を使って実装してみたいと思います。

チュートリアル等で、何かしらのボタンにフォーカスを当てたい場合を想定して、真ん中の「Touch me!」ボタンのみ反応するようにしたいと思います。

完成形はこんな感じになります。

オブジェクトの配置

まずは、切り抜きの対象となる画像と同じサイズのMaskを配置します。（これが画像より小さいサイズだと外側が表示されないので注意してください）
今回の場合は画面全体を半透明の黒背景で覆ってその一部を切り抜きたいので、サイズをstretchで設定したものをキャンバス配下に配置します。

次に、上で配置したマスクの子に
* 逆マスク用Imageオブジェクト
* 半透明の黒背景用Imageオブジェクト
の２つを配置します。

逆マスクの設定

まずは逆マスク用のオブジェクトを設定していきます。
AddComponentから「Unmask」を選択します。
RectTransformもボタンを切り抜くので一旦ボタンと同じサイズで設定。
SourceImageには、切り抜く際の図形を設定します。今回の場合はボタンを切り抜くので、ボタンに設定されているものと同じ「UISprite」を設定しています。

次に、半透明の黒背景用のオブジェクトを設定していきます。
こちらは一旦Colorの値を設定しておくだけです。
RaycastTargetとMaskableのチェックは黒い部分に触れてしまったりそもそもマスクが効かなくなるのでつけておいてください。

ここまで設定したらこのようになります。

先ほど逆マスクのRectTransformをボタンと同じサイズで設定していたので、いい感じにフォーカスするためにちょっと大きめに修正。

タップ判定の設定

ここまで設定できたら、残りはタップできる範囲を実装するだけです。
半透明の黒背景用のオブジェクトに「UnmaskRaycastFilter」をAddComponentし、逆マスク用のオブジェクトを「TargetUnmask」に設定します。

完成！

切り抜いた部分だけタップするように実装できました！

特殊な図形で切り抜く場合にジャギってしまう問題の対処法

下に用意していた六芒星など、単純な矩形以外で切り抜くとちょっと画像だと見にくいですがジャギってしまいます。

原因は、Maskコンポーネントがステンシルでクリッピング描画を行っていることでエイリアスが発生してしまっているというものなのですが、結論これは原因となっているエッジのアルファ値を丸め込む（厳密には一定以下のアルファ値なら描画しないようにする）のが良いです。
※アルファマスクで解決することも可能ですが、カメラや座標の描画状態のことを考える必要があったり色々制限がかかるのでおすすめしません。

これにはシェーダーをいじる必要がありますが、やることは簡単で、Unityが提供しているビルトインシェーダーのうち、UI-Default.shaderのカラーのアルファ値を丸め込むようにするだけです。

// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)

Shader "UI/MaskCover"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)

        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        _ColorMask ("Color Mask", Float) = 15
        _RoundAlpha("Round Alpha", Float) = 1

        [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
    }

    SubShader
    {
        Tags
        {
            "Queue"="Transparent"
            "IgnoreProjector"="True"
            "RenderType"="Transparent"
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }

        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp]
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }

        Cull Off
        Lighting Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Blend SrcAlpha OneMinusSrcAlpha
        ColorMask [_ColorMask]

        Pass
        {
            Name "Default"
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0

            #include "UnityCG.cginc"
            #include "UnityUI.cginc"

            #pragma multi_compile_local _ UNITY_UI_CLIP_RECT
            #pragma multi_compile_local _ UNITY_UI_ALPHACLIP

            struct appdata_t
            {
                float4 vertex   : POSITION;
                float4 color    : COLOR;
                float2 texcoord : TEXCOORD0;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f
            {
                float4 vertex   : SV_POSITION;
                fixed4 color    : COLOR;
                float2 texcoord  : TEXCOORD0;
                float4 worldPosition : TEXCOORD1;
                UNITY_VERTEX_OUTPUT_STEREO
            };

            sampler2D _MainTex;
            fixed4 _Color;
            fixed4 _TextureSampleAdd;
            float4 _ClipRect;
            float4 _MainTex_ST;
            float _RoundAlpha;

            v2f vert(appdata_t v)
            {
                v2f OUT;
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
                OUT.worldPosition = v.vertex;
                OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

                OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);

                OUT.color = v.color * _Color;
                return OUT;
            }

            fixed4 frag(v2f IN) : SV_Target
            {
                half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

                // **************************************
                // これが追加したコード
                // _RoundAlphaはInspectorで変えれるようにしているので外出ししていますが任意の数値で大丈夫です
                // 今回は0.2で設定しています
                // **************************************
                color.a = color.a > _RoundAlpha ? color.a : 0.0;

                #ifdef UNITY_UI_CLIP_RECT
                color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
                #endif

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

                return color;
            }
        ENDCG
        }
    }
}

あとはこのシェーダーを設定したマテリアルを逆マスク用のオブジェクトに設定するだけでジャギが目立たなくなります。
↓適用したときの画像

対応なし　　　　　　　　　対応あり
　　　

おまけ

TextコンポーネントにUnmaskを設定すれば、テキストで切り抜くこともできます。

最後に

今回は矩形でよければ一切コードを書かなくても簡単に実装できるものでしたが、構造を工夫したりスクリプトを書けばもっと色々なところに活用できそうですね。（イライラ棒作ったり謎解きや脱出ゲームに活用できたり・・・）
誰でも使える機能なので、ぜひ今後の開発に役立ててください。
ここまで読んでくださりありがとうございました！

明日は@iida_ryotaさんの記事です。