この例は、相対配置と絶対配置の違いを示すものです。また、C# と UXML/USS を使用して UI コントロールの追加とスタイル設定を行う方法も示しています。
この例では、自動レイアウトシステムを使ってエディターとランタイム UI にボックスを追加しています。1 つのボックスが 25 px
の相対オフセットを示し、別のボックスが 25 px, 25 px
の絶対位置を示しています。
この例では、エディター UI を C# スクリプトで構成し、ランタイム UI を UXML と CSS で構成しています。
この例で作成された全てのファイルは、こちらの GitHub リポジトリ にあります。
このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下をよく理解してください。
カスタムのエディターウィンドウを作成し、C# スクリプトで全てのボックスを追加します (比較のためのグレーの背景のボックスが 4 つ、絶対位置配置を使用して設定された黒い背景のボックスが 1 つ、相対位置配置を使用して設定された紫色の背景のボックスが 1 つ)。
任意のテンプレートで Unity プロジェクトを作成します。
Project ウィンドウ内を右クリックし、Create > UI Toolkit > Editor Window を選択します。
UI Toolkit Editor Window Creator ウィンドウの C# ボックスに PositioningTestWindow
と入力します。
UXML および USS チェックボックスをオフにします。
Confirm を選択します。これにより、PositioningTestWindow.cs
という C# ファイルが作成されます。
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);
}
}
例を参照するには、メニューから Window > UI Toolkit > Positioning Test Window と選択してください。
以下の内容で、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;
}
以下の内容で、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>
以下の内容で、PositioningTestRuntime.cs
という名前の C# スクリプトを作成します。
using UnityEngine;
using UnityEngine.UIElements;
public class PostionTestRuntime : MonoBehaviour
{
void OnEnable()
{
GetComponent<UIDocument>();
}
}
Hierarchy ウィンドウ内で右クリックし、UI Toolkit > UI Document と選択します。
UI Document の Inspector ウィンドウで、UI Document > Source Asset > PositioningTest と選択します。
UI Document の Inspector ウィンドウで、UI Document > Add Component > Positioning Test Runtime と選択します。
再生モードに入り、必要に応じて解像度を調整して結果を確認してください。