본문 바로가기

유니티/에셋, 패키지

[유니티에셋] CurvedUI 기본사용법

반응형
 

[유니티에셋]CurvedUI

Curved UI - VR Reday Solution to Bend / Warp your Canvas! ​ VR에 최적화된, VR이 아니더라도 3D 프로젝트에서 충분히 활용될 수 있는 Curved UI 입니다. 이름 그대로 휘어진 UI를 만들 수 있게 해줘 마이너리..

doobudubu.tistory.com

지난번 CurvedUI에 대한 소개에 이어, 이 에셋을 어떻게 사용하는지 글을 작성해보겠습니다.

 


 

1. Hierarchy창에서 우클릭 - UI - Image

2. Image의 Rect Transform에서 (Pos X, Pos Y, Pos Z)를 (0, 0, 0)으로 수정

3. Image의 Rect Transform에서 x, y방향으로 stretch

- Image가 Canvas에 비해 크기가 작다면 Canvas가 Curved 되어도 티가 잘 안날수도 있어서 이미지를 Canvas에 꽉 채우는 작업을 하였습니다.

4. Canvas에서 Render Mode를 World Space로 설정

5. Canvas의 Rect Transform에서 (Pos X, Pos Y, Pos Z)를 (0, 0, 500)으로 수정

- 카메라에 Canvas가 잘 보이게 하기 위해 이와 같은 좌표를 사용하였습니다.

6. Canvas에서 Add Component에서 'CurvedUISettings' 추가

7. Canvas에 추가한 'Curved UI Settings' 컴포넌트의 Shape에서 Angle 조절해보기

 


 

주의

 

1. 상호작용하는 요소(버튼, 슬라이더 등)가 Canvas의 범위를 벗어나면 동작하지 않는다

(따봉 스티커 위치 : 마우스 커서 위치)

2. 상호작용하는 요소들의 z값을 0으로 설정하자. CurvedUI는 모든 상호작용을 z=0 에서 감지한다.

- 위는 z=222 로 설정한 예제입니다. 마우스커서가 버튼 위에 있지만 하이라이트가 동작하지 않습니다.

3. 여러 개의 상호작용 요소를 포함한 CurvedUI를 사용하는 경우, 캔버스를 각각 다른 레이어에 배치시키고 'RayCastMyLayerOnly'를 활성화하여 레이캐스트의 충돌을 피한다.

4. 오브젝트의 부모 Canvas의 요소를 다른 Canvas의 요소로 옮긴 경우 제대로 실행되지 않는다. 이런 경우 위를 참조하여 코드를 수정하자

반응형