단추 - MRTK2

아티클
07/04/2024

단추를 사용하면 즉각적인 작업을 트리거할 수 있습니다. 혼합 현실에서 가장 기본적인 구성 요소 중 하나입니다. MRTK는 다양한 유형의 단추 프리팹을 제공합니다.

MRTK의 단추 프리팹

폴더 아래에 MRTK/SDK/Features/UX/Interactable/Prefabs 있는 단추 프리팹의 예

Unity UI 이미지/그래픽 기반 단추

UnityUIInteractableButton.prefab
PressableButtonUnityUI.prefab
PressableButtonUnityUICircular.prefab
PressableButtonHoloLens2UnityUI.prefab

충돌기 기반 단추

PressableButtonHoloLens2

PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular

테두리 조명, 근접 조명 및 압축된 앞면 플레이트와 같은 다양한 시각적 피드백을 지원하는 백플레이트의 HoloLens 2 셸 스타일 단추

백플레이트 없는 HoloLens 2의 셸 스타일 단추

원형 셰이프가 있는 HoloLens 2의 셸 스타일 단추

PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V

Wide HoloLens 2의 셸 스타일 단추 32x96mm

공유 백플레이트 사용 가로 HoloLens 2 단추 모음

공유 백플레이스가 있는 세로 HoloLens 2 단추 모음

PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2의 셸 스타일 확인란 32x32mm

HoloLens 2의 셸 스타일 스위치 32x32mm

HoloLens 2의 셸 스타일 라디오 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2의 셸 스타일 확인란 32x96mm

HoloLens 2의 셸 스타일 스위치 32x96mm

HoloLens 2의 셸 스타일 라디오 32x96mm

방사형

확인란

ToggleSwitch

방사형 단추

체크 박스

토글 스위치

ButtonHoloLens1

PressableRoundButton

단추

HoloLens 1세대 셸 스타일 단추

둥근 도형 누름 단추

기본 단추

Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab)은 상호 작용 가능한 개념을 기반으로 하여 단추 또는 다른 유형의 대화형 화면에 간편한 UI 컨트롤을 제공합니다. 기준선 단추는 근거리 상호 작용에 대한 관절식 손 입력뿐만 아니라 원거리 상호 작용에 대한 응시 + 에어 탭을 포함하여 사용 가능한 모든 입력 방법을 지원합니다. 음성 명령을 사용하여 단추를 트리거할 수도 있습니다.

PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab)는 직접 손 추적 입력을 위한 단추의 정확한 이동을 지원하는 HoloLens 2의 셸 스타일 단추입니다. 스크립트와 PressableButton 스크립트를 결합합니다Interactable.

HoloLens 2의 경우 불투명 백플레이트에서 단추를 사용하는 것이 좋습니다. 이러한 유용성 및 안정성 문제로 인해 투명 단추는 권장되지 않습니다.

아이콘 및 텍스트는 물리적 환경에서 읽기 어렵습니다.
이벤트가 트리거되는 시기를 이해하기 어렵습니다.
투명 평면을 통해 표시되는 홀로그램은 HoloLens 2의 깊이 LSR 안정화로 불안정할 수 있습니다.

누를 수 있는 단추를 사용하는 방법

Unity UI 기반 단추

장면에서 캔버스를 만듭니다(GameObject -> UI -> Canvas). Canvas의 검사기 패널에서 다음을 수행합니다.

"MRTK 캔버스로 변환"을 클릭합니다.
"NearInteractionTouchableUnityUI 추가"를 클릭합니다.
Rect Transform 구성 요소의 X, Y 및 Z 배율을 0.001로 설정합니다.

PressableButtonUnityUI 그런 다음(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab), PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/) Canvas에 대한 PressableButtonUnityUICircular.prefab) 또는 PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab)

충돌기 기반 단추

(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) 또는 PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab)을 장면으로 끌어 PressableButtonHoloLens2 다 놓기만 하면 됩니다. 이러한 단추 프리팹은 관절식 손 입력 및 응시를 포함하여 다양한 유형의 입력에 대한 시청각 피드백을 포함하도록 이미 구성되어 있습니다.

