씬 뷰 창에 대한 커스텀 패널 오버레이와 툴바 오버레이를 생성할 수 있습니다.
팁:UI 요소 생성에 대한 자세한 내용은 UI 요소 개발자 가이드를 참조하십시오.
툴바 요소에는 텍스트, 아이콘 또는 두 개의 조합 모두를 포함할 수 있습니다.
EditorToolbarElement(Identifier, EditorWindowType)를 사용하여 ToolbarOverlay 구현에 사용하기 위한 툴바 요소를 등록합니다.
모든 VisualElement 타입을 상속하고 스타일링을 직접 생성할 수 있지만 툴바 요소는 특정 스타일링이 필요합니다.다음과 같이 사전 정의된 EditorToolbar 타입 중 하나를 상속하는 것이 더 좋습니다.
EditorToolbarButton:UnityEditor.UIElements.ToolbarButton 기반EditorToolbarToggle:UnityEditor.UIElements.ToolbarToggle 기반EditorToolbarDropdown:EditorToolbarButton 기반EditorToolbarDropdownToggle:UnityEngine.UIElements.BaseField 기반팁:툴바가 가로 또는 세로로 도킹된 경우 텍스트가 보이지 않거나 잘릴 수 있습니다.따라서 텍스트가 잘리지 않도록 각 툴바에 대해 아이콘을 지정해야 합니다.
모든 오버레이는 Overlay 기본 클래스를 상속하고 CreatePanelContent 메서드를 구현해야 합니다. 이렇게 하면 툴바 요소를 사용하고 추가할 수 있는 기본 패널이 생성됩니다.
패널 오버레이를 생성하려면 다음 단계를 따르십시오.
생성한 스크립트를 엽니다.
스크립트의 기본 콘텐츠를 제거합니다.
UnityEditor.Overlays 네임스페이스에서 Overlay 클래스를 구현합니다.
CreatePanelContent 함수를 오버라이드하고 콘텐츠를 시각적 요소에 추가합니다.
OverlayAttribute 속성을 클래스에 추가합니다.
OverlayAttribute에서 이 오버레이를 표시하려는 창의 타입을 지정합니다.
EditorWindow를 타입으로 지정합니다.SceneView를 타입으로 지정합니다.OverlayAttribute에서 이름, ID, 표시 이름을 오버레이에 추가합니다.
오버레이를 축소했을 때 표시되는 아이콘을 추가하려면 Icon 속성을 Overlay 클래스에 추가하고 아이콘을 지정합니다.오버레이에 아이콘이 없는 경우 기본적으로 시스템은 오버레이 이름의 처음 두 글자나 처음 두 단어의 처음 두 글자를 사용합니다.
using UnityEditor;
using UnityEditor.Overlays;
using UnityEngine.UIElements;
[Overlay(typeof(SceneView), "Panel Overlay Example", 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 구현에 사용하기 위한 툴바 요소를 등록합니다.ToolbarOverlay를 상속하고 파라미터 없는 생성자를 구현하는지 확인합니다.EditorToolbarElementAttribute로 정의되었는지 확인합니다.Icon 속성을 사용하여 아이콘을 오버레이에 추가합니다.아이콘은 오버레이를 축소할 때 표시됩니다.오버레이에 아이콘이 없는 경우 오버레이를 축소할 때 오버레이 이름의 처음 두 글자(또는 처음 두 단어의 처음 두 글자)가 표시됩니다.오버레이에서 ToolbarOverlay에 특정한 요소를 구현하는 경우 다음과 같이 하십시오.
IAccessContainerWindow 인터페이스를 사용합니다.요소는 컨텍스트를 인식하지 못합니다.DropdownToggleExample에서 요소를 토글해도 아무 작업도 수행하지 않습니다.UIElement 스타일링을 사용합니다.툴바 요소는 오버레이에 스타일링을 적용하지 않습니다.툴바 오버레이를 생성하려면 다음과 같이 하십시오.
다음은 이러한 툴바 요소를 보여주는 Element Toolbars Example이라는 이름의 오버레이 예시입니다.
EditorToolbarButtonEditorToolbarToggleEditorToolbarDropdownEditorToolbarDropdownToggle각 툴바 요소는 스탠드얼론 클래스로 생성된 다음 오버레이 패널에 추가됩니다.
이 오버레이는 다음과 같습니다.
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에 있는 컨트롤과 동일하지만, 일부 툴바 기능과 특정 스타일링을 상속합니다.
이 섹션에는 다음 툴바 요소의 예시가 있습니다.
EditorToolbarButton은 요소의 로직을 포함하는 스탠드얼론 클래스입니다.다음 예시에서는 클릭할 때 큐브를 생성하는 버튼을 만듭니다.
[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
) { }
}