유니티(Unity)에서 사용자 인터페이스 UI 기초 사용법 3 - 사이드 메뉴

유니티(Unity)에서 사용자 인터페이스 UI 기초 사용법 3 - 사이드 메뉴

아래 유니티 튜토리얼(Introduction to Unity UI, By Ben MacKinnon)을 참고하였습니다.
https://www.kodeco.com/6570-introduction-to-unity-ui-part-1

1)캔버스에 새로운 버튼 오브젝트를 생성합니다.

 

2)오브젝트의 Rect Transform에서 앵커 프리셋을 bottom, left로 설정하고 위치 및 크기를 설정합니다.

 

3)이미지의 소스 이미지(source image)에 스프라이트를 참조합니다.

 

4)버튼 오브젝트가 캔버스 영역의 좌측 하단에 위치하는것을 확인할수있습니다.

 

5)버튼 오브젝트의 하위에 panel 오브젝트를 생성합니다(Pnl_Mask)

panel 오브젝트의 앵커, 위치, 피봇을 아래와 같이 설정합니다.

 

6)panel 오브젝트의 피봇 위치가 버튼 오브젝트의 상단(top), 중앙(center)에 존재하는것을 확인할수있습니다.

 

7)panel 오브젝트에 mask 컴포넌트를 추가하고 show mask graphic를 체크해제합니다.

 

8)panel 오브젝트(Pnl_Mask) 하위에 두번째 panel 오브젝트(Pnl_Content)를 추가하고 앵커, 위치, 피봇을 아래와 같이 설정합니다.

 

9)panel 오브젝트(Pnl_Content)에서 이미지의 소스 이미지(source image)를 설정합니다.

 

10)panel 오브젝트(Pnl_Content) 하위에 세개의 버튼 오브젝트를 추가하고 위치를 설정합니다.

 

11)세개의 버튼 오브젝트에 소스 이미지를 설정합니다.

 

11)panel 오브젝트(Pnl_Content)가 위에서 아래로 이동하는 애니메이션을 생성합니다(slide_menu_down) 

panel 오브젝트(Pnl_Content)는 상위 panel 오브젝트(Pnl_Mask)의 영역 바깥에서 마스킹합니다.

 

12)애니메이터(animator)에서 상태를 복사하고(slide_menu_up) Speed에 -1를 입력합니다.

 

13)애니메이터 컨트롤러의 parameters를 추가하고(bool, isHidden) 두개의 애니메이션에 대하여 상태(state)의 transition을 설정합니다.

 

14)두 애니메이션 상태 트랜지션(transition)에 대하여 조건(conditions)을 설정합니다. 스크립트에서 SetBool 함수를 사용하여 상태 transition을 제어합니다.

animator.SetBool("isHidden", true);
animator.SetBool("isHidden", false);

 

15)사이드 메뉴의 버튼 이미지를 설정합니다.

 

16)새로운 게임오브젝트를 생성하고(UIManager) 스크립트를 추가합니다.

 

17)사이드 메뉴 버튼의 온클릭 함수 OnCluck()를 설정합니다.