Unity UI System - DropDown

2022.04.28

 

현재 진행하는 프로젝트 설정창을 만드는 중 DropDown이라는 유니티 내장 UI 기능을 사용해 보았다. 처음 접해보는 기능이라 구글 서치가 가 이루어졌고 생각보다 유용한 기능이었다. 먼저 드롭다운이라고 하는 기능은 생김새가 이렇게 생겼다.

 

 

UI - DropDown 클릭하여 생성.

 

DropDown컴포넌트의 모습

 

먼저 개별 속성에 대해 알아보자. 이번 드롭다운에서 많은것을 배웠고 신기한 방법도 알았는데, 그중 첫번째는 Option이다.

옵션은 드롭다운을 눌렀을 때 나오는 옵션들을 표시할수 있는 곳 이다. 나 같은 경우 1920 * 1080, 2560 * 1440 과 같이

해상도를 옵션으로 넣었는데 이렇게 하면 드롭다운을 눌렀을 때 옵션의 변화가 생긴다.

 

 

이렇게 Option의 텍스트를 변화 줄수 있고 Sprite는 옵션의 이미지를 추가 할수 있다. 자 이제 드롭다운의 기본적인 특성을 알아보자. 이 부분이 만들면서 버그도 많이 났고 애좀 많이 먹었던 부분이다. 먼저 드롭다운은 Template라고 비활성화 된 부분이 있다.

 

 

이렇게 템플릿 부분에서 하위 자식들로 내려가다 보면 Item이 나온다. Item에는 옵션을 구성하고 있는 구조가 나온다. 먼저 알기 쉽게 그림을 보자.

 

 

이렇게 BackGround에서 변경하거나 스프라이트를 입힐시 옵션패널의 전반적인 배경이 바뀐다. 그리고 CheckMark역시 옵션을 골랐을 때 나오는 체크 표시이다. 역시 크기 조정이나 모양을 원하는 모양으로 바꿀수 있다. 그리고 마지막 Label은 옵션의 텍스트를 담당한다.

 

이제 드롭다운의 특징은 이렇게 제작한 템플릿의 Item이 처음 DropDown 컴포넌트에 있는 Option에 설정한 텍스트로 Label에 들어가며 Item의 디자인을 중심으로 옵션 선택창이 디자인 된다. 정말 놀라운 기능이다.

 

이쯤이면 이제 코드로 응용을 하나 해보려고 한다. 내가 만들 기능은 게임의 그래픽 옵션을 선택하면 맞게 설정해주는 기능을 만드려고 한다.

 

오늘 2개의 기능에 대해서 배웠다. 처음은 DropDown의 Value 활용하기. Value 값은 드롭다운 컴포넌트에서 확인할수 있는데, 옵션 윗부분에 value가 위치 해 있다. 기본 상태는 0, 첫번째 값 이므로 옵션에서 설정해준 값으로 순차적으로 바뀌게 된다.

 

 

여기서 DropDown의 값과 Edit - Project Setting - Quality로 들어가서 각 Level에 따른 그래픽 퀄리티를 확인한다. 내 레벨 기준으로 0 디폴트 값은 Very Low 상태이다. 순서대로 Low - 1, Medium - 2, High - 3 이 순서로 간다. 다음으로 소스코드에서 이제 둘의 기능을 연결시킬 차례이다.

 

 

아래의 변수 선언에서 Dropdown으로 변수 하나 생성해주고 int값을 하나 선언해주었다. 중요한 부분은 using 선언문에 UnityEngine.Rendering; 을 선언해주어야 한다.

 

[SerializeField] Dropdown _qualityOption;
[SerializeField] private int _optionIndex;





private void Update()
{
    _optionIndex = _qualityOption.value;
    ChangeQuality(_optionIndex);
}
public void ChangeQuality(int value)
{
    QualitySettings.SetQualityLevel(value);
}

 

QualitySetting에 SetQualityLevel 함수로 아까 프로젝트 설정에서 본 퀄리티 레벨에 맞게 value값으로 바꿔준다. 그러면 _optionIndex에 qualityOption으로 바뀔때마다 value가 바뀌어서 설정에 맞게 옵션을 바꿀수 있는 설정창 완성.

 

두번째 기능은 DropDown의 옵션을 바꿨을때 마다 호출되는 이벤트다. Unity Menual에서 찾은 onValueChange 기능인데 doTween기능을 넣어 설정을 바꿨을때 패널이 밑으로 잠깐 내려왔다가 올라와서 변경 사항을 잘 확인 할수 있도록 활용 해서 만들었다.

DropDown - onValueChanged 값이 변경될때마다 호출되는 이벤트