씬 뷰 창에 대한 커스텀 패널 오버레이와 툴바 오버레이를 생성할 수 있습니다.
팁: UI 요소 생성에 대한 자세한 내용은 UI 요소 개발자 가이드를 참조하십시오.
툴바 요소는 텍스트, 아이콘 또는 두 조합 모두를 포함할 수 있습니다.
[EditorToolbarElement(Identifier, EditorWindowType)]를 사용하여 ToolbarOverlay 구현에 사용하기 위해 툴바 요소를 등록합니다.
모든 VisualElement 타입을 상속하고 스타일링을 직접 제공할 수 있지만 툴바 요소는 특정 스타일링이 필요하므로 다음과 같이 사전에 정의된 EditorToolbar 타입 중 하나를 상속하는 것이 더 좋습니다.
UnityEditor.UIElements.ToolbarButton 기반EditorToolbarButton 기반UnityEngine.UIElements.BaseField<bool> 기반UnityEditor.UIElements.ToolbarToggle 기반팁: 툴바가 수평 또는 수직으로 도킹된 경우 텍스트가 잘리거나 보이지 않으므로 각각에 대해 아이콘을 지정해야 합니다.
모든 오버레이는 반드시 오버레이 기본 클래스를 상속해야 하며 CreatePanelContent() 메서드를 구현해야 합니다. 이는 as-is를 사용하거나 툴바 요소를 추가할 수 있는 기본 패널을 생성합니다.
UnityEditor.Overlays 네임스페이스 안에 Overlay 클래스를 구현합니다.CreatePanelContent 함수를 오버라이드하고 콘텐츠를 시각적 요소에 추가합니다.Overlay 속성을 클래스에 추가하고 이 오버레이를 사용할 수 있는 창의 타입을 지정합니다.
EditorWindow를 타입으로 지정하면 오버레이를 모든 에디터 창에서 사용할 수 있으며 SceneView를 지정하면 오버레이를 씬 뷰에서만 사용할 수 있습니다.Icon 속성을 Overlay 클래스에 추가하여 압축 모드에서 사용할 아이콘을 지정합니다. 아무 아이콘도 지정되어 있지 않은 경우 기본적으로 시스템은 오버레이 이름의 처음 두 글자(또는 처음 두 단어의 처음 두 글자)를 사용하십시오.using UnityEditor;
using UnityEditor.Overlays;
using UnityEngine.UIElements;
[Overlay(typeof(SceneView), "My Custom Toolbar", true)]
public class MyToolButtonOverlay : Overlay
{
public override VisualElement CreatePanelContent()
{
var root = new VisualElement() { name = "My Toolbar Root" };
root.Add(new Label() { text = "Hello" });
return root;
}
}
툴바 오버레이는 툴바 아이템을 유지하고 EditorToolbarElement 컬렉션으로 구성된 컨테이너입니다.
툴바 오버레이에는 빌트인 수평, 버티컬, 패널 레이아웃이 있습니다. ToolbarOverlay는 파라미터가 없는 생성자를 구현하며 EditorToolbarElementAttribute ID를 전달합니다. 패널 오버레이와는 달리 콘텐츠는 요소의 스트립을 형성하기 위해 수집된 스탠드얼론 조각으로 정의됩니다.
툴바 오버레이를 생성하는 경우 다음을 수행하십시오.
[EditorToolbarElement(Identifier, EditorWindowType)]을 사용하여 ToolbarOverlay 구현에서 사용하기 위해 툴바 요소를 등록합니다.OverlayAttribute로 태그되어야 합니다.ToolbarOverlay를 상속하고 파라미터가 없는 생성자를 구현해야 합니다.EditorToolbarElementAttribute로 정의됩니다.Icon 속성은 오버레이가 축소되면 볼 수 있는 아이콘을 정의합니다. 아이콘이 제공되지 않는 경우 오버레이 이름의 처음 두 글자(또는 처음 두 단어의 처음 두 글자)가 사용됩니다.오버레이 안에서 ToolbarOverlay 특정 요소를 구현할 때는 다음을 수행하십시오.
다음과 같이 이 예제에서는 툴바 요소를 보여주는 _Element Toolbars Example_이라고 이름이 지정된 오버레이를 보여줍니다.
각 툴바 요소는 스탠드얼론 클래스로써 생성된 다음 오버레이 패널에 추가됩니다.
Icon 속성으로 정의된 아이콘이 있습니다. using System.Collections;
using System.Collections.Generic;
using System.Text;
using UnityEngine;
using UnityEditor.EditorTools;
using UnityEditor.Toolbars;
using UnityEditor.Overlays;
using UnityEngine.UIElements;
using UnityEditor;
// Use [EditorToolbarElement(Identifier, EditorWindowType)] to register toolbar elements for use in ToolbarOverlay implementation.
[EditorToolbarElement(id, typeof(SceneView))]
class DropdownExample : EditorToolbarDropdown
{
public const string id = "ExampleToolbar/Dropdown";
static string dropChoice = null;
public DropdownExample()
{
text = "Axis";
clicked += ShowDropdown;
}
void ShowDropdown()
{
var menu = new GenericMenu();
menu.AddItem(new GUIContent("X"), dropChoice == "X", () => { text = "X"; dropChoice = "X"; });
menu.AddItem(new GUIContent("Y"), dropChoice == "Y", () => { text = "Y"; dropChoice = "Y"; });
menu.AddItem(new GUIContent("Z"), dropChoice == "Z", () => { text = "Z"; dropChoice = "Z"; });
menu.ShowAsContext();
}
}
[EditorToolbarElement(id, typeof(SceneView))]
class ToggleExample : EditorToolbarToggle
{
public const string id = "ExampleToolbar/Toggle";
public ToggleExample()
{
text = "Toggle OFF";
this.RegisterValueChangedCallback(Test);
}
void Test(ChangeEvent<bool> evt)
{
if (evt.newValue)
{
Debug.Log("ON");
text = "Toggle ON";
}
else
{
Debug.Log("OFF");
text = "Toggle OFF";
}
}
}
[EditorToolbarElement(id, typeof(SceneView))]
class DropdownToggleExample : EditorToolbarDropdownToggle, IAccessContainerWindow
{
public const string id = "ExampleToolbar/DropdownToggle";
// This property is specified by IAccessContainerWindow and is used to access the Overlay's EditorWindow.
public EditorWindow containerWindow { get; set; }
static int colorIndex = 0;
static readonly Color[] colors = new Color[] { Color.red, Color.green, Color.cyan };
public DropdownToggleExample()
{
text = "Color Bar";
tooltip = "Display a color rectangle in the top left of the Scene view. Toggle on or off, and open the dropdown" +
"to change the color.";
// When the dropdown is opened, ShowColorMenu is invoked and we can create a popup menu.
dropdownClicked += ShowColorMenu;
// Subscribe to the Scene view OnGUI callback so that we can draw our color swatch.
SceneView.duringSceneGui += DrawColorSwatch;
}
void DrawColorSwatch(SceneView view)
{
// Test that this callback is for the Scene View that we're interested in, and also check if the toggle is on
// or off (value).
if (view != containerWindow || !value)
{
return;
}
Handles.BeginGUI();
GUI.color = colors[colorIndex];
GUI.DrawTexture(new Rect(8, 8, 120, 24), Texture2D.whiteTexture);
GUI.color = Color.white;
Handles.EndGUI();
}
// When the dropdown button is clicked, this method will create a popup menu at the mouse cursor position.
void ShowColorMenu()
{
var menu = new GenericMenu();
menu.AddItem(new GUIContent("Red"), colorIndex == 0, () => colorIndex = 0);
menu.AddItem(new GUIContent("Green"), colorIndex == 1, () => colorIndex = 1);
menu.AddItem(new GUIContent("Blue"), colorIndex == 2, () => colorIndex = 2);
menu.ShowAsContext();
}
}
[EditorToolbarElement(id, typeof(SceneView))]
class CreateCube : EditorToolbarButton//, IAccessContainerWindow
{
// This ID is used to populate toolbar elements.
public const string id = "ExampleToolbar/Button";
// IAccessContainerWindow provides a way for toolbar elements to access the `EditorWindow` in which they exist.
// Here we use `containerWindow` to focus the camera on our newly instantiated objects after creation.
//public EditorWindow containerWindow { get; set; }
// Because this is a VisualElement, it is appropriate to place initialization logic in the constructor.
// In this method you can also register to any additional events as required. In this example there is a tooltip, an icon, and an action.
public CreateCube()
{
// A toolbar element can be either text, icon, or a combination of the two. Keep in mind that if a toolbar is
// docked horizontally the text will be clipped, so usually it's a good idea to specify an icon.
text = "Create Cube";
icon = AssetDatabase.LoadAssetAtPath<Texture2D>("Assets/CreateCubeIcon.png");
tooltip = "Instantiate a cube in the scene.";
clicked += OnClick;
}
// This method will be invoked when the `Create Cube` button is clicked.
void OnClick()
{
var newObj = GameObject.CreatePrimitive(PrimitiveType.Cube).transform;
// When writing editor tools don't forget to be a good citizen and implement Undo!
Undo.RegisterCreatedObjectUndo(newObj.gameObject, "Create Cube");
//if (containerWindow is SceneView view)
// view.FrameSelected();
}
}
// All Overlays must be tagged with the OverlayAttribute
[Overlay(typeof(SceneView), "ElementToolbars Example")]
// IconAttribute provides a way to define an icon for when an Overlay is in collapsed form. If not provided, the name initials are used.
[Icon("Assets/unity.png")]
// Toolbar Overlays must inherit `ToolbarOverlay` and implement a parameter-less constructor. The contents of a toolbar are populated with string IDs, which are passed to the base constructor. IDs are defined by EditorToolbarElementAttribute.
public class EditorToolbarExample : ToolbarOverlay
{
// ToolbarOverlay implements a parameterless constructor, passing the EditorToolbarElementAttribute ID.
// This is the only code required to implement a toolbar Overlay. Unlike panel Overlays, the contents are defined
// as standalone pieces that will be collected to form a strip of elements.
EditorToolbarExample() : base(
CreateCube.id,
ToggleExample.id,
DropdownExample.id,
DropdownToggleExample.id
)
{ }
}
툴바 요소를 추가한 후 오버레이 패널을 구현합니다.
컨트롤은 UIToolkit에 있는 컨트롤과 동일하지만 축소 상태, 방향, 패널과 같은 일부 툴바 기능과 특정 스타일링을 상속합니다.
요소의 모든 로직이 들어 있는 스탠드얼론 클래스입니다. 다음은 클릭했을 때 큐브를 생성하는 버튼의 예시입니다.
[EditorToolbarElement(id, typeof(SceneView))]
class CreateCube : EditorToolbarButton
{
// This ID is used to populate toolbar elements.
public const string id = "ExampleToolbar/Button";
// Because this is a VisualElement, it is appropriate to place initialization logic in the constructor.
// In this method you can also register to any additional events as required. In this example there is a tooltip, an icon, and an action.
public CreateCube()
{
// A toolbar element can be either text, icon, or a combination of the two. Keep in mind that if a toolbar is docked horizontally the text will be clipped, so it's a good idea to specify an icon.
text = "Create Cube";
icon = AssetDatabase.LoadAssetAtPath<Texture2D>("Assets/CreateCubeIcon.png");
tooltip = "Instantiate a cube in the scene.";
clicked += OnClick;
}
void OnClick()
{
var newObj = GameObject.CreatePrimitive(PrimitiveType.Cube).transform;
// When writing editor tools, don't forget to be a good citizen and implement Undo.
Undo.RegisterCreatedObjectUndo(newObj.gameObject, "Create Cube");
// Note: Using ObjectFactory class instead of GameObject(like in this example) will register the undo entry automatically removing the need to register manually.
}
}
다음과 같이 요소의 ID를 오버레이 생성자에 추가합니다.
[Overlay(typeof(SceneView), "ElementToolbar Example")]
[Icon("Assets/unity.png")]
public class EditorToolbarExample : ToolbarOverlay
{
EditorToolbarExample() : base(CreateCube.id) { }
}
요소의 모든 로직이 들어 있는 스탠드얼론 클래스를 생성합니다. 다음은 콘솔 안에서 상태를 출력하고 요소에 텍스트를 업데이트하는 토글의 간단한 예시입니다.
[EditorToolbarElement(id, typeof(SceneView))]
class ToggleExample : EditorToolbarToggle
{
public const string id = "ExampleToolbar/Toggle";
public ToggleExample()
{
text = "Toggle OFF";
// Register the class to a callback for when the toggle’s state changes
this.RegisterValueChangedCallback(OnStateChange);
}
void OnStateChange(ChangeEvent<bool> evt)
{
if (evt.newValue)
{
// Put logic for when the state is ON here
Debug.Log("Toggle State -> ON");
text = "Toggle ON";
}
else
{
// Put logic for when the state is OFF here
Debug.Log("Toggle State -> OFF");
text = "Toggle OFF";
}
}
}
다음과 같이 요소의 ID를 오버레이 생성자에 추가합니다.
[[Overlay(typeof(SceneView), "ElementToolbar Example")]
[Icon("Assets/unity.png")]
public class EditorToolbarExample : ToolbarOverlay
{
EditorToolbarExample() : base(
ToggleExample.id
) { }
}
요소의 모든 로직이 들어 있는 스탠드얼론 클래스를 생성합니다. 다음은 드롭다운 선택으로 텍스트를 조정하는 드롭다운에 대한 간단한 예시입니다.
[EditorToolbarElement(id, typeof(SceneView))]
class DropdownExample : EditorToolbarDropdown
{
public const string id = "ExampleToolbar/Dropdown";
static string dropChoice = null;
public DropdownExample()
{
text = "Axis";
clicked += ShowDropdown;
}
void ShowDropdown()
{
// A simple GenericMenu to populate the dropdown content
var menu = new GenericMenu();
menu.AddItem(new GUIContent("X"), dropChoice == "X", () => { text = "X"; dropChoice = "X"; });
menu.AddItem(new GUIContent("Y"), dropChoice == "Y", () => { text = "Y"; dropChoice = "Y"; });
menu.AddItem(new GUIContent("Z"), dropChoice == "Z", () => { text = "Z"; dropChoice = "Z"; });
menu.ShowAsContext();
}
}
다음과 같이 요소의 ID를 오버레이 생성자에 추가합니다.
[Overlay(typeof(SceneView), "ElementToolbar Example")]
[Icon("Assets/unity.png")]
public class EditorToolbarExample : ToolbarOverlay
{
EditorToolbarExample() : base(
DropdownExample.id
) { }
}
요소의 모든 로직이 들어 있는 스탠드얼론 클래스를 생성합니다. 드롭다운 토글은 씬 뷰에 있는 기즈모 메뉴처럼 토글도 될 수 있는 드롭다운입니다. 이 예시는 드롭다운에서 선택된 컬러로 토글되면 씬 뷰의 코너 안에 컬러가 지정된 직사각형을 생성합니다.
[EditorToolbarElement(id, typeof(SceneView))]
class DropdownToggleExample : EditorToolbarDropdownToggle, IAccessContainerWindow
{
public const string id = "ExampleToolbar/DropdownToggle";
// This property is specified by IAccessContainerWindow and is used to access the Overlay's EditorWindow.
public EditorWindow containerWindow { get; set; }
static int colorIndex = 0;
static readonly Color[] colors = new Color[] { Color.red, Color.green, Color.cyan };
public DropdownToggleExample()
{
text = "Color Bar";
tooltip = "Display a color rectangle in the top left of the Scene view. Toggle on or off, and open the dropdown" +
"to change the color.";
// When the dropdown is opened, ShowColorMenu is invoked and you can create a pop-up menu.
dropdownClicked += ShowColorMenu;
// Subscribe to the Scene view OnGUI callback to draw a color swatch.
SceneView.duringSceneGui += DrawColorSwatch;
}
void DrawColorSwatch(SceneView view)
{
// Test that this callback is for the correct Scene view, and check if the toggle is on
// or off (value).
if (view != containerWindow || !value)
{
return;
}
Handles.BeginGUI();
GUI.color = colors[colorIndex];
GUI.DrawTexture(new Rect(8, 8, 120, 24), Texture2D.whiteTexture);
GUI.color = Color.white;
Handles.EndGUI();
}
// When the drop-down button is clicked, this method creates a pop-up menu at the mouse cursor position.
void ShowColorMenu()
{
var menu = new GenericMenu();
menu.AddItem(new GUIContent("Red"), colorIndex == 0, () => colorIndex = 0);
menu.AddItem(new GUIContent("Green"), colorIndex == 1, () => colorIndex = 1);
menu.AddItem(new GUIContent("Blue"), colorIndex == 2, () => colorIndex = 2);
menu.ShowAsContext();
}
}
다음과 같이 요소의 ID를 오버레이 생성자에 추가합니다.
[Overlay(typeof(SceneView), "ElementToolbar Example")]
[Icon("Assets/unity.png")]
public class EditorToolbarExample : ToolbarOverlay
{
EditorToolbarExample() : base(
DropdownToggleExample.id
) { }
}
패널 오버레이를 구현하고 툴바 요소 스탠드얼론 클래스를 추가합니다. 아래의 예시에는 툴바에 여러 요소를 추가하는 방법을 보여주는 툴바 요소가 모두 포함되어 있습니다. 툴바 요소는 보일 수 있도록 반드시 패널 오버레이에 포함되어야 합니다.
[Overlay(typeof(SceneView), "ElementToolbar Example")]
[Icon("Assets/unity.png")]
public class EditorToolbarExample : Overlay
{
public override VisualElement CreatePanelContent()
{
var root = new VisualElement() { name = "My Tool Root" };
root.Add(new CreateCube());
root.Add(new ToggleExample());
root.Add(new DropdownExample());
root.Add(new DropdownToggleExample());
return root;
}
}