유니티 강좌2014. 6. 3. 17:04

6. 버튼으로 오브젝트 움직이기

 

   (5)  Label 이동 FSM 만들기 – Left Button

Hierarchy창에서 ‘Left Button’을 선택하고, Playmaker Editor(상단의 PlayMaker > PlayMaker Editor 메뉴를 사용해서 열 수 있습니다.)에서 마우스 우 클릭 > Add FSM 클릭을 하여 FSM을 생성합니다.

그리고, 생성한 FSM의 이름을 ‘FSM MOVE TO LEFT’라고 지어주고, State 1의 이름을 ‘Listen Click’ 이라고 변경해줍니다.

 

[그림 6-6]

 그리고 버튼에 있는 UIEvents To Playmaker FSM 컴포넌트의 OnClick 이벤트를 사용해야 하므로, Playmaker EditorEvents탭에 있는 Add Event 칸에 ‘OnClick’(대소문자 정확하게)을 타이핑 후, Enter키를 눌러서 이벤트를 생성합니다.

 

[그림 6-7]

 

     UIEvents To Playmaker FSM 컴포넌트는 NGUI로 생성된 오브젝트가 특정한 상황일 때, 연결된 FSM에 상황에 맞는 Event 명이 있으면, 그 이벤트를 발동시키는 역할을 합니다.

지금의 예제에서는 버튼을 클릭해서 Label을 움직여야 하므로, 버튼 오브젝트가 클릭이라는 상황일 때, UIEvents To Playmaker FSM 컴포넌트에서 ‘OnClick’이라는 Event 명을 찾아서 발동시킬 수 있게 해야 하기 때문에 ’Listen Click’ State‘OnClick’ Event를 만들어 넣은 것입니다.

 

Playmaker Editor창에서 ‘Listen Click’ State를 마우스 우 클릭했을 때 나오는 Add Transition 에서 방금 생성한 ‘OnClick’ 이벤트를 찾아 연결시켜줍니다.

 

[그림 6-8]

  Playmaker Editor창의 비어 있는 부분을 마우스 우 클릭 > Add New State 클릭을 해서 새 State를 만들고 State 이름을 Move To Left 라고 지어줍니다. 그리고 ‘Listen Click’ State ‘OnClick’ 이벤트를 클릭 & 드래그해서 나온 이벤트 경로 화살표를 ‘Move To Left’ State에 연결시켜서, ‘OnClick’ 이벤트 타겟이 ‘Move To Left’ State가 되도록 지정해줍니다.

 

‘Move To Left’ State를 우 클릭했을 때 나오는 Add Transition 에서 FINISHED를 찾아 클릭해서 이벤트로 등록해준 뒤, FINISHED이벤트의 경로 화살표를 ‘Listen Click’ State에 연결시켜줍니다.

 

[그림 6-9]

 

‘Move To Left’ State를 선택하고, Action Brower 버튼을 클릭해서 iTween > iTween Move Add 액션을 찾아서 더블 클릭하여 ‘Move To Left’ State에 추가합니다.

  

[그림 6-10]

 

‘Move To Left’ State를 선택하고 Playmaker Editor창의 State탭을 보면, iTween Move Add 액션이 State에 들어가 있는 것을 볼 수 있습니다.

     iTween Move Add 액션은 오브젝트를 움직이는 액션 중 하나로써 현재의 오브젝트의 위치에서 특정 Vector3 값을 더하거나 빼는 것으로 이동시킬 때, 시간이나 속력을 지정하고, 오브젝트가 움직이는 방향으로 자연스럽게 턴을 할 수 있는 기능까지 갖춘 고급액션입니다.

처음에 iTween Move Add 액션을 보면 움직일 Game ObjectUse Owner로 되어 있는데, 이것을 클릭해서 Specify Game Object로 변경시켜줍니다. (움직여야 하는 대상이 자신이 아니라 타겟으로 한 오브젝트이기 때문입니다.)

그리고 아래에 None (GameObject)라고 붉은색 칸이 나타나면, Hierarchy창에서 움직여야 할 Label을 찾아서 드래그인 하여 넣습니다.

 

[그림 6-11]

 

 아래로 내려가보면 Vector라는 항목이 있는데, 이 항목은 위에서 설정한 GameObject를 어느 방향으로 얼만큼 이동시킬 것인지 지정하는 부분입니다.

우선 옆에 줄무늬 2개가 있는 버튼을 눌러서 Use Variable 상태를 Off시킵니다. 그리고 아래에 나타난 X, Y, Z 값을 입력하는 곳에서 X-0.5를 입력합니다.

 

 

[그림 6-12]

 

