Version: 2023.1
言語: 日本語
レイアウトエンジンによる要素の配置
背景画像の設定

相対配置と絶対配置

この例は、相対配置と絶対配置の違いを示すものです。また、C# と UXML/USS を使用して UI コントロールの追加とスタイル設定を行う方法も示しています。

例の概要

この例では、自動レイアウトシステムを使ってエディターとランタイム UI にボックスを追加しています。1 つのボックスが 25 px の相対オフセットを示し、別のボックスが 25 px, 25 px の絶対位置を示しています。

この例では、エディター UI を C# スクリプトで構成し、ランタイム UI を UXML と CSS で構成しています。

ビジュアル要素の配置
ビジュアル要素の配置

この例で作成された全てのファイルは、こちらの GitHub リポジトリ にあります。

要件

このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下をよく理解してください。

エディター UI 用の例の作成

カスタムのエディターウィンドウを作成し、C# スクリプトで全てのボックスを追加します (比較のためのグレーの背景のボックスが 4 つ、絶対位置配置を使用して設定された黒い背景のボックスが 1 つ、相対位置配置を使用して設定された紫色の背景のボックスが 1 つ)。

  1. 任意のテンプレートで Unity プロジェクトを作成します。

  2. Project ウィンドウ内を右クリックし、Create > UI Toolkit > Editor Window を選択します。

  3. UI Toolkit Editor Window Creator ウィンドウの C# ボックスに PositioningTestWindow と入力します。

  4. UXML および USS チェックボックスをオフにします。

  5. Confirm を選択します。これにより、PositioningTestWindow.cs という C# ファイルが作成されます。

  6. PositioningTestWindow.cs を以下の内容に置き換えます。

    using UnityEditor;
    using UnityEngine;
    using UnityEngine.UIElements;
    
    public class PositioningTestWindow : EditorWindow
    {
        [MenuItem("Window/UI Toolkit/Positioning Test Window")]
        public static void ShowExample()
        {
            var wnd = GetWindow<PositioningTestWindow>();
            wnd.titleContent = new GUIContent("Positioning Test Window");
        }
    
        public void CreateGUI()
        {
            for (int i = 0; i < 2; i++)
            {
                var temp = new VisualElement();
                temp.style.width = 70;
                temp.style.height = 70;
                temp.style.marginBottom = 2;
                temp.style.backgroundColor = Color.gray;
                this.rootVisualElement.Add(temp);
            }
    
            // Relative positioning
            var relative = new Label("Relative\nPos\n25, 0");
            relative.style.width = 70;
            relative.style.height = 70;
            relative.style.left = 25;
            relative.style.marginBottom = 2;
            relative.style.backgroundColor = new Color(0.2165094f, 0, 0.254717f);
            this.rootVisualElement.Add(relative);
    
            for (int i = 0; i < 2; i++)
            {
                var temp = new VisualElement();
                temp.style.width = 70;
                temp.style.height = 70;
                temp.style.marginBottom = 2;
                temp.style.backgroundColor = Color.gray;
                this.rootVisualElement.Add(temp);
            }
    
            // Absolute positioning
            var absolutePositionElement = new Label("Absolute\nPos\n25, 25");
            absolutePositionElement.style.position = Position.Absolute;
            absolutePositionElement.style.top = 25;
            absolutePositionElement.style.left = 25;
            absolutePositionElement.style.width = 70;
            absolutePositionElement.style.height = 70;
            absolutePositionElement.style.backgroundColor = Color.black;
            this.rootVisualElement.Add(absolutePositionElement);
        }
    }
    
  7. 例を参照するには、メニューから Window > UI Toolkit > Positioning Test Window と選択してください。

ランタイム UI 用の例の作成

  1. 以下の内容で、PositioningTest.uss という名前の USS ファイルを作成します。

    .box {
        height: 70px;
        width: 70px;
        margin-bottom: 2px;
        background-color: gray;
    }
    #relative{
        width: 70px; 
        height: 70px; 
        background-color: purple; 
        left: 25px; 
        margin-bottom: 2px;
        position:relative;
    }
    #absolutePositionElement{
        left: 25px; 
        top: 25px; 
        width: 70px; 
        height: 70px; 
        background-color: black;
        position: absolute;
    }
    
  2. 以下の内容で、PositioningTest.uxml という名前の UXML ドキュメントを作成します。

    <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" 
    xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" 
    editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" 
    editor-extension-mode="False">
        <Style src="PositioningTest.uss"/>
        <ui:VisualElement class="box"/>
        <ui:VisualElement  class="box"/>
        <ui:Label text="Relative\nPos\n25, 0" name="relative" />
        <ui:VisualElement  class="box"/>
        <ui:VisualElement  class="box"/>
        <ui:Label text="Absolute\nPos\n25, 25" name="absolutePositionElement" />  
    </ui:UXML>
    
  3. 以下の内容で、PositioningTestRuntime.cs という名前の C# スクリプトを作成します。

    using UnityEngine;
    using UnityEngine.UIElements;
    
    public class PostionTestRuntime : MonoBehaviour
    {
        void OnEnable()
        {
            GetComponent<UIDocument>();
        }
    }
    
  4. Hierarchy ウィンドウ内で右クリックし、UI Toolkit > UI Document と選択します。

  5. UI Document の Inspector ウィンドウで、UI Document > Source Asset > PositioningTest と選択します。

  6. UI Document の Inspector ウィンドウで、UI Document > Add Component > Positioning Test Runtime と選択します。

  7. 再生モードに入り、必要に応じて解像度を調整して結果を確認してください。

その他の参考資料

レイアウトエンジンによる要素の配置
背景画像の設定