Prefab 자체에 노출되는 이벤트와 Interactable 구성 요소를 사용하여 추가 작업을 트리거할 수 있습니다. HandInteractionExample 장면의 누름 단추는 Interactable의 OnClick 이벤트를 사용하여 큐브 색 변경을 트리거합니다. 이 이벤트는 응시, 에어 탭, 핸드레이와 같은 다양한 유형의 입력 방법과 누를 수 있는 단추 스크립트를 통한 물리적 단추 누름에 대해 트리거됩니다.

누름 단추가 단추를 통해 PhysicalPressEventRouter OnClick 이벤트를 실행할 때 구성할 수 있습니다. 예를 들어 단추를 처음 누를 때 OnClick을 실행하도록 설정할 수 있습니다. 단추를 누르고 놓는 것과 달리 Click을 클릭 시 이벤트로 설정하여 누를 수 있습니다.

특정 굴절식 손 입력 상태 정보를 활용하려면 터치 시작, 터치 엔드, 단추 누르기, 단추 해제 등 누를 수 있는 단추 이벤트를 사용할 수 있습니다. 그러나 이러한 이벤트는 에어 탭, 손 광선 또는 눈 입력에 대한 응답으로 실행되지 않습니다. 근거리 및 원거리 상호 작용을 모두 지원하려면 Interactable의 OnClick 이벤트를 사용하는 것이 좋습니다.

상호 작용 상태

유휴 상태에서 단추의 앞면 판이 표시되지 않습니다. 손가락이 다가오거나 응시 입력의 커서가 표면을 대상으로 할 때 앞판의 빛나는 테두리가 표시됩니다. 전면 판 표면에 손가락 설명 위치의 추가 강조 표시가 있습니다. 손가락으로 밀면 앞면 판이 손가락 설명으로 이동합니다. 손가락 설명이 전면 판의 표면에 닿으면 터치 포인트의 시각적 피드백을 제공하는 미묘한 펄스 효과가 표시됩니다.

HoloLens 2 셸 스타일 단추에는 상호 작용에 대한 사용자의 신뢰를 높이기 위한 많은 시각적 신호와 어포던스가 있습니다.


근접 조명	포커스 강조 표시	케이지 압축	트리거의 펄스

미묘한 펄스 효과는 현재 상호 작용하는 포인터에 있는 ProximityLight를 찾는 누름 단추에 의해 트리거됩니다. 근접 조명이 발견되면 메서드가 ProximityLight.Pulse 호출되어 셰이더 매개 변수에 자동으로 애니메이션 효과를 적용하여 펄스를 표시합니다.

검사기 속성

단추의 앞면 판에 대한 상자 충돌기Box Collider 입니다.

누름 단추 손 누름 조작이 있는 단추 이동에 대한 논리입니다.

물리적 Press 이벤트 라우터 이 스크립트는 손 누름 상호 작용에서 Interactable로 이벤트를 보냅니다.

상호 작용 가능한상호 작용 가능 은 다양한 유형의 상호 작용 상태 및 이벤트를 처리합니다. HoloLens 응시, 제스처 및 음성 입력 및 몰입형 헤드셋 모션 컨트롤러 입력은 이 스크립트에서 직접 처리됩니다.

오디오 피드백 클립에 대한 오디오 원본 Unity 오디오 원본입니다.

NearInteractionTouchable.cs 관절식 손 입력으로 모든 개체를 터치할 수 있도록 하는 데 필요합니다.

프리팹 레이아웃

ButtonContent 개체에는 앞면 판, 텍스트 레이블 및 아이콘이 포함됩니다. FrontPlate은 Button_Box 셰이더를 사용하여 인덱스 손가락 설명의 근접에 응답합니다. 빛나는 테두리, 근접 조명 및 터치에 대한 펄스 효과를 보여줍니다. 텍스트 레이블은 TextMesh Pro로 만들어집니다. SeeItSayItLabel의 표시 유형은 Interactable의 테마에 의해 제어됩니다.

아이콘 및 텍스트를 변경하는 방법