, x축 방향으로 -0.5만큼 이동시키겠다는 의미입니다. 아래로 내려가 Time에는 0.5를 입력하고, Look At은 사용하지 않을 것이므로 체크가 해제되어 있는지 확인을 합니다. 그리고 Events에서 Finish EventFINISHED로 설정해주고 세팅을 마칩니다.

 

 [그림 6-13]

 

      Time에 넣은 0.5의 의미는 0.5초 동안 Vector에 입력된 값만큼 이동시키겠다는 의미입니다.

     Look At을 사용하게 되면, 버튼이 움직이면서 우리가 보고 있는 버튼의 면이 -0.5지점의 방향(좌측방향)을 바라보도록 회전을 하게 됩니다.

  그렇게 되면 버튼이 옆으로 돌아가서 클릭을 하지 못하는 사태가 발생하므로 사용하지 않는 것입니다.

 

마지막으로 Hierarchy창에 있는 ‘Left Button’을 클릭하고 Inspector창에서 UIEvents To Playmaker FSM (Script) 컴포넌트를 찾은 뒤, Target FSM에서 [None(Play maker FSM)]이라고 되어 있는 곳에 Hierarchy창에 있는 ‘Left Button’을 드래그하여 넣어줍니다.

 [그림 6-14]

 이제 플레이 버튼을 눌러서 ‘Left Button’을 클릭했을 때, 어떤 현상이 일어나는지 확인해보겠습니다.

 

[그림 6-15]

 

 이 그림과 같이 가운데 있던 Label이 좌측으로 잘 이동을 했다면 정상입니다.

Tip. 잘 되지 않을 경우, 다음 항목을 체크해보시길 바랍니다.

 1)     ‘Left Button’ 오브젝트에 UIEvents To Playmaker FSM (Script) 컴포넌트가 있어야 합니다.

 2)     ‘Left Button’ 오브젝트에 들어있는 ‘FSM MOVE TO LEFT’ FSM 안에서 ‘Listen Click’에 설정되어 있는 이벤트의 명칭이 대소문자까지 정확하게 UIEvents To Playmaker FSM (Script) 컴포넌트에 있는 On Click Event와 연결되는 String(‘OnClick’)과 일치해야 합니다.

 3)     iTween Move Add 액션은 ‘Move To Left’ State 안에 있어야 합니다.

 4)     iTween Move Add 액션의 설정 값들이 잘못 들어간 부분이 없어야 합니다.

 


 


 

 

Posted by 알 수 없는 사용자
유니티 강좌2014. 6. 2. 15:09

 6. 버튼으로 오브젝트 움직이기

 

  (3)  UI Root (2D) 생성

UI Tool(상단 메뉴의 NGUI > Create a New UI로 오픈)에서 Create Your UI 버튼을 눌러서 UI Root (2D), Camera, Anchor, Panel 오브젝트를 생성합니다.

생성된 ‘Camera’ 오브젝트의 Camera 컴포넌트에서 Clear FlagsSolid Color로 설정하고 Background 색상을 검정색으로 변경합니다.

 

[그림 6-2]

 

(4)  Label과 버튼 생성

Widget Tool(상단의 NGUI > Create a Widget 메뉴로 오픈)에서 AtlasSciFi Atlas, 폰트를 SciFi Font – Normal로 지정하고, 앞서 생성한 ‘Panel’의 하위객체로 Label 1개와 버튼 2개를 생성합니다.

 

(SciFi AtlasSciFi Font – Normal Project창의 NGUI > Examples > Atlases > SciFi에서 찾을 수 있습니다.)

 

생성된 Button 2개의 이름을 각각 ‘Left’‘Right’로 변경시키고, Label의 내용을 자유롭게 한 두 개의 단어 구성으로 변경해줍니다.

 

 

[그림 6-3]

 

그리고 버튼 2개의 위치를 아래의 그림처럼 적절한 위치에 배치시켜줍니다.

(그림에서와 같이 Hierarchy창에서 오브젝트 이름을 구분하기 쉽게 바꿔주는 것을 습관화 하는 것이 좋습니다.)

 

그리고 앞서서 다운받아두었던 UIEventsToPlaymakerFSM.cs Project창에 드래그인 하여, Asset으로 등록합니다.

[그림 6-4]

Project창에서 UIEventsToPlaymakerFSM.cs를 드래깅하여 Hierarchy창에 있는 버튼에 각각 한번씩 넣어서 컴포넌트로 등록합니다.

 

[그림 6-5]

※ Project 창에서 오브젝트의 Inspector 창에 드래그인 할 때는, Add Component 버튼의 아래쪽 위치로 드래그인을 해야 컴포넌트로 넣을 수 있습니다 

Posted by 알 수 없는 사용자
유니티 강좌2014. 6. 2. 14:59

6. 버튼으로 오브젝트 움직이기

 

<만들 예정인 결과물>

[그림6-1]


(1) NGUI Button과 FSM


NGUI로 생성한 Button을 조작했을 때, Playmaker의 FSM을 통해서 특정한 행동을 일으키기 위해서는 NGUI와 Playmaker를 연결시키기 위한 별도의 스크립트가 필요합니다.

그 스크립트의 이름은 ‘UIEventsToPlaymakerFSM.cs’이며 Playmaker를 제작한 Hutonggames社에서 제공하는 스크립트 입니다.

