1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[Unity]UI Toolkitを試しに触ってみる

Last updated at Posted at 2025-11-30

概要

UIToolkitはまだuGUIと完全に置き換えることができるまでにはなっていないですが、そろそろ実用レベルが近づいてきています。
試しにどんなものか触ってみたい人のために基礎の基礎を記事にまとめてみました。

本文

1 Component作成

Projectウィンドウで右クリック → Create → UI Toolkit → UI Document(UIのデザインを決めるファイル)

スクリーンショット 2025-11-15 230612.png

Projectウィンドウで右クリック → Create → UI Toolkit → Panel Settings Asset(UIの表示設定を保存するファイル)

スクリーンショット 2025-11-15 230720.png

2 Hierarchyにオブジェクトを作成

UI用のオブジェクトをHierarchyに作成します(Create Empty)。作成したらUI Documentコンポーネントをアタッチします。そして先程作成したアセットをコンポーネント内へ以下のように設定します
Panel Settings → Panel Settings Asset
Source Asset → UI Document

スクリーンショット 2025-11-15 230915.png

3 UIをデザインする

最初に作成したUI Documentをダブルクリックすると以下のようなUI Builderウィンドウが開きます。

LibraryをスクロールするとたくさんUIパーツがあることがわかりますが、今回はこの中からLabelを使います。LabelをHierarchyにドラッグアンドドロップすることでUIを配置することができます。

次にウィンドウ右上のLabelの下の入力欄に名前を入力します。これはコード上からこのUIパーツを指定する時に使われます。今回は「SampleLabel」と名付けました。

後はInspector上で文字の見た目をお好みで設定してみてください。
例)
表示する文章 Attributes → Text
装飾 InlinedStyles → Text

スクリーンショット 2025-11-15 231347.png

ここまでの設定でUIを画面に表示する基本部分は出来ました:star2:

4 コード設定

コード上からUIを操作してみます。Create → MonoBehaviour Scriptで新規ファイルを作成して以下のコードを入力します。("SampleLabel")部分にはUI Builderで指定したLabelの名前を入力してください。

入力が終わったら、これをGameObjectにアタッチします。

using UnityEngine;
using UnityEngine.UIElements;

public sealed class UIToolkitTest : MonoBehaviour
{
    private void Start()
    {
        var root = GetComponent<UIDocument>().rootVisualElement;
        root.Q<Label>("SampleLabel").text = "Hello, UIToolkit!";
    }
}

実行すると、Labelの文字が書き換わったことが確認できました:raised_hands_tone2:

スクリーンショット 2025-11-15 234725.png

補足

リンク
30分で分かる!Unity UI Toolkit 入門 ~ランタイム編~

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?