유니티5 독학하기 그 62번재 걸음-UI디자인하기 part1

안녕하세요?

어느덧 유니티5.x와 함께하는 C# 첫걸음 이라는 책도 거의 다 끝나가서, 이제는 전체 13챕터중에 12챕터를 다 읽어보고 실습하는 데 성공하였습니다. 그래서 이번 포스팅에서는 빨리 지나간다고 해서 12챕터를 다 하고 싶었지만, 너무 내용이 길어서 하는 수 없이 두 부분으로 잘라야 했습니다. 이번 포스팅에서는 NGUI없이 그냥 유니티5내에 있는 UI를 디자인하는 작업을 하였고, 그 내용을 포스팅 하고자 합니다.

먼저 UI와 그 자식 오브젝트인 MenuCanvas라는 게임 오브젝트를 생성하도록 합니다.

그리고 나서 MenuCanvas에서는 Canvas라는 컴포넌트를 추가한 이후의 모습입니다. 위에 있는 Rect Transform이라는 것은 자동으로 따라 왔습니다.

먼저 Canvas컴포넌트의 Render Mode에서는 Screen Space-Overlay라고 지정을 하도록 하고, 그 다음에는 Canvas Scaler라는 컴포넌트를 추가 시키도록 합니다.

그리고 Canvas Scaler는 위 스크린샷과 같이 설정을 해 주도록 합니다.

그리고 나서 위 스크린샷과 같이 게임뷰에서 해상도를 960 X 600 으로 지정을 하도록 합니다.

다음으로는 위 스크린샷과 같이 GameObject라는 항목 아래에서 Event System을 선택하도록 합니다. 이 EventSystem이라는 것은 특별한 기능이 있는 것은 아니고, 같은 EventSystem이 있는 것들 끼리 정보를 주고 받는 용도로 사용이 된다고 합니다. 일단 책에서는 이 이상은 자세한 내용은 나오지 않았습니다.

다음으로는 MenuCanvas라는 게임 오브젝트를 선택하도록 합니다.

여기다가 이번에는 Graphic Raycaster라는 컴포넌트를 추가하도록 합니다. 이 컴포넌트는 캔버스 위에 있는 모든 그래픽 요소를 살펴보고, 사용자의 입력과 겹치는 요소가 있는지를 알아보는 역할을 합니다.

다음으로는 미리 준비가 되어 있는 MenuViewUIElements라는 유니티패키지를 유니티5로 가져 오도록 합니다.

역시 모두 임포트 하도록 합니다.

가져오기가 성공했다면, 다음으로 PlayButton.prefab이라는 프리팹이 들어온 것을 볼 수 있습니다.

그대로 MenuCanvas로 드래그 앤 드롭을 해서 자식 오브젝트로 만들어 주도록 합니다.

작업이 성공하면 씬뷰에서 위 스크린샷처럼 Play라는 버튼이 있는 것을 볼 수 있습니다. 일단 이 버튼 자체는 바로 게임뷰에서 적용되는 것은 아니지만, 일단 여기까지 적용을 해 놓도록 해 보겠습니다. 이게 플레이어 캐릭터의 위치와도 상당히 많이 떨어져 있고, 처음 설치했을 때는 플레이어 캐릭터 보다도 더 컸습니다.

다음으로는 버튼의 컴포넌트입니다. 여기서 Image컴포넌트는 버튼에 배경을 제공하며, Button컴포넌트는 실제 버튼의 역할을 하게 하는데, 우선 위 스크린샷을 보시면 OnClick이 비어 있어서 지금은 이 버튼을 눌러도 아무런 역할도 하지 않습니다.

위 스크린샷을 보시면 +버튼이 있는데, 이걸 눌러서 버튼의 역할을 지정하는 작업을 시작하도록 합니다. 그리고 여기서 비어있는 부분에는 GameManager 게임 오브젝트를 계층뷰에서 끌어와서 놓도록 합니다.

GameManager에서 public으로 접근이 가능하도록 설정이 되어 있는 StartGame()이라는 메소드를 선택하도록 합니다. 이렇게 선택을 해 주면, 앞으로 게임을 시작할 때 키보드 S키를 누르지 않아도 됩니다.

이제 게임을 시작하면, Play라는 버튼이 나와 있는 것을 볼 수 있었고, 실제로 이 버튼을 누르면 플레이어 캐릭터가 앞으로 달려 나가는 것을 볼 수 있었습니다.

이제 게임시작 버튼을 누르면, 이 Play버튼이 사라져야 하는데, 지금은 사라지지 않는 문제점이 있습니다. 그래서 이 작업을 시작하기 위해서 Canvas타입인 광역변수 menuCanvas를 GameManager.cs에 선언하도록 합니다.

그리고 나서, SetGameState에 위 스크린샷과 같이 menuCanvas의 enable여부를 true냐 false냐로 지정을 해 주도록 합니다. 이렇게 하고 나서 스크립트를 저장한 다음에

유니티5로 돌아와서 먼저 GameManager라는 게임 오브젝트를 선택하도록 합니다.

그리고 새로 생긴 menuCanvas라는 항목에는 이전에 추가를 시켜놓은 MenuCanvas라는 게임 오브젝트를 드래그 앤 드롭으로 추가해 놓도록 합니다.

아직 게임에 대한 로고가 없다는 점을 들 수 있는데, 이번에는 예제로 나와 있는 GameLogo라는 유니티 패키지 파일을 추가 하도록 합니다.

역시나 모두 가지고 오도록 합니다.

GameLogo.prefabs가 들어와 있는 것을 확인해 보도록 합니다.

이 로고 역시 메뉴에 있어야 하기에, MenuCanvas라는 게임 오브젝트의 자식 오브젝트가 되도록 GameLogo.prefabs를 드레그 앤 드롭을 해서 추가를 하도록 합니다.

이렇게 해서 씬뷰에서 타이틀까지 그렇싸하게 들어가 있는 것을 볼 수 있습니다. 이게 책이 코딩에만 집중한 책이다 보니, 이래저래 상세한 디자인을 어떻게 하는지에 대해서는 안 나와 있는데, 아마 이 부분 유니티 NGUI 게임 프로젝트라는 책과 같은 다른 책을 봐서 보충해야 하는 부분이 아닌가 합니다. 이것으로 NGUI없이 UI를 디자인하는 파트의 절반이 끝이 났는데, 가까운 시간안에 남은 파트를 포스팅 해 보도록 합니다.