유니티 강좌2014. 4. 9. 06:00

(5) NGUI 기초 실습


먼저 'Chapter 2' 프로젝트에서 'Practice NGUI' Scene을 하나 생성합니다.

그리고 Hierarchy창에서 Main Camera를 지웁니다. (NGUI에서 2D UI Root을 생성했을 때 자동으로 생성되는 2D화면 용 카메라를 사용할 예정.)

그리고 NGUI > Create a New UI 메뉴를 클릭해서 UI Tool 창을 엽니다.


[그림 4-5]


UI Tool 창이 열렸으면 거기에서 기본으로 설정되어 있는 값( Layer = Default, Camera = Simple 2D) 그대로 Create Your UI 버튼을 눌러서 기본적인 UI Root를 Hierarchy에 생성합니다.

   

[그림 4-6]


그러면 Hierarchy창에 다음과 같이 4개의 오브젝트가 생성되어 있는 것을 볼 수 있습니다.


[그림 4-7]


다음으로 메뉴 NGUI > Create a Widget 메뉴를 클릭해서 Widget Tool창을 엽니다.


[그림 4-8]


[그림 4-9]


Widget 을 만들기 위해서는 먼저 Image Map. 즉, Atlas와 Font가 필요합니다.

이번 순서에서는 NGUI에서 기본으로 제공하는 Atlas와 Font를 사용해보도록 하겠습니다.


[그림 4-10]


[그림 4-10]에서와 같이 Project창에서 NGUI > Examples > Atlases > SciFi 폴더를 열어서 그 안에 있는 SciFi Atlas Prefab을 클릭 & 드래깅하여 Widget Tool창의 Atlas에 집어 넣습니다.

그리고 마찬가지로 Font 또한 SciFi Font –Normal을 클릭 & 드래깅하여 Widget Tool창의 Font에 집어 넣습니다.

   

Atlas와 Font가 지정되면, Widget이 생성 가능하다는 의미로 Add 버튼에 녹색 불이 들어옵니다.

우선 Template을 Button으로 지정한 뒤에 Add To 버튼을 눌러서 Panel의 하위 객체로 버튼을 하나 만들겠습니다.


[그림 4-11]


버튼 생성에 성공했다면, 아래의 그림과 같이 Scene창과 Game창에 버튼이 생성된 것을 확인할 수 있습니다.


[그림 4-12]


※ Widget을 생성할 때, Add To 버튼 옆에 있는 객체를 주목하시길 바랍니다.

위의 과정에서는 결과적으로 Add To [Panel]. 즉, Panel 오브젝트의 하위 객체로 생성이 되었지만, 그 이후로 Widget을 생성할 때, Add To 버튼 옆에 있는 객체를 확인하지 않으면, 버튼 안에 버튼을 또 넣는 등의 실수를 하게 됩니다.

   

다음으로는 본격적으로 UI를 더 만들어 보기에 앞서, UI Root (2D), Camera, Anchor, Panel, 이 4가지 오브젝트들의 중요한 기능을 짚어보도록 하겠습니다.

   

1) UI Root (2D)


오브젝트를 클릭해보면 UIRoot (Script)라는 컴포넌트가 들어가 있는 것을 확인할 수 있습니다.


[그림 4-13]


컴포넌트의 내용을 살펴보면 UIRoot이라는 Script 파일이 연결되어 있고 그 아래로 Automatic 선택 여부 항목과 Manual Height라는 수치가 보입니다.

   

Manual Height는 실제로 Out Put이 이루어질 Game 화면의 높이 해상도가 현재 얼마의 값인지 표시해주는 곳입니다.

   

Automatic은 실제로 Out Put이 이루어질 Game 화면의 높이 해상도에 따라서 변화될 수 있는 내부에 있는 UI 사이즈를 개발자가 셋팅한 사이즈가 시각적으로 항상 같은 사이즈 일 수 있도록 만들어준다는 의미입니다.

반대의 뜻으로 해석하자면, Automatic이 선택되어 있지 않으면, 화면의 높이 해상도가 바뀌면 안에 들어있는 UI들의 사이즈들도 변경된다는 의미입니다.

   

간단히 테스트를 한 번 해보겠습니다.

Manual Height 수치를 보면서 Game창의 높이 해상도를 낮게 맞춘 뒤에AutoMatic 체크를 풀고 화면 해상도를 높게 맞춰보면, 버튼의 크기가 커지는 것을 볼 수 있습니다.

반면에 AutoMatic을 체크 한 상태에서 화면의 높이를 변경시켜도 버튼의 크기는 변하지 않고 일정한 것을 볼 수 있습니다.


[그림 4-14]


(Height값에 따른 버튼 크기 변화)

   

이러한 화면의 높이 해상도에 따른 UI 사이즈 조절이 UIRoot (Script)오브젝트에서 대표적으로 하는 기능입니다.

   

다음 장에서는 Camera에 대해서 알아보겠습니다.



스마트 앱 전문 교육기관 스마트아카데미가 추천하는 안드로이드앱(1)

스마트 폰 삶 속으로 들어오다

정부 벤처창업지원 통해 경제 활성화 나선다

3D프린팅과 스마트네트워크는 우리생활에 어떤 영향을 미칠까?

스마트안경 웨어러블 대세되나 - 스마트아카데미

한국의 구글 핸드스튜디오 안준희 대표 - 스마트아카데미

한국의 구글 핸드스튜디오 - 스마트아카데미 (2)


   

Posted by 알 수 없는 사용자