이번 포스팅에서는 Flat한 Canvas와 인터렉션 할 수 있는 방법에 대해 알아보겠습니다.
UI와 인터렉션 하기 위해 Ray 기능을 사용할 것입니다.
UI 세팅
먼저, 빈 게임 오브젝트를 하나 생성해준 후 이름을 Flat Canvas로 바꿔준 다음 Ray Interactable 컴포넌트와 Pointable Canvas 컴포넌트를 부착해줍니다.
그 다음 Flat Canvas의 자식으로 빈 오브젝트를 하나 더 생성해준 다음 이름을 Mesh로 바꿔주고, Box Collider와 Collider Surface컴포넌트를 붙여줍니다.
Collider Surface의 Collider 부분에 방금 만든 Box Collider를 할당해줍니다.
Flat Canvas의 자식으로 UI Canvas를 하나 만들어줍니다. 그 다음 Render Mode를 World Space를 바꿔주신 다음 스케일을 작게 만들어줍니다.
Canvas 사이즈에 맞게 Collider 범위도 세팅해줍니다. 콜라이더의 경우 Ray가 부딪히게 되는 영역입니다.
Plane Surface의 경우 Option입니다. 해도 되고 안해도 되지만 이번 포스팅에서는 다뤄보도록 하겠습니다.
Flat Canvas의 자식으로 Plane Surface라는 빈 오브젝트를 하나 만들어준 다음, Plane Surface컴포넌트를 만들어주고 Backward로 설정해줍니다.
마지막으로 다시 Flat Canvas로 돌아와서 위 사진 네모 박스친 곳에 전부 값들을 할당해줍니다.
UI Canvas의 자식으로 버튼을 하나 만들어줍니다. 버튼이 눌릴 시 테스트 큐브의 색상이 제대로 바뀌는지 확인해보겠습니다.
여기까지가 Flat Canvas 세팅이였습니다.
Player 세팅
본인이 사용하고 있는 [Controller/Hand] 타입에 맞게 [Controller/Hand]Ray Interactor를 추가해줍니다.
오른손 왼손 본인의 프로젝트에 맞게 둘다 세팅하든 하나망 세팅하든 하시면 됩니다.
그 다음 카메라의 컬링 마스크에 UI가 제외되어 있는 경우 UI가 제대로 보이지 않으므로 UI까지 체크해줍니다.
여기까지 플레이어 세팅이였습니다.
사운드 세팅
UI Canvas와 인터렉션할 때 사운드가 들리기를 원하신다면 프로젝트 창에 Basic Ray라고 검색하신 후 상황에 맞는 프리팹을 우측 사진과 같이 끌어다 배치해줍니다.
그 다음, Flat Canvas에 Pointable Canvas Unity Envet Wrapper컴포넌트를 부착해준 다음 상황에 맞게 방금 만들어준 프리팹의 AudioTrigger.PlayAudio함수를 실행시키면 됩니다.
결과
버튼을 누를 때 TestCube가 정상적으로 빨갛게 변하는 것을 확인할 수 있습니다.
이상으로 Ray을 이용한 UI 인터렉션 방법에 대해 알아봤습니다.
잘못된 부분이 있으면 지적해주세요!
감사합니다.