UIEventsToPlaymakerFSM.cs 스크립트를 구하기 위해서는 Hutonggames 홈페이지(http://www.hutonggames.com)에서 접속하여 해당 스크립트를 검색하여 구하거나, IdeaLink 홈페이지(http://www.idealink.kr)에서 Grups 메뉴의 Smart Academy Board를 클릭해서 게시물들을 살펴보면, 그 중에 UI Event To PlayMaker라는 게시물이 있는데, 그 게시물을 안에 있는 UIEventsToPlaymakerFSM.cs압축파일을 다운 받으시면 됩니다.


(2) 씬 만들기


이전 강좌에서 사용했던 ‘NGUI Control Sample’프로젝트에서 새로운 씬(File > New Scene)을 엽니다.
‘Main Camera’를 지우고 ‘Label Move’라는 이름으로 씬을 저장(Ctrl+S)합니다.
(저장 경로는 NGUI Control Sample > Asset > Scenes 폴더로 지정해줍니다.)

그리고 Playmaker 패키지 파일을 Import 시켜서 설치해줍니다.
(상단 메뉴의 Asset > Import Package > Custom Package를 클릭해서 Import 시킵니다.)

Posted by 알 수 없는 사용자
유니티 강좌2014. 5. 28. 15:22

(7) 버튼 넣기 –Button


Widget Tool에서 Template을 button으로 지정하고, Background도 Button인 상태로 ‘Anchor (Center)’의 하위에 있는 Panel에 Button을 2개 생성시킵니다. 

[그림 5-20]

 

생성된 버튼 중 하나의 x, y, z 포지션은 -95, -135, 0으로 설정하고, 다른 하나의 x, y, z포지션은 95, -135, 0으로 설정합니다.
그리고 Game 화면을 살펴보면, 처음에 만들려고 목표로 삼았던 이미지와 같은 화면이 되어 있는 것을 확인하실 수 있을 것입니다. 


[그림 5-21]

 

생성한 Button들의 Inspector창을 보면, 클릭을 감지하기 위한 Box Collider와 UI Button (Script), UIButton Scale (Script), UIButton Offset (Script), UIButton Sound (Script) 컴포넌트가 있는 것을 볼 수 있습니다.


이 컴포넌트들에 대해서 간략하게 언급을 하자면 다음과 같습니다.


- UI Button (Script): 버튼이 마우스 오버 상태일 때, 그리고 클릭이 되었을 때, 버튼의 색상 위로 색상을 덧대는 효과를 주는 컴포넌트 입니다.


- UIButton Scale (Script): 버튼이 마우스 오버 상태일 때, 그리고 클릭이 되었을 때, 버튼의 크기가 변하게 만들어주는 컴포넌트 입니다.


- UIButton Offset (Script): 버튼이 마우스 오버 상태일 때, 그리고 클릭이 되었을 때, 버튼의 위치가 변하게 만들어주는 컴포넌트 입니다. 생성시 기본적으로 클릭 했을 때만, 오른쪽 아래로 살짝 움직이도록 설정되어 있습니다.


- UIButton Sound (Script): 버튼을 클릭했을 때, 마우스 오버했을 때, 오버상태가 끝났을 때, 등 의 이벤트가 발생할 때 지정한 사운드를 플레이해주는 기능을 가진 컴포넌트 입니다.

이 컴포넌트들의 값을 다양하게 바꿔보면서 버튼의 컴포넌트 구성에 대해서 탐구해보시길 바랍니다.
그리고 버튼의 하위 객체로 ‘Background’라는 이름을 가진 Sprite 오브젝트와 Label 오브젝트가 있는 것을 볼 수 있습니다.
버튼의 하위 객체에 있는 오브젝트들의 컴포넌트를 다른 값으로 바꿔가며 버튼이 어떻게 바뀌는지 탐구해보시길 바랍니다.

이것으로 NGUI 기초 연습은 끝났습니다.
다음 강좌에서는 Playmaker와 NGUI를 접목시켜서 버튼을 다뤄보도록 하겠습니다.

 

 

※ 이번 강좌에서 만든 프로젝트와 Scene을 이후에 사용할 예정이니 잘 저장해주시길 바랍니다 

 

 

 

Posted by 알 수 없는 사용자
유니티 강좌2014. 4. 23. 06:00

(6) 다양한 색을 가진 글자 추가하기


Widget Tool에서 Template을 Label로 지정하고, 'Anchor(Center)'의 하위에 있는 Panel에 생성시킵니다.

생성된 'Label'의 이름을 'Label (Content)'로 변경하고, 기존에 'Anchor(Center)' > Panel 하위에 있던 'Label'의 이름은 'Label (Title)'로 변경합니다.


[그림 5-14]



그리고 'Label (Title)'의 y 포지션 좌표를 140으로 변경하고, x, y 사이즈를 30으로 변경시킵니다.


[그림 5-15]


   

'Label (Content)'의 x, y 포지션 좌표를 -195, 100으로 변경합니다.


[그림 5-16]



그리고, 아래로 내려가서 Pivot을 'Top Left'로 변경해줍니다.


[그림 5-17]


   

'Label (Content)'의 UITiled Sprite (Script) 컴포넌트에서 내용을 자유롭게 작성합니다.

 

<결과화면>


[그림 5-18]


   

※ 결과화면에서 색이 들어간 문장.


'[EAFF00]NGUI's[-] labels can have [FF0000]embedded[-] [0090ff]colors[-] .

 

<색상 별 16진수 값>


[그림 5-19]





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

차량에서 아이폰을 쓴다면 - 스마트 아카데미

국내기업 개인정보유출 정리 - 스마트 아카데미

모바일게임 플랫폼 시장 춘추전국시대 - 스마트아카데미

스타트업 얼라이언스 출범 - 스마트 아카데미

SK텔레콤 서비스 장애 보상안내발표 - 스마트아카데미

Cre8tive ux 훈련 강좌 2014년 4월12일 개강[토요반]


   

Posted by 알 수 없는 사용자
유니티 강좌2014. 4. 22. 06:00

(4) 글씨 넣기 – Label


화면 내에 글씨를 넣기 위해서는 Label이 필요합니다.


Widget Tool에서 Template을 Label로 지정하고, 두 개의 Anchor 오브젝트의 하위에 있는 Panel에 Label을 하나씩 생성해줍니다.


[그림 5-10]


   

상단 바에 들어간 Label의 y 포지션을 -15로 변경하고, UILabel (Script)에서 적고 싶은 말을 적어봅시다.


[그림 5-11]


   

그리고, 화면 중앙에 들어간 Label도 UILabel (Script)에서 적고 싶은 말을 적어봅시다.

   

단, 여기서 주의해야 할 점은 현재 사용되고 있는 Font가 한글은 지원하지 않기 때문에 한글을 적어서는 안됩니다.


[그림 5-12]


   

※ 연습해보기.


- 결과 화면이 정상적으로 나타났다면, Label을 더 만들어도 보고 사이즈와 색상을 변경해봅시다.


- 만약 Widget Tool에 있는 Add To버튼이 활성 되어있지 않은 상황이 발생했다면, Atlas와 Font가 제대로 지정이 되어 있는지 확인해봅시다.


- 다른 폰트를 사용해서 Label을 만들어봅시다.


- 원한다면 글자별로 색을 바꾸어 줄 수 있습니다. RrGgBb 포맷의 색, 즉 예를 들면 [FF0000]을 입력하면 색이 바뀝니다. 그리고 색을 바꾸고 싶은 글의 마지막에 [-]을 입력해주면 다시 원래의 색으로 바꾸어 줄 수 있습니다.

   


(5) 배경화면 꾸미기


Widget Tool에서 Template을 Tiled Sprite로 지정하고, Sprite는 Honeycomb를 선택하여 'Anchor(Center)'의 하위에 있는 Panel에 생성시킵니다.


생성된 'Tiled Sprite (Honeycomb)'의 Inspector창에 있는 Transform에서 x, y, z 사이즈를 500, 500, 1로 변경합니다.


그리고, UITiled Sprite (Script) 컴포넌트에서 Depth 값을 0으로 바꿔서 'Sprite (Dark)'와 동일한 Depth 수준으로 만들어 준 뒤에, 'Sprite (Dark)'의 Depth를 -1로 만들어줍니다.


[그림 5-13]


(그리고 'Tiled Sprite (Honeycomb)'의 UITiled Sprite (Script) 컴포넌트에서 Color Tint를 조절해서 색을 너무 밝지 않게 적당히 조정해보자.)



창의융합형 교육이 대세다.

스마트아카데미 책 소개 - 개발자, 나를 말하다

스마트아카데미-시설 소개

창조경제시대 왜 코딩교육인가 - 스마트 아카데미

스마트 아카데미 창의인재 교육 6개월 과정 등록안 -스마트 앱 전문 교육기관

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

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


Posted by 알 수 없는 사용자
유니티 강좌2014. 4. 21. 06:00

5. NGUI로 간단한 화면 꾸미기


이제 본격적으로 NGUI를 이용한 UI화면 구성을 해보겠습니다.

아래 그림은 이번 예제에서 완성하려고 하는 화면구성입니다.


[그림 5-1]


'NGUI Control Sample'이라는 이름으로 새로운 프로젝트를 만들고, Project창에 Scenes 폴더를 만든 뒤에 'Main'이라는 이름으로 Scene을 저장합니다.

   

그리고 Main Camera를 삭제하고, NGUI 패키지를 Import 시켜줍니다.

   

< 제작 준비물 >

Sprite(Dark) * 4, Label *3, Button * 2 Sprite(Light) * 1, Tiled Sprite * 1

※ Sprite : GUI의 기본인 사각형. Dark, Light 등 사각형의 형태를 변경 가능.

※ Label : 화면에 보일 Text, 원하는 대로 Text 변경 가능.

   

(1) 뒷 배경 만들기 – Sprite(Dark)


앞서 만들어둔 'Main' Scene에 먼저 UI Widget을 생성할 수 있도록 셋팅 환경인 UI Root, Camera, Anchor, Panel이 Hierarchy에 존재할 수 있도록, 상단의 메뉴 NGUI > Create a New UI 메뉴를 통해 네 개의 객체를 생성합니다.

그리고 상단의 NGUI > Create a Widget 메뉴를 클릭해서 Widget Tool 창을 오픈한 뒤, Atlas에 SciFi Atlas를 Font에 SciFi Font – Normal을 설정해 주고, Template을 Sprite형식으로 하고, Sprite에 Dark이미지를 설정하여 Panel에 Add To 버튼을 통해 Sprite (Dark) 객체를 생성합니다. (4강의 (5)NGUI 기초 실습 참조.)


[그림 5-2]


[그림 5-3]


그리고 방금 생성한 Sprite (Dark) 객체의 Inspector창에서 Scale값을 조정합니다. (X = 500, Y = 500)


[그림 5-4]


   

이로써 Background가 세팅되었습니다.

그 위에 다른 이미지들을 올려보도록 하겠습니다.

   

(2) 색깔 있는 사각형 만들기 – Sprite(Dark)


앞서서 Sprite (Dark)를 생성했던 것과 마찬가지로 Template을 Sprite형식으로 하고, Sprite에 Dark이미지를 설정하여 Panel에 Add To 버튼을 통해 Sprite (Dark) 객체를 3개 생성합니다.

생성한 3개의 Sprite의 크기와 위치를 Transform을 통해서 자유롭게 원하는 대로 조정해주고, Inspector에 있는 UISprite (Script) 컴포넌트에서 Color Tint 변경을 통해 원하는 색으로 변경시켜 준 뒤, 색상에 맞춰서 오브젝트의 이름을 바꿔줍니다.


[그림 5-5]


※ 위의 그림처럼 화면에서 겹쳐져 있는 Sprite들은 UISprite (Script) 컴포넌트에 있는 Depth 기능의 수치조정을 통해 어떤 Sprite 더 위에 나오게 만들지 결정할 수 있습니다.

   

(3) 상단 바 만들기 – Sprite(Light)


상단 메뉴에서 Game Object > Create Empty를 클릭해서 빈 오브젝트를 생성합니다.

생성한 빈 오브젝트의 이름을 'Anchor(Top)'으로 변경하고, Inspector창에 있는 Transform 정보에서 포지션 x, y, z 값을 모두 0으로 설정하고, 사이즈 x, y, z, 값은 모두 1로 설정합니다. (기존에 있던 'Anchor'오브젝트의 이름은 'Anchor (Center)'로 변경합니다.


[그림 5-6]

   

'Anchor(Top)' 오브젝트의 Inspector창에서 Add Component 버튼을 클릭해서 NGUI > UI > Anchor를 선택하여 UIAnchor (Script) 컴포넌트를 추가합니다.

그리고 UIAnchor (Script) 컴포넌트의 Side 기능에서 Top을 선택합니다.


[그림 5-7]


Hierarchy창에서 생성한 'Anchor(Top)' 오브젝트를 'Camera' 오브젝트에 드래그인 하여 'Camera'의 하위 객체로 만들어 줍니다.


※ 'Anchor (Top)' 오브젝트를 'Camera'의 하위 객체로 만들어 준 뒤에, Transform의 x, y, z 사이즈 값이 변경되어 있다면, 다시 모두 1로 고쳐줍니다.

   

그리고, 상단 메뉴의 NGUI > Create a Panel를 클릭해서 Panel을 하나 생성합니다.

생성한 Panel의 Inspector창에 있는 Transform 정보에서 포지션 x, y, z 값을 모두 0으로 설정하고, 사이즈 x, y, z, 값은 모두 1로 설정한 뒤, 생성한 Panel을 'Anchor(Top)' 오브젝트에 드래그인하여 'Anchor(Top)' 오브젝트의 하위객체로 만들어줍니다.

  

[그림 5-8]


Widget Tool창에서 Template을 Sprite로, Sprite을 Light로 지정하여 Anchor(Top) 오브젝트의 하위에 있는 Panel에 'Sprite(Light)'를 추가합니다.

   

생성된 'Sprite(Light)'의 Inspector에 있는 Transform에서 포지션 x, y, z 값을 0, -20, 0으로 설정하고, 사이즈 x, y, z, 값은 500, 40, 1로 설정해줍니다.

그리고, Inspector창에 있는 UISprite (Script) 컴포넌트에서 Color Tint 변경을 통해 Sprite색상을 원하는 색으로 변경시켜 준 뒤, 색상에 맞춰서 오브젝트의 이름을 바꿔줍니다.


[그림 5-9]


   

스마트 시장에서 성공하기 위한 당신의 첫 걸음스마트 아카데미

스마트 아카데미 '스마트 앱 개발' 교육과정 안내

스마트 앱 개발 학원 국비지원 안내

스카이 아카데미 취업 정보 - 선데이토즈 이야기

창의인재과정 안내

크리에이티브 UX교육 훈련과정 안내

우아한 형제들 김봉진 대표 - 앱 개발 전문 학원 스마트 아카데미


Posted by 알 수 없는 사용자
유니티 강좌2014. 4. 16. 06:30

3) Anchor


Anchor는 화면에 구성되는 GUI 포지션의 제로 좌표(x=0, y=0, z=0) 값의 위치를 카메라를 기준으로 어디로 할 것인지 지정해줄 수 있는 역할을 한다고 앞서서 언급을 한 적이 있습니다.

이 역할을 'Anchor'오브젝트가 수행할 수 있도록 해주는 것이 UIAnchor (Script) 컴포넌트 입니다.


[그림 4-29]

Side


하위에 배치될 오브젝트들의 제로 좌표를 어디에 위치 시킬지 정할 수 있으며, 이러한 점을 잘 이용하면, 화면 사이즈나 비율이 다른 여러 플랫폼에서 효과적인 UI배치를 할 수 있습니다.

(Side 기능을 변경시켜 보면서 Game창에서 하위 객체의 위치가 어떻게 변하는지 한 번 살펴보시기 바랍니다.)

Side 기능을 활용할 경우 Half-pixel 항목 체크를 사용하는 것이 좋습니다.

항목을 체크함으로써 윈도우 시스템에서 Direct x 9.0 버그로 나타나는 반 픽셀 화소가 깨지는 것을 완화할 수 있습니다.

   

Depth Offset


깊이가 계산 된 점에 추가 조정하는 데 사용됩니다. 그것은 원근법 기반의 카메라에 주로 유용합니다. 이 값은 Camera 컴포넌트의 clipping planes의 Near과 Far에서 사용되는 것과 같은 좌표계입니다.

   

Relative Offset


화면의 가로 또는 높이를 기준으로 객체를 배치 할 수 있습니다. X * Screen.width, Y * Screen.height, 이 두 값이 앵커의 마지막 위치에 더해집니다.

   

4) Panel


