【Unity/Ui Toolkit】作成したボタン要素にクリックイベントを設定する方法。

UnityのUi toolkitでボタンを作成し、クリックイベントを実装したかったのだが、引数を渡す段でめちゃくちゃ詰まったのでメモ。

ボタンをUi toolkit で作成して表示する手順

詳しくは公式？ブログやドキュメントを参照。
https://docs.unity3d.com/ja/current/Manual/UIElements.html

ランタイムで UI Toolkit を使う：その内側を覗く

UI Toolkit はユーザーインターフェースやエディター拡張を開発するために作られた、機能、リソース、およびツールを集めたものです。UI Toolkit は元々 UI Elements という名前で登場したもので、これは Unity エディター拡張のカスタム UI の開発を容易にする保守モードの UI フレームワー...

unity.com

①ヒエラルキー内を右クリックし、“UI toolkit” →　“UI document”を作成

②プロジェクトタブ内で右クリック。まず “Create” → “UI toolkit” → “Panel Setting”を作成。

次に同じ要領で “Create” → “UI toolkit” → “UI document” を作成。

③②で作成した二つの要素を①に割り当てる。①を選択して表示される inspector内に “UI Document”コンポーネントが存在している。

そのPanel Settingの項目に②で作ったPanelSettingを、Source Assetの項目UIdocumentをドラッグする。

④下記画像の赤丸で囲ったアイコンをダブルクリックするとUI builderが表示されるので、ボタンを生成する。ボタンのスタイルに関しては、UIbuilder内でinline方式で割り当てることもできるが、USSファイル内で別個に定義することも可能。この場合下の画像の波カッコ｛｝がそのファイル。

UI Builder - Unity マニュアル

UI Builder では、UI Toolkit で使用する UI ドキュメント (.uxml) やスタイルシート (.uss) などの UI アセットを視覚的に作成、編集できます。

docs.unity3d.com

ボタンにイベントを設定する方法

引数を持たないイベントの場合。下記のようなスクリプトを作成し、uidocument の inspector内の add componentにドラッグする。そして ctrl + p でアプリを実行しボタンをクリック。コンソールに”button clicked”と表示されればとりあえず動く。

ボタンのname属性に “eikenbutton”と割り当てているので、このコードではその名前で取得している。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;

public class HomeTopRight : MonoBehaviour
{

    private Button eikenbutton;

    // Start is called before the first frame update
    void Start()
    {
        var rootElement= GetComponent<UIDocument>().rootVisualElement;
        eikenbutton = rootElement.Q<Button>("eikenbutton");
        eikenbutton.clicked += OnButtonClicked;
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    private void OnButtonClicked()
    {
        Debug.Log("button clicked");
    }    
}

ボタンのイベントに引数を渡す場合

スマートな記述法ではないと思うがとりあえず動いた。

引数なしバージョンと違うのは、

① eikenbutton.clicked+=()=> { OnButtonClicked(“eiken”); }; ここら辺と

② private void OnButtonClicked(string whichview) 　ここら辺。

このコードではstringを渡している。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;

public class HomeTopRight : MonoBehaviour
{

    private Button eikenbutton;

    // Start is called before the first frame update
    void Start()
    {
        var rootElement= GetComponent<UIDocument>().rootVisualElement;
        eikenbutton = rootElement.Q<Button>("eikenbutton");
        eikenbutton.clicked+=()=> { OnButtonClicked("eiken"); };
    }

    // Update is called once per frame
    void Update()
    {
        
    }


    private void OnButtonClicked(string whichview)
    {
        Debug.Log("kurikuri");
        Debug.Log(whichview);
    }    
}