MRTK 단추는 구성 요소를 사용하여 ButtonConfigHelper 단추의 아이콘, 텍스트 및 레이블을 변경하는 데 도움이 됩니다. 선택한 단추에 요소가 없으면 일부 필드가 없을 수 있습니다.

아이콘 집합 만들기 및 수정

아이콘 집합은 구성 요소에서 사용하는 아이콘 자산의 공유 집합입니다ButtonConfigHelper. 세 가지 아이콘 스타일 이 지원됩니다.

쿼드 아이콘은 을 사용하여 MeshRenderer쿼드에 렌더링됩니다. 기본 아이콘 스타일입니다.
스프라이트 아이콘은 .를 SpriteRenderer사용하여 렌더링됩니다. 아이콘을 스프라이트 시트로 가져오거나 아이콘 자산을 Unity UI 구성 요소와 공유하려는 경우에 유용합니다. 이 스타일을 사용하려면 Sprite 편집기 패키지(Windows - 패키지 관리자 ->> 2D Sprite)를 설치해야 합니다.
문자 아이콘은 구성 요소를 사용하여 TextMeshPro 렌더링됩니다. 아이콘 글꼴을 사용하려는 경우에 유용합니다. HoloLens 아이콘 글꼴을 사용하려면 글꼴 자산을 만들어야 TextMeshPro 합니다.

단추에서 사용하는 스타일을 변경하려면 ButtonConfigHelper에서 아이콘 드롭다운을 확장하고 아이콘 스타일 드롭다운에서 선택합니다.

새 단추 아이콘을 만들려면:

프로젝트 창에서 자산을 마우스 오른쪽 단추로 클릭하여 상황에 맞는 메뉴를 엽니다. (내부 공백을 마우스 오른쪽 단추로 클릭할 수도 있습니다. 자산 폴더 또는 해당 하위 폴더 중 하나입니다.)
혼합 현실 > 도구 키트 아이콘 집합 만들기 > 를 > 선택합니다.

쿼드 및 스프라이트 아이콘을 추가하려면 해당 배열로 끌어다 놓기만 하면 됩니다. 문자 아이콘을 추가하려면 먼저 글꼴 자산을 만들고 할당해야 합니다.