Panel 오브젝트는 UIPanel을 가지고 있습니다. UIPanel은 모든 UI 위젯(버튼, 창, 스크롤바 등)들을 자식으로 가지는 컨테이너 입니다.

판넬은 이후에 예제를 다루면서 역할에 대해서 더 자세하게 알아보겠습니다.


다음 5 장에서는 NGUI로 간단한 화면 꾸미기에 대해서 알아보겠습니다.


스마트 시장에서 성공하기 위한 당신의 첫 걸음스마트 아카데미

스마트 아카데미 '스마트 앱 개발' 교육과정 안내

스마트 앱 개발 학원 국비지원 안내

K팝 홀로그램 상설공연장 개소

스카이 아카데미 취업 정보 - 선데이토즈 이야기

창의인재과정 안내

미래창조과학부 창조경제 실현


Posted by 알 수 없는 사용자
유니티 강좌2014. 4. 15. 07:00

2) Camera


Projection


카메라가 화면을 보는 원근 요소를 결정할 수 있는 기능을 가지고 있습니다.

NGUI에서는 대부분의 UI에서 그렇듯 원근이 필요 없기 때문에, Orthographic을 기본으로 지정하고 있지만, 일반적인 카메라들은 원근감이 필요하기 때문에 생성시 기본으로 Perspective를 기본으로 지정합니다.

   

