負荷をかけない透明なボタンの作り方

• Unity のバージョン
  • Unity 2017.3.1f1

導入

みなさん、uGUI で透明なボタンを作りますよね?
さて、どのようにつくりますか?

一般的な作り方は、ボタンを用意して、それに紐付いている Image の Color を α値 = 0 にする方法でしょう。

しかし、この方法だと実は描画に負荷を与えてしまっています。。見た目では描画していないように見えていますが、実は Image の α 値 = 0 にしても描画されてしまっています。(α値 = 0 の Mesh が残っているため、描画対象になってしまっている)

Button に Image を使ったときの挙動

[Button の Image を α = 0 にする前]

[Button の Image を α = 0 にした後]

FrameDebugger の UGUI.Rendering.RenderOverlays -> Canvas.RenderOverlays.DrawMesh がボタンの描画部分
普通に表示しても透明にしても、Draw Mesh が発生する。

描画をなくし、当たり判定だけを取るためにはどのようにしたらよいでしょうか。

解決方法

Image の継承元である Graphic を継承したクラスを作成します。

ClickDetector.cs

public class ClickDetector : Graphic
{
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        // Base クラスで Mesh を生成しているので、override で Mesh を生成させないようにする。
        // Graphic はデフォルトで DoLegacyMeshGeneration() を呼ぶようになっており、
        // その中で OnPopulateMesh(Graphic.workerMesh) を実行している。
        // Graphic.workerMesh (= vh) にアクセスしてしまうと、Mesh が自動生成されるようになっている

        // Mesh が生成されると、Sprite が貼られていない Image のように、白い画像が出力されるのでどうにかしないといけない。
        // vh で mesh が必ず作られてしまうので、Clear を叩いて Mesh を削除する。
        vh.Clear();
    }
}

コメントに書いてある細かい話のコードはこのあたり。
https://bitbucket.org/Unity-Technologies/ui/src/a3f89d5f7d145e4b6fa11cf9f2de768fea2c500f/UnityEngine.UI/UI/Core/Graphic.cs?at=2017.3&fileviewer=file-view-default#Graphic.cs-423

ここで作成した ClickDetector を Image の代わりに GameObject にくっつけましょう。

Button に自作の 「ClickDetector」 をくっつけたときの挙動

[Button の GameObject の Image を、 ClickDetector に差し替え]

FrameDebugger の UGUI.Rendering.RenderOverlays -> Canvas.RenderOverlays.DrawMesh が無くなっている

できた。