MRTK 2.4 이상에서는 사용자 지정 아이콘 텍스처를 IconSet으로 이동하는 것이 좋습니다. 프로젝트의 모든 단추에 있는 자산을 새 권장 형식으로 업그레이드하려면 ButtonConfigHelperMigrationHandler를 사용합니다. (Mixed Reality Toolkit -> 유틸리티 -> 마이그레이션 창 -> 마이그레이션 처리기 선택 -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

단추를 업그레이드하는 데 필요한 Microsoft.MixedRealityToolkit.Unity.Tools 패키지를 가져옵니다.

업그레이드 창 대화 상자

마이그레이션 중에 기본 아이콘 집합에 아이콘이 없으면 MixedRealityToolkit.Generated/CustomIconSets에 사용자 지정 아이콘 집합이 만들어집니다. 대화 상자는 이 작업이 수행되었음을 나타냅니다.

사용자 지정 아이콘 알림

HoloLens 아이콘 글꼴 자산 만들기

먼저 아이콘 글꼴을 Unity로 가져옵니다. Windows 컴퓨터에서 Windows/글꼴/holomdl2.ttf 기본 HoloLens 글꼴 을 찾을 수 있습니다. 이 파일을 복사하여 Assets 폴더에 붙여넣습니다.

다음으로, Window > TextMeshPro Font Asset Creator를 통해 TextMeshPro > Font Asset Creator를 엽니다. HoloLens 글꼴 아틀라스를 생성하기 위한 권장 설정은 다음과 같습니다. 모든 아이콘을 포함하려면 다음 유니코드 범위를 문자 시퀀스 필드에 붙여넣습니다.

E700-E702,E706,E70D-E70E,E710-E714,E718,E71A,E71D-E71E,E720,E722,E728,E72A-E72E,E736,E738,E73F,E74A-E74B,E74D,E74F-E752,E760-E761,E765,E767-E769,E76B-E76C,E770,E772,E774,E777,E779-E77B,E782-E783,E785-E786,E799,E7A9-E7AB,E7AF-E7B1,E7B4,E7C8,E7E8-E7E9,E7FC,E80F,E821,E83F,E850-E859,E872-E874,E894-E895,E8A7,E8B2,E8B7,E8B9,E8D5,E8EC,E8FB,E909,E91B,E92C,E942,E95B,E992-E995,E9E9-E9EA,EA37,EA40,EA4A,EA55,EA96,EB51-EB52,EB65,EB9D-EBB5,EBCB-EBCC,EBCF-EBD3,EC03,EC19,EC3F,EC7A,EC8E-EC98,ECA2,ECD8-ECDA,ECE0,ECE7-ECEB,ED17,EE93,EFA9,F114-F120,F132,F181,F183-F186

글꼴 자산이 생성되면 프로젝트에 저장하고 아이콘 집합의 문자 아이콘 글꼴 필드에 할당합니다. 이제 사용 가능한 아이콘 드롭다운이 채워집니다. 단추에서 사용할 수 있는 아이콘을 만들려면 아이콘을 클릭합니다. 선택한 아이콘 드롭다운에 추가되고 이제 선택적으로 아이콘에 ButtonConfigHelper. 태그를 지정할 수 있습니다. 이렇게 하면 런타임에 아이콘을 설정할 수 있습니다.

public void SetButtonToAdjust()
{
    ButtonConfigHelper buttonConfigHelper = gameObject.GetComponent<ButtonConfigHelper>();
    buttonConfigHelper.SetCharIconByName("AppBarAdjust");
}

아이콘 집합을 사용하려면 단추를 선택하고 아이콘 드롭다운을 ButtonConfigHelper 확장하여 아이콘 집합 필드에 할당합니다.

단추의 크기를 변경하는 방법

HoloLens 2의 셸 스타일 버튼 크기는 32x32mm입니다. 차원을 사용자 지정하려면 단추 프리팹에서 이러한 개체의 크기를 변경합니다.

FrontPlate
BackPlate 아래의 쿼드
루트의 상자 충돌기

그런 다음 단추의 루트에 있는 NearInteractionTouchable 스크립트에서 경계 수정 단추를 클릭합니다.

FrontPlate의 크기 업데이트

쿼드 크기 업데이트

Box Collider의 크기 업데이트

'범위 수정'을 클릭합니다.

음성 명령('see-it, say-it')

음성 입력 처리기 누름 단추의 상호 작용 가능한 스크립트가 이미 구현되어 있습니다 IMixedRealitySpeechHandler. 여기에서 음성 명령 키워드를 설정할 수 있습니다.

또한 음성 입력 프로필 은 전역 Speech Commands 프로필에 음성 명령 키워드를 등록해야 합니다.

See-it, Say-it 레이블 누름 단추 프리팹에는 SeeItSayItLabel 개체 아래에 자리 표시자 TextMesh Pro 레이블이 있습니다. 이 레이블을 사용하여 단추의 음성 명령 키워드를 사용자에게 전달할 수 있습니다.

처음부터 단추를 만드는 방법

PressableButtonExample 장면에서 이러한 단추의 예를 찾을 수 있습니다.

1. 큐브를 사용하여 누를 수 있는 단추 만들기(거의 상호 작용에만 해당)

Unity 큐브 만들기(GameObject > 3D 개체 > 큐브)
스크립트 추가 PressableButton.cs
스크립트 추가 NearInteractionTouchable.cs

PressableButton'의 검사기 패널에서 큐브 개체를 이동 단추 시각적 개체에 할당합니다.

큐브를 선택하면 개체에 여러 색의 레이어가 표시됩니다. 이렇게 하면 설정 누름 아래 의 거리 값이 시각화됩니다. 핸들을 사용하여 누름(개체 이동)을 시작할 시기와 이벤트를 트리거할 시기를 구성할 수 있습니다.

단추를 누르면 TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased()와 같은 스크립트에 노출 PressableButton.cs 되는 적절한 이벤트가 이동하고 생성됩니다.

문제 해결

단추가 두 번 누르기를 실행하는 경우 프런트 푸시 적용 속성이 활성화되어 있고 근거리 상호 작용 터치 가능 평면 앞에 푸시 거리 시작 평면이 배치되어 있는지 확인합니다. 근거리 상호 작용 터치 가능 평면은 아래 GIF에서 흰색 화살표의 원점 앞에 배치된 파란색 평면으로 표시됩니다.

2. 기본 큐브 단추에 시각적 피드백 추가

MRTK 표준 셰이더는 시각적 피드백을 쉽게 추가할 수 있는 다양한 기능을 제공합니다. 재질을 만들고 셰이더를 Mixed Reality Toolkit/Standard선택합니다. 또는 MRTK 표준 셰이더를 사용하는 기존 재질 /SDK/StandardAssets/Materials/ 중 하나를 사용하거나 복제할 수 있습니다.

Fluent 옵션에서 확인 Hover Light 합니다Proximity Light. 이를 통해 근거리 손(근접 조명) 및 원거리 포인터(호버 라이트) 상호 작용 모두에 대한 시각적 피드백을 사용할 수 있습니다.

3. 기본 큐브 단추에 오디오 피드백 추가

스크립트는 TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased()와 같은 이벤트를 노출하기 때문에 PressableButton.cs 오디오 피드백을 쉽게 할당할 수 있습니다. 큐브 개체에 Unity를 Audio Source 추가한 다음 AudioSource.PlayOneShot()을 선택하여 오디오 클립을 할당하기만 하면 됩니다. 폴더에서 /SDK/StandardAssets/Audio/ MRTK_Select_Main 및 MRTK_Select_Secondary 오디오 클립을 사용할 수 있습니다.

4. 시각적 상태 추가 및 원거리 상호 작용 이벤트 처리

상호 작용 가능 은 다양한 유형의 입력 상호 작용에 대한 시각적 상태를 쉽게 만들 수 있는 스크립트입니다. 또한 원거리 상호 작용 이벤트를 처리합니다. 큐브 개체를 추가 Interactable.cs 및 끌어서 프로필 아래의 대상 필드에 놓습니다. 그런 다음 ScaleOffsetColorTheme 형식으로 새 테마를 만듭니다. 이 테마에서 포커스 및 누름과 같은 특정 상호 작용 상태에 대한 개체의 색을 지정할 수 있습니다. 배율 및 오프셋도 제어할 수 있습니다. 감속/가속을 확인하고 기간을 설정하여 시각적 전환이 원활하게 진행되도록 합니다.

개체가 원거리(손 광선 또는 응시 커서) 및 근거리(손) 상호 작용 모두에 응답하는 것을 볼 수 있습니다.

사용자 지정 단추 예제

HandInteractionExample 장면에서 둘 다 사용하는 PressableButton피아노 및 둥근 단추 예제를 참조하세요.

각 피아노 키에는 스크립트와 PressableButton 할당된 스크립트가 NearInteractionTouchable 있습니다. 로컬 전달 방향 NearInteractionTouchable 이 올바른지 확인하는 것이 중요합니다. 편집기에서 흰색 화살표로 표시됩니다. 화살표가 단추의 앞면에서 멀리 가리키는지 확인합니다.

다음을 통해 공유

단추 - MRTK2

MRTK의 단추 프리팹

Unity UI 이미지/그래픽 기반 단추

충돌기 기반 단추

누를 수 있는 단추를 사용하는 방법

Unity UI 기반 단추

충돌기 기반 단추

상호 작용 상태

검사기 속성

프리팹 레이아웃

아이콘 및 텍스트를 변경하는 방법

아이콘 집합 만들기 및 수정

HoloLens 아이콘 글꼴 자산 만들기

단추의 크기를 변경하는 방법

음성 명령('see-it, say-it')

처음부터 단추를 만드는 방법

1. 큐브를 사용하여 누를 수 있는 단추 만들기(거의 상호 작용에만 해당)

문제 해결

2. 기본 큐브 단추에 시각적 피드백 추가

3. 기본 큐브 단추에 오디오 피드백 추가

4. 시각적 상태 추가 및 원거리 상호 작용 이벤트 처리

사용자 지정 단추 예제

참고 항목

추가 리소스