Clips Planes


"근접(Near)"과 "원거리 클립 평면(Far Clip Plane)" 속성은 카메라의 뷰가 시작되고 끝나는 지점을 결정합니다. 평면들은 카메라의 방향에 수직으로 놓여있고 그것의 위치에서 측정이 됩니다. 근접(Near) 평면은 렌더될 가장 가까운 곳이며 원거리(Far) 평면은 가장 먼 곳입니다. 클립핑 평면은 또한 어떻게 깊이 버퍼 정확도가 화면에 분배되는지를 결정합니다. 일반적으로 높은 정확도를 위해서는 근접 평면을 가능한 멀게 설정합니다.


[그림 4-22]


Normalized Viewport Rect


현재 카메라 뷰가 전체 화면의 특정 부분에서만 보이도록 하고 싶을 때, 사용됩니다.

현재 열려있는 'Practice NGUI' 씬에서 간단한 예를 통해서 그 기능을 한번 알아보겠습니다.

   

Hierarchy 창에서 'UI Root (2D)' 하위에 있는 'Camera' 오브젝트의 Camera 컴포넌트에서 Clear Flags를 Solid Color로 변경시켜주고, Culling Mask도 UI, Player를 체크해줍니다.


[그림 4-23]


'Camera' 오브젝트의 이름을 'Camera1'로 변경한 후, Ctrl + d 를 눌러서 카메라를 하나 더 생성한 뒤, 새로 생성된 카메라의 이름을 'Camera2'로 변경시켜줍니다.


