【Unity】いきなりはじめる「UIElements」②

環境　Unity 2019.2.11f1

はじめに

前回の記事からかなり時間が空いてしまいましたが、きました第2弾。

www.hanachiru-blog.com

今回はいろんなGUIを試してみるという目的でやっていこうと思います！

はじめに
どんなGUIがあるのか
今回のソースコード
さいごに

どんなGUIがあるのか

まずはどんなものがあるか見たいと思いますが、実はUnityの中にサンプルが入ってたりします。

場所はWindow -> UI -> UIElements Samplesにあります。

f:id:hanaaaaaachiru:20191120032423p:plain

f:id:hanaaaaaachiru:20191120032433p:plain

実際にボタンを押せたりと動作するので、遊んでみると面白いと思います。

ただいきなりこのコードを見ていくのは辛いので、まずはUXMLだけに注目していきましょう。

今回のソースコード

前回の記事のコードをそっくり以下のコードに書き換えてみてください。

Text.uxml

<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <!-- ラベル -->
    <Label text="これはラベル"/>
  
    <!-- ボタン -->
    <Button text="これはボタン" />
  
    <!-- スクロールバー -->
    <Scroller direction="Horizontal" low-value="0" high-value="100" />
  
    <!--  トグル -->
    <Toggle label="これはトグル" />
  
    <!-- テキストフィールド -->
    <TextField label="これはテキストフィールド" />

    <!-- オブジェクトフィールド -->
    <uie:ObjectField label="これはオブジェクトフィールド" />

    <!-- スライダー -->
    <Slider label="これはスライダー" low-value="0" high-value="100" />

    <!-- ベクトルなんかもできる -->
    <uie:Vector3Field label="これはベクトル3フィールド" />

    <!-- 色の入力 -->
    <uie:ColorField label="色の入力なんかもできるよ" />

    <!-- カーブやグラデーションも -->
    <uie:CurveField label="これはカーブ" />
    <uie:GradientField label="グラデーションなんかも" />

</UXML>

Test.uss

/* これはコメントです。今回も白紙のスタイルシートでＯＫです。 */

Test.cs

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor.UIElements;


public class Test : EditorWindow
{
    // エディタに独自ウィンドウを作成する
    [MenuItem("Window/UIElements/Test")]
    public static void Open()
    {
        // メニューの「window -> UIElements -> Test」を選択するとOpenメソッドが呼ばれる
        // GetWindow()にてウィンドウを表示させる
        Test wnd = GetWindow<Test>();
        wnd.titleContent = new GUIContent("Test");
    }

    // アクティブになったときに実行される
    public void OnEnable()
    {
        VisualElement root = rootVisualElement;

        // UXMLを取得
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/Test.uxml");
        
        // USSを取得
        var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/Test.uss");
        
        VisualElement UXML = visualTree.CloneTree();
        
        // スタイルシートを適応
        UXML.styleSheets.Add(styleSheet);
        
        root.Add(UXML);
    }
}