Unity 슬라이드 토글 커스텀 컨트롤 만들기

이 문서는 Unity의 UI 툴킷을 사용하여 슬라이드 토글을 만드는 방법에 대한 가이드를 제공합니다. 사용자가 다양한 장치를 통해 토글을 조작할 수 있도록 커스텀 컨트롤을 생성하는 과정과 코드 예제를 포함합니다.

개요

슬라이드 토글은 사용자에게 상태를 전환할 수 있는 버튼을 제공합니다. 이 가이드는 Unity 에디터 및 C# 스크립팅에 익숙한 개발자를 위해 작성되었습니다.

선행 조건

이 가이드의 내용을 이해하기 위해서는 다음과 같은 사항을 숙지해야 합니다:

• UI 빌더
• 시각적 트리
• UXML 및 USS
• 이벤트 처리

슬라이드 토글 만들기

슬라이드 토글을 구현하기 위해 다음과 같은 단계로 진행합니다:

1. Unity 프로젝트 생성: 3D 템플릿을 사용하는 것이 시각적 효과에 더 유리합니다.
2. 폴더 생성: slide-toggle이라는 폴더를 만들고 파일을 저장합니다.
3. C# 스크립트 작성: SlideToggle.cs라는 이름의 C# 스크립트를 만들어 아래와 같은 내용을 추가합니다.

using UnityEngine;
using UnityEngine.UIElements;

namespace MyUILibrary
{
    public class SlideToggle : BaseField<bool>
    {
        public new class UxmlFactory : UxmlFactory<SlideToggle, UxmlTraits> { }
        public new class UxmlTraits : BaseFieldTraits<bool, UxmlBoolAttributeDescription> { }

        public static readonly new string ussClassName = "slide-toggle";
        public static readonly new string inputUssClassName = "slide-toggle__input";
        public static readonly string inputKnobUssClassName = "slide-toggle__input-knob";
        public static readonly string inputCheckedUssClassName = "slide-toggle__input--checked";

        VisualElement m_Input;
        VisualElement m_Knob;

        public SlideToggle() : this(null) { }
        public SlideToggle(string label) : base(label, null)
        {
            AddToClassList(ussClassName);
            m_Input = this.Q(className: BaseField<bool>.inputUssClassName);
            m_Input.AddToClassList(inputUssClassName);
            Add(m_Input);
            m_Knob = new();
            m_Knob.AddToClassList(inputKnobUssClassName);
            m_Input.Add(m_Knob);
            RegisterCallback<ClickEvent>(evt => OnClick(evt));
            RegisterCallback<KeyDownEvent>(evt => OnKeydownEvent(evt));
            RegisterCallback<NavigationSubmitEvent>(evt => OnSubmit(evt));
        }

        static void OnClick(ClickEvent evt)
        {
            var slideToggle = evt.currentTarget as SlideToggle;
            slideToggle.ToggleValue();
            evt.StopPropagation();
        }

        static void OnSubmit(NavigationSubmitEvent evt)
        {
            var slideToggle = evt.currentTarget as SlideToggle;
            slideToggle.ToggleValue();
            evt.StopPropagation();
        }

        static void OnKeydownEvent(KeyDownEvent evt)
        {
            var slideToggle = evt.currentTarget as SlideToggle;
            if (slideToggle.panel?.contextType == ContextType.Player)
                return;

||evt.keyCode == KeyCode.Return||
|---|---|---|
            {
                slideToggle.ToggleValue();
                evt.StopPropagation();
            }
        }

        void ToggleValue()
        {
            value = !value;
        }

        public override void SetValueWithoutNotify(bool newValue)
        {
            base.SetValueWithoutNotify(newValue);
            m_Input.EnableInClassList(inputCheckedUssClassName, newValue);
        }
    }
}

1. USS 파일 작성: SlideToggle.uss라는 파일을 생성하고 아래와 같은 내용을 추가합니다.

.slide-toggle__input {
    background-color: var(--unity-colors-slider_groove-background);
    max-width: 25px;
    border-radius: 8px;
    overflow: visible;
    border: 1px solid var(--unity-colors-slider_thumb-border);
    max-height: 16px;
    margin-top: 10px;
    transition: background-color 0.5s;
}

.slide-toggle__input-knob {
    height: 16px;
    width: 16px;
    background-color: var(--unity-colors-slider_thumb-background);
    position: absolute;
    border-radius: 25px;
    top: -1px;
    transition: translate 0.5s, background-color 0.5s;
    translate: -1px 0;
    border: 1px solid var(--unity-colors-slider_thumb-border);
}

.slide-toggle__input--checked {
    background-color: rgb(0, 156, 10);
}

.slide-toggle__input--checked > .slide-toggle__input-knob {
    translate: 8px 0;
}

.slide-toggle:focus .slide-toggle__input-knob {
    border: 1px solid var(--unity-colors-input_field-border-focus);
}

1. UI 빌더를 통해 UXML 파일 만들기: SlideToggleUsage.uxml이라는 이름의 파일을 만들고 아래와 같은 방법으로 추가합니다.
2. UI 빌더에서 Library > Project > MyUILibrary를 선택하고 SlideToggle을 Hierarchy 창으로 드래그합니다.
3. Inspector에서 Label 필드에 레이블 텍스트를 입력합니다.
4. StyleSheets 섹션에서 SlideToggle.uss를 추가합니다.
5. 슬라이드 토글 테스트: SampleScene에서 UI 문서 GameObject를 만들고, 해당 UI 문서를 선택한 후 SlideToggleUsage.uxml을 Inspector의 Source Asset 필드에 드래그합니다. 플레이 모드를 시작하고 토글을 클릭하거나 Enter, Return, Space 키를 눌러 동작을 테스트합니다.

추가 리소스

• 커스텀 컨트롤 만들기
• Unity 빌트인 변수
• BEM 스탠다드
• 바인드 가능 커스텀 컨트롤 만들기

이 가이드를 통해 Unity에서 손쉽게 슬라이드 토글을 구현하고, 다양한 UI 요소를 추가할 수 있습니다.