[그림 4-24]


'Camera2'의 Transform 정보에서 x, y, z position을 -75.5, 0, 75.5로 변경시켜주고, y축 rotate를 90으로 변경시켜줍니다.


[그림 4-25]


'Camera2'의 Camera 컴포넌트에서 Solid Color의 Background 칼라를 좀 더 밝은 색으로 설정해줍니다.


[그림 4-26]

   

그리고 'Camera2' 오브젝트의 하위에 있는 'Background' 오브젝트(Camera2 > Anchor > Panel > Button >)를 선택하고, Inspector창에서 UISliced Sprite (Script) 컴포넌트의 Color Tint를 찾아서 색을 녹색으로 바꿔줍니다.


[그림 4-27]


그리고 'Camera1' 오브젝트를 선택하고 Camera 컴포넌트의 Normalized View Port Rect에서 Y와 H의 값를 0.5로 입력합니다.

   

마지막으로 'Camera2' 오브젝트를 선택하고 Camera 컴포넌트의 Normalized View Port Rect에서 Y값을 0, H의 값를 0.5로 입력합니다.


[그림 4-28]


그 결과 큐브의 다른 면을 비추는 2개의 카메라가 하나의 화면에서 상하로 나뉘어서 보이는 것을 확인할 수 있을 것입니다.

   

