【uGUI】負荷をかけない透明なuGUIボタン

負荷をかけない透明なuGUIボタン

画面のどこでもタップしたらシーン遷移するといった処理を行う場合に、 画面全体を覆うようなButtonを配置して、画像を透過にして使用することがあると思います。

実は透明でも処理コストはかかる

ただ、透明だとしても処理はされています。

Game画面のStatusを確認すると、Batchが2となっています。

α値を0にして、完全に透明にしても、

同じくBatchは2です。

つまり、見えていようが透明だろうが、Imageに対して律儀にちゃんと描画が走っているわけです。

この場合は、Buttonにアタッチされている、Buttonの文字を描画するのに1回、画像に1回の計2回です。

CanvasRendererのCull Transparent Mesh

そこで、用意されているのがCanvasRendererのCull Transparent Meshプロパティ。

uGUIでButtonを作ると、基本的にCanvasRendererがくっついています。

これにはCull Transparent Meshというプロパティがあり、 こいつにチェックを入れると、透過状態は無視してくれるようになります。

Butchが1と言うことは、文字を描画するだけの処理になりました。 同じく透明なオブジェクトは無視するようになったので、Tris/Vertsなどの頂点数なども削れています。

透過画像によって、実際のボタンの画像よりも大きな範囲をもつボタンを作るような場合は、Cull Transparent Meshを有効にするのが吉ということですね。

Unity - uGUI ボタン画像よりも大きなタッチ反応領域をつくる（2020年版）

以前、ボタンの画像よりも大きくタッチ範囲領域を作ったのがこの方法。

大きい画像を透過にして仕込む

unity2d.hateblo.jp まぁ、uGUIは画像がタッチ範囲なので、もうちょっと大きい画像を新たに作って透過にしちゃえ。 という、まぁ、ちょっとスマートではないやり方でした。

もう時代は令和なので、もうちょっと別の方法も。

スクリプトを使って子オブジェクトのtransformを使う

ひとつは、テラシュールさんで紹介している、子のGameObjectのtransformを当たり判定にしてしまうスマートなやり方。 紹介されているスクリプトをボタンの子オブジェクトに追加すればあっという間に出来上がり。 tsubakit1.hateblo.jp ただ、記述されている関数が廃止になっているため、現状の書き方に変えてあげる必要があります。

using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;
using UnityEngine.UI;
#if UNITY_EDITOR
using UnityEditor;
#endif

namespace UnityEngine.UI
{
    public class GraphicCast :Graphic
    {
        protected override void OnPopulateMesh(VertexHelper vhelper)
        {
            base.OnPopulateMesh(vhelper);
            vhelper.Clear();
        }

#if UNITY_EDITOR
        [CustomEditor(typeof(GraphicCast))]
        class GraphicCastEditor :Editor
        {
            public override void OnInspectorGUI()
            {
            }
        }
#endif
    }
}

Unity2020を使う

そして、Unity2020を使う方法。現時点でUnityの最新が2020.1.16ですが、 こちらを使うと、そもそもImage自体にRaycast Paddingという属性が存在します。

Raycast Padding

こちらは文字通り画像のサイズを調整できます。 広げたいときはPaddingに負の値を指定して広げる。判定の範囲を縮めたければ正の数を設定。 それだけで、タッチ範囲を調整できます。

Cool。

以上、uGUIのボタンタッチ範囲を調整する方法でした。