UI 개체 선택 과정을 반복합니다.
검증 환경
- 윈도우
-
- 윈도우 11
- 유니티 에디터
-
- 2020.3.25에프1
이 팁의 전제 조건
이 팁을 설명하기 위한 전제 조건으로 다음 설정이 미리 이루어졌습니다.
참조
샘플 UI 개체 배포
다음과 같이 캔버스에 버튼을 배치합니다. 선택한 개체는 명확성을 위해 녹색으로 표시됩니다.
선택한 방향에 있는 객체만 선택할 수 있습니다.
UI 개체를 배치할 때 먼저 키보드 또는 게임 패드의 화살표 키를 눌러 지정된 방향으로 UI 개체를 선택할 수 있습니다. 이것은 매우 직관적이고 이해하기 쉽기 때문에 설정을 변경하는 것을 귀찮게 할 필요가 없다고 생각합니다.
그러나 메뉴풍의 레이아웃에서는 기본적으로 "아래를 선택한 상태에서 아래로 누르면 위로 돌아가기"와 같은 선택 루프 조작을 수행할 수 없습니다.
위 그림에서는 Button3이 선택된 상태에서 아래로 눌러 Button1을 선택할 수 없습니다. 물론 Button1을 선택한 상태에서 위로 누르면 Button3을 선택할 수 없습니다.
선택 영역 반복
여기에서는 선택 항목을 끝없이 반복할 수 있는 메커니즘을 만듭니다. 샘플 레이아웃에서는 Button3을 선택한 상태에서 아래쪽 키를 눌러 Button1을 선택할 수 있으며, Button1을 선택한 상태에서 위쪽 키를 눌러 Button3을 선택할 수 있습니다.
이 제어는 스크립트에서 수행됩니다. 적은 수의 설명으로 사용할 수 있고 다른 장면에서도 그대로 사용할 수 있는 범용 스크립트입니다. 대신 다음과 같은 제한 사항이 적용됩니다.
- 한 방향으로만 위아래로 이동할 수 있습니다.
- 지정된 개체 아래에 있는 모든
Selectable개체에 적용됩니다.
따라서 사용 대상은 상하로 스크롤하여 선택한 메뉴에 한정되어 있지만, 그 레이아웃에 자신을 제한하면 매우 편리합니다. 덧붙여서 위와 아래에 한정되어 있습니다만, 스크립트를 조금 수정하면 좌우로 한정할 수 있습니다.
프로젝트에서 스크립트를 만듭니다. 이름을 무엇이든 지정할 수 있지만 로 남겨 두겠습니다 SelectLoop .
스크립트는 다음과 같습니다.
using UnityEngine;
using UnityEngine.UI; // 追加
public class SelectLoop : MonoBehaviour
{
// 最初のフレーム更新の前に開始が呼び出されます
void Start()
{
// ボタンなど選択可能なコンポーネントを取得する
var selects = GetComponentsInChildren<Selectable>();
for (var i = 0; i < selects.Length; i++)
{
var nav = selects[i].navigation;
nav.mode = Navigation.Mode.Explicit;
nav.selectOnUp = selects[i == 0 ? selects.Length - 1 : i - 1];
nav.selectOnDown = selects[(i + 1) % selects.Length];
selects[i].navigation = nav;
}
}
// 更新はフレームごとに1回呼び出されます
void Update() { }
}
우리가하고있는 일은 키 선택 동작 navigation 에 대해 다음과 같은 설정을 만드는 것입니다.
- 위쪽 키를 눌러 이전 개체를 선택하고 마지막 개체를 선택하여 첫 번째 개체를 선택합니다.
- 아래쪽 키를 눌러 다음 오브젝트를 선택하거나, 마지막 오브젝트인 경우 첫 번째 오브젝트를 선택합니다.
그건 그렇고,이 객체 (Selectable)의 순서는 계층 구조의 순서에 따라 다릅니다. 계층 구조에서 선택하려는 순서대로 정렬합니다.
스크립트를 저장한 후 구성 요소로 첨부합니다.
이 스크립트는 첨부된 개체 Selectable 에 적용되므로 이번에는 Canvas 에 연결합니다.
이동을 시도하고 키 입력으로 Button1과 Button3 간에 이동할 수 있는지 확인합니다.