Rendering Path


유니티는 다른 렌더링 경로를 지원합니다. 사용자는 게임의 컨텐츠, 타겟 플랫폼/하드웨어에 따라 어떤 것을 사용할지 정해야 합니다. 다른 렌더링 경로는 다른 기능과 빛과 그림자에 주로 영향을 주는 성능의 특징을 가집니다.

사용자 프로젝트에 의해 사용되는 렌더링 경로는 플레이어 세팅(Player Settings)에서 선택됩니다. 추가로, 사용자는 각 카메라에 그것을 오버라이드(override) 할 수 있습니다.

   

Target Texture


이 기능은 유니티 고급 라이센스에만 있습니다. 이것은 카메라의 뷰를 텍스쳐에 위치시켜서 다른 객체에 적용할 수 있게 합니다. 이것은 스포츠 공간의 비디오 모니터, 감시 카메라, 반사 등을 생성하기 쉽게 합니다.

   

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

크리에이티브 UX교육 훈련과정 안내

우아한 형제들 김봉진 대표 - 앱 개발 전문 학원 스마트 아카데미

창의융합형 교육이 대세다.

스마트아카데미 책 소개 - 개발자, 나를 말하다

스마트아카데미-시설 소개

창조경제시대 왜 코딩교육인가 - 스마트 아카데미

페이스북 왓츠앱 인수

스마트 아카데미 창의인재 교육 6개월 과정 등록안 -스마트 앱 전문 교육기관

   

Posted by 알 수 없는 사용자
유니티 강좌2014. 4. 14. 11:25

2) Camera


카메라는 우리가 일반적으로 생각하는 카메라의 역할보다 조금 더 다양한 일을 하고 있습니다.

   

단순히 화면을 어떻게 보이게 할 것인가의 역할 뿐 만이 아니라, 카메라가 소리를 캡쳐해낼 수 있는지, 또는 소리를 내는 역할을 할 수 있는 지(BGM), 카메라가 잡아내는 화면의 안에 있는 사용자가 어떤 방식으로 Input하여 조작할 수 있는지 등 컴포넌트의 구성에 따라 많은 역할들을 수행할 수 있습니다.

   

오브젝트를 클릭해보면, Camera, Audio Listener, UICamera (Script) 이렇게 3가지 컴포넌트를 볼 수 있는데, 이 중에서 가장 중요한 Camera 컴포넌트에 대해서 알아보겠습니다.


[그림 4-15]


Camera 컴포넌트는 카메라가 화면을 비추는 영역과 그 영역의 백그라운드 처리 효과 등, 전반적인 View 컨트롤을 하고 있습니다.

   

Clear Flags


화면의 어떤 부분이 제거될지 정합니다. 이것은 다른 게임 요소를 끌어오기 위하여 카메라를 사용할 때 편리합니다.

   

NGUI에서 Simple 2D UI를 만들게 되면 기본적으로 이 부분이 Depth only로 맞추어져 있습니다.

Depth only는 카메라가 볼 수 있는 영역(Scene에서 보이는 상자형태의 영역)에 있는 오브젝트만 Depth 수준에 따라서 순서를 정하여 렌더링하는 기능을 가지고 있습니다. 즉, 하나의 카메라만 있고 그 카메라 영역 안에 1개의 오브젝트만 있다면, 그 UI만 렌더링해서 보여주지만, 서로 다른 곳을 비추는 두 개 이상의 카메라가 있고 그 카메라들 안에 다양한 오브젝트들이 있다면, 컴포넌트에 있는 Depth 값에 따라서 화면에 순서대로 렌더링 하는 기능입니다.

즉, Depth only로 설정된 카메라는 볼 수 있는 영역에 있는 오브젝트 이외의 렌더링은 일어나지 않기 때문에, Depth 수치를 높게 줘서 다른 카메라에서 보이는 영역 위에 이 카메라를 통해서 버튼 UI만 보이게 얹을 수 있습니다. 그래서 Simple 2D UI를 만들게 되면 기본적으로 이 부분이 Depth only로 맞추어져 있는 것입니다.

   

