Version: 2022.1
언어: 한국어
오버레이
게임 오브젝트 위치 지정

커스텀 오버레이 생성

씬 뷰 창에 대한 커스텀 패널 오버레이와 툴바 오버레이를 생성할 수 있습니다.

팁: UI 요소 생성에 대한 자세한 내용은 UI 요소 개발자 가이드를 참조하십시오.

EditorToolbarElement

툴바 요소는 텍스트, 아이콘 또는 두 조합 모두를 포함할 수 있습니다.

Use EditorToolbarElement(Identifier, EditorWindowType) to register toolbar elements for use in ToolbarOverlay implementations.

모든 VisualElement 타입을 상속하고 스타일링을 직접 제공할 수 있지만 툴바 요소는 특정 스타일링이 필요하므로 다음과 같이 사전에 정의된 EditorToolbar 타입 중 하나를 상속하는 것이 더 좋습니다.

  • EditorToolbarButton - UnityEditor.UIElements.ToolbarButton 기반
  • EditorToolbarDropdown - EditorToolbarButton 기반
  • EditorToolbarDropdownToggle - UnityEngine.UIElements.BaseField<bool> 기반
  • EditorToolbarToggle - UnityEditor.UIElements.ToolbarToggle 기반

팁: 툴바가 수평 또는 수직으로 도킹된 경우 텍스트가 잘리거나 보이지 않으므로 각각에 대해 아이콘을 지정해야 합니다.

패널 오버레이

모든 오버레이는 반드시 오버레이 기본 클래스를 상속해야 하며 CreatePanelContent() 메서드를 구현해야 합니다. 이는 as-is를 사용하거나 툴바 요소를 추가할 수 있는 기본 패널을 생성합니다.

  1. 에디터 폴더에 새로운 C# 스크립트를 생성하여 이름을 지정합니다.
  2. 새로운 스크립트를 엽니다.
  3. 메인 중괄호 사이에 있는 보일러플레이트 콘텐츠를 제거하고 UnityEditor.Overlays 네임스페이스 안에 Overlay 클래스를 구현합니다.
  4. CreatePanelContent 함수를 오버라이드하고 콘텐츠를 시각적 요소에 추가합니다.
  5. Overlay 속성을 클래스에 추가하고 이 오버레이를 사용할 수 있는 창의 타입을 지정합니다. EditorWindow를 타입으로 지정하면 오버레이를 모든 에디터 창에서 사용할 수 있으며 SceneView를 지정하면 오버레이를 씬 뷰에서만 사용할 수 있습니다.
  6. 이름, ID, 표시 이름을 추가합니다.
  7. 선택 사항: 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를 전달합니다. 패널 오버레이와는 달리 콘텐츠는 요소의 스트립을 형성하기 위해 수집된 스탠드얼론 조각으로 정의됩니다.

  1. 패널 오버레이와 마찬가지로 C# 스크립트를 생성하고 에디터 폴더 내에 저장하여 시작한 다음 스크립트를 열고 편집합니다.
  2. 툴바 요소를 추가합니다.
  3. 툴바 요소를 오버레이 생성자에 추가합니다.
  4. 패널 오버레이를 추가하고 툴바 요소를 사용하여 구현합니다.

툴바 오버레이를 생성하는 경우 다음을 수행하십시오.

  • [EditorToolbarElement(Identifier, EditorWindowType)]을 사용하여 ToolbarOverlay 구현에서 사용하기 위해 툴바 요소를 등록합니다.
  • 모든 오버레이는 반드시 OverlayAttribute로 태그되어야 합니다.
  • 툴바 오버레이는 반드시 ToolbarOverlay를 상속하고 파라미터가 없는 생성자를 구현해야 합니다.
  • 툴바 콘텐츠는 기본 생성자에 전달되는 문자열 ID로 채워져 있습니다.
  • ID는 EditorToolbarElementAttribute로 정의됩니다.
  • Icon 속성은 오버레이가 축소되면 볼 수 있는 아이콘을 정의합니다. 아이콘이 제공되지 않는 경우 오버레이 이름의 처음 두 글자(또는 처음 두 단어의 처음 두 글자)가 사용됩니다.

오버레이 안에서 ToolbarOverlay 특정 요소를 구현할 때는 다음을 수행하십시오.

  • IAccessContainerWindow 인터페이스는 툴바 전용이므로 요소는 해당 컨텍스트를 인식하지 못합니다. DropdownToggleExample에서 요소를 토글해도 아무 작업도 하지 않습니다.
  • 툴바 요소는 오버레이에서 스타일링을 전달하지 않습니다. 시각 요소의 경우 UIElement 스타일링을 사용하십시오.

예제

다음과 같이 이 예제에서는 툴바 요소를 보여주는 _Element Toolbars Example_이라고 이름이 지정된 오버레이를 보여줍니다.

  • EditorToolbarButton
  • EditorToolbarToggle
  • EditorToolbarDropdown
  • EditorToolbarDropdownToggle

각 툴바 요소는 스탠드얼론 클래스로써 생성된 다음 오버레이 패널에 추가됩니다.

  • 이는 패널, 수평적, 수직적으로 배열될 수 있습니다.
  • 버튼은 텍스트와 툴팁을 포함합니다.
  • 툴바에는 해당 툴바가 축소될 때 볼 수 있는 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) { }

}

EditorToolbarToggle

요소의 모든 로직이 들어 있는 스탠드얼론 클래스를 생성합니다. 다음은 콘솔 안에서 상태를 출력하고 요소에 텍스트를 업데이트하는 토글의 간단한 예시입니다.

[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
) { }

}

EditorToolbarDropdown

요소의 모든 로직이 들어 있는 스탠드얼론 클래스를 생성합니다. 다음은 드롭다운 선택으로 텍스트를 조정하는 드롭다운에 대한 간단한 예시입니다.

[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
) { }

}

EditorToolbarDropdownToggle

요소의 모든 로직이 들어 있는 스탠드얼론 클래스를 생성합니다. 드롭다운 토글은 씬 뷰에 있는 기즈모 메뉴처럼 토글도 될 수 있는 드롭다운입니다. 이 예시는 드롭다운에서 선택된 컬러로 토글되면 씬 뷰의 코너 안에 컬러가 지정된 직사각형을 생성합니다.

[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;
    }
}
오버레이
게임 오브젝트 위치 지정
Copyright © 2023 Unity Technologies
优美缔软件(上海)有限公司 版权所有
"Unity"、Unity 徽标及其他 Unity 商标是 Unity Technologies 或其附属机构在美国及其他地区的商标或注册商标。其他名称或品牌是其各自所有者的商标。
公安部备案号:
31010902002961