유니티5 독학하기 그9번째 걸음-하루에 한개 챕터를 끝내기는 이제 무리인가 봅니다.

안녕하세요?

유니티5를 독학하면서 [실전! 유니티5로 소셜네트워크 게임 만들기]란 책의 챕터6를 마음같아서는 하루안에 끝내고 싶었습니다만, 현실은 그리 녹녹치 않아서 몇 일에 걸쳐서 겨우 챕터6를 끝낼 수 있으리라 생각이 됩니다. 아무튼 계속 고민해봐야 해답은 나오지 않으니, 실습에 들어가 보도록 하겠습니다.

먼저 타샤렌(Tasharen)사의 홈페이지에 접속해서 NGUI라고 해서 유저 인터페이스(UI)를 만드는 것을 도와주는 에셋인 NGUI를 찾아가 보도록 하겠습니다.

제 경우에는 그 아래에 있는 프리버젼으로 다운로드 하였습니다. 

하드 디스크 드라이브상에 있는 다운로드한 NGUI의 에셋파일을 그냥 더블 클릭만 하면 알아서 유니티5에 인스톨이 다 되었습니다.

유니티5를 실행중에 NGUI의 무료버젼을 다운로드 받아서 실행시켰기 때문에, 여기서는 그냥 위 스크린샷처럼 Import를 누르기만 하면 모든 작업이 완료되었습니다.

실제 유니티5의 맨 윗줄에 있는 메뉴를 보면 NGUI라는 에셋이 설치됨으로써 새로이 생긴 메뉴가 있는 것을 볼 수 있습니다. 다만 책에서 나와 있는 메뉴가 조금 달라서, 실습을 하면서 애를 먹었습니다.

성안당 홈페이지에서 다운로드 받은 예제파일을 그대로 압축을 풀었습니다. 그리고 이걸 이제 유니티5에 추가를 해야 하는데......

일단 어떻게 하면 가장 편한지 몰라서 유니티5의 Project윈도우에서 ui라는 폴더를 생성하고 나서, 일일히 Import New Asset메뉴를 써서 하나하나 가져오도록 하였습니다.

일단 모든 그림을 다 가져오고 난 다음의 모습입니다. 이제 아틀라스라고 해서, 각각 떨어져 있는 이미지를 한 묶음으로 묶는 작업을 시작해야 한다고 합니다.

책에서와 달리 그냥 NGUI메뉴에서 다음과 같이 볼 수 있는 메뉴를 눌러서 실행 시키도록 합니다.

그런데 여기까지 와서 이제서야 깨닫은 것이지만, 예제 파일을 잘못 선택하였습니다. 그래서 하는 수 없이 여기에 있는 내용을 다 지우고 새로 성안당 홈페이지에서 예제파일을 다운로드 받아서 풀어야만 했습니다.

그리고 이제서야 알아낸 것이지만, 일일히 유니티5에 Import New Assets를 할 필요없이, 그냥 프로젝트가 설치된 폴더에 보면 Assets라는 폴더가 있습니다. 여기다가 폴더하나 새로 만들고, 거기에 드래그 앤 드롭으로 한꺼번에 올리면 해결이 되는 문제였습니다.

이번에야 말로 제대로 아틀라스(Atlas)를 실행시킨 다음에, 방금 생성한 ui폴더안의 이미지 파일들을 한꺼번에 선택하면-Shift+클릭으로 모두 선택을 하면 자동으로 위 스크린샷의 우측에 있는 아틀라스뷰에 이미지파일이 들어가는 것을 볼수 있습니다. 그러면 이제 초록색의 Create라는 버튼을 눌러서 아틀라스 파일을 생성하도록 합니다.

다음으로 일어나는 변화는 이렇게 Add/Update All이라는 버튼이 나옵니다. 이 버튼을 눌러서 방금전에 선택한 이미지 파일을 모두 다 등록이 되도록 해 줍니다.

완성이 되면, 위 스크린샷에 보시는 것처럼 New Atlas라는 것으로 3개의 파일이 생성되는 것을 보실 수 있습니다. 아직 저로서는 저 3개의 파일이 각각 무슨 역할을 하는 지를 모르겠습니다.

다음으로는 Project 윈도우의 Create버튼을 눌러서 Prefab이라는 것을 만들도록 합니다. 제 경우에는 Project윈도우에서 가장 상위에 있는 Assets폴더에서 마우스를 우클릭해서 띄운 메뉴를 이용해서 Prefab을 생성하였습니다.

최종적인 결과물로, UI라는 프리펩 파일이 생성되어 있는 것을 볼 수 있습니다. 이제 다음은 본격적인 유저 인터페이스를 작업하는 작업으로 갑니다.

NGUI의 메뉴를 열어서, Open the UI Wizard를 클릭하도록 합니다.

이후에 뜨는 UI Tool이라는 것을 그대로 Create Your UI라는 것을 눌러서 작업을 시작하도록 합니다.

유니티5의 Hierarchy윈도우를 보면, 위 스크린샷과 같이 UI Root(2D)라는 것이 생성된 것을 볼 수 있습니다. 이제 다음 작업으로 스프라이트를 생성하러 가겠습니다.

NGUI의 Create a Sprite메뉴를 눌러서 스프라이트를 생성하도록 하겠습니다.

스프라이트 생성 직후의 유니티5의 화면입니다. 일단 책에서 이야기하기를 스프라이트로 정해지는 이미지는 랜덤이라는 데 아마 아틀라스에 추가시킨 이미지 중에서 랜덤으로 정해지는 것 같습니다. 이제 책에서 했는 것과 같이 rank라는 이미지를 띄우도록 해보겠습니다.

위 스크린샷은 Hierarchy윈도우에서 sprite를 선택한 상태에서 띄워진 Inspector윈도우입니다. 여기서 위 스크린삿에서 붉은 밑줄을 친 곳을 눌러서 아래와 같은 화면이 되도록 합니다.

위 스크린샷을 보시면 New Atlas에 추가되었던 이미지 파일이 뜨는 것을 볼 수 있습니다. 여기서 rank라는 이미지 파일을 골라서 바꾸도록 합니다.

책에서는 다르게 설명이 되어 있어서 불안한 면이기는 합니다만, 제 경우에는 NGUI와 유니티5의 세부적인 버젼이 바뀌어서 그런지 몰라도, 하는 수 없이 Make Pixel-Perfect를 선택하여서 rank라는 이미지가 원래 가지고 있는 Scale인 800X480에 걸맞는 사이즈로 띄우도록 해야 했습니다.

이제 다음은 해상도를 맞추는 작업에 들어가 보도록 하겠습니다.

일단 해상도는 이전에 보였는 ShooterGame의 800X480입니다. 하지만, 해상도가 맞지 않는 것을 볼 수 있는데, 위 스크린샷은 먼저 Hierarchy란에 있는 Scale Style이라는 항목을 변경해야 합니다. 그런데 여기도 책에서 설명하는 것과 100% 맞지 않아서 mobile이 관련이 되어 있는 스타일을 선택하자 그다지 게임화면의 해상도에 rank라는 배경화면이 제대로 맞지 않았습니다.

Pixel Perfect를 선택해서 제대로 맞추고 난 다음의 화면입니다. 이렇게 제대로 화면을 맞추고 나서 해상도를 맞출 수 있었습니다. 이 작업은 이전에 유니티5의 기본 기능을 가지고서 할 때 보다는 더 간단하다는 생각이 들었습니다. 일단 2/5정도는 했다는 생각이 듭니다. 하지만 남은 부분은 코딩을 많이 하는 부분이 많아서 얼마나 시간이 더 걸릴지 모르겠습니다.