이외에도 UI용 카메라가 아닌 일반 카메라에서 자주 쓰이는 기능에는 Skybox와 Solid Color가 있습니다.

   

Skybox 기능을 선택하면, 화면의 빈 공간은 현재 카메라의 스카이박스를 보여줄 것입니다. 만약 카메라가 스카이박스 설정을 가지고 있지 않으면 Render Settings (Edit->Render Settings)에서 선택된 Skybox를 기본으로 사용합니다. 그런 후에 배경색(Background Color)으로 가게 됩니다. (대안으로 Skybox component가 카메라에 추가될 수 있습니다.)

   

Solid Color는 말 그대로 화면의 빈 공간을 카메라의 배경색(Background Color)으로 표현하는 기능입니다.

   

즉, Skybox나 Solid Color의 경우에는 현재 카메라가 볼 수 있는 영역에 있는 오브젝트를 렌더링 한 후에, 남는 공간, 즉, Background 배경에 무엇을 그릴 것인지 정해줄 수 있는 기능을 가지고 있는 것입니다.

   

마지막으로 Don't Clear라는 기능이 있는데, 이 기능은 색상이나 깊이 버퍼, 등 아무것도 제거하지 않습니다. 결과적으로 각 프레임마다 화면에 렌더링이 덮여 씌워지는 형식으로 행해지고, 이것은 그림이 번진 것 같은(smear-looking)효과를 냅니다. 보통은 잘 사용되지 않으며, 사용자의 정의된 커스텀 셰이더와 함께 사용하는 것이 좋습니다.

   

※ 현재 진행 중인 'Practice NGUI' 씬과 같이 UI용 Camera 한 개만 씬에 존재할 경우, Camera 컴포넌트의 Clear Flags 설정을 Depth Only로 해둔다면, 배경을 따로 그리고 있지 않기 때문에 이 그림과 같이 이전에 오브젝트가 위치했던 곳의 렌더링까지 모두 그려주게 되어 화면이 지저분하게 되는 경우가 있습니다.

이럴 경우에는 Clear Flags 설정을 Sky Box나 Solid Color로 해주시면 됩니다.


 


[그림 4-16]



Culling Mask


레이어를 사용하여 선택적으로 화면에 그려낼 오브젝트들을 정할 수 있는 기능을 가지고 있습니다. 예를 들어 설명하자면, 게임에서 UI를 배치할 때, 게임 오브젝트의 범위와 UI 범위가 겹쳐지는 불상사가 발생할 경우에도 예외처리가 가능하도록 UI전용 레이어를 따로 지정하고 UI 카메라에서 Culling Mask를 통해 해당 레이어만 렌더링 하도록 지정하는 것이 좋습니다.

   

현재 열려있는 'Practice NGUI' 씬에서 간단한 예를 통해 기능을 한 번 살펴보겠습니다.

UI Root (2D) 오브젝트의 하위 객체로 큐브를 하나 생성한 뒤, Inspector창에서 x, y, z 좌표를 0, 0, 75.5 로 만들어주고, Layer 콤보 박스에 있는 Default를 클릭해서 add Layer를 선택합니다.


[그림 4-17]


Inspector 창에 나타난 Tagmanager에서 User Layer 8번과 9번에 'UI'와 'Player'라는 이름으로 레이어를 2개 생성합니다.


[그림 4-18]


그리고 다시 Hierarchy에서 큐브를 클릭하여 Inspector창의 내용이 큐브의 내용으로 나타나게 만든 후, Layer 콤보 박스에 있는 Default를 클릭해서 Layer를 'Player'로 바꿔줍니다.


[그림 4-19]


다음으로 'Camera'를 선택해서 Layer를 'UI'로 바꿔줍니다.


[그림 4-20]


   

[그림 4-21]


※        이와 같은 메시지 창이 나타나면, Yes를 클릭하시면 됩니다. 이 메시지 창은 레이어가 바뀌는 오브젝트 안에 하위 오브젝트가 있을 경우, 하위 오브젝트의 레이어도 함께 바꿀 것인지 물어보는 창입니다.

   

설정이 끝났다면, 'Camera' 오브젝트의 Camera 컴포넌트에서 Culling Mask를 UI만 체크했을 때, Player만 체크했을 때, 두 개 다 체크했을 때, 각각 어떻게 게임 플레이 화면이 변하는지 확인해봅시다.


다음 장에서는 Projection 부터 알아보겠습니다.


우아한 형제들 김봉진 대표 - 앱 개발 전문 학원 스마트 아카데미

창의융합형 교육이 대세다.

스마트아카데미 책 소개 - 개발자, 나를 말하다

스마트아카데미-시설 소개

창조경제시대 왜 코딩교육인가 - 스마트 아카데미

페이스북 왓츠앱 인수

스마트 아카데미 창의인재 교육 6개월 과정 등록안 -스마트 앱 전문 교육기관

APP 개발 온라인 강좌 제2강 - 유니티의 기본 구성 및 조작법 [2-5] -큐브(상자)씬 만들기


Posted by 알 수 없는 사용자