회원 로그인
|
NGUI 기본
NGUI 기본
NGUI는 유니티에서 기본으로 제공하고 있는 GUI보다 좋은 퀄리티로 높일 수 있는 GUI를 제공하는 애셋(플러그인)이다.
NGUI 버젼 2.0.7c와 PlayMaker 버젼 1.4로 기재되었다. |
PlayMaker와 NGUI 기초 사용법
* PlayMaker, NGUI 패키지 설치
Assets > Import Package > Custom Package으로 PalayMaker와 NGUI를 각각 임포트를 한다.
* NGUI 사용
-기본 구조
Panel : 화면을 구성하는 하나의 판, camera가 포함된다.
ex) 게시판
Anchor : 여러 Widget을 배치함의 기준점
ex) 게시판에서 게시물을 고정 시키는데 쓰는 압정
Widget : 화면내에 배치할 Contents(그림, 문장, 버튼 등)
ex) 게시판에 게시할 내용
Atlas : 사용할 그림들의 집합, 그림을 사용하려면 Atlas에 추가 후 사용
ex) 게시판 또는 게시물 뒤의 배경 그림 등
Font : 사용할 글씨체, 특정 글씨체를 사용하려면 Font에 추가 후 사용
ex) 게시판의 글씨체
* 튜토리얼(Free Ver.)
1. NGUI > Create a New UI 클릭하여 UI Tool 창을 열고 Create Your UI 버튼을 클릭한다.
Layer : Default(기본), Ignore Raycast(레이캐스트 무시)
Camera : Simple 2D(기본)
Simple 2D의 기본 구조이다. Main Camera는 필요 없을 시 삭제해도 된다. |
2. Hierarchy의 Panel 선택 후 NGUI > Create a Widget 클릭하여 Widget Tool 창을 연다.
새롭게 만든는 것이므로 Atlas와 Font는 None인 상태여야 한다.
3. Atlas에 이미지와 Font에 폰트 이미지를 넣게 된다. Project 뷰 > NGUI > Examples > Atlases > SciFi에서 SciFi Atlas를 드래그해 Atlas 프리팹에 넣고, Font도 마찮가지로 프리팹에 넣는다.
Template은 Sprite, Sprite는 burlap을 선택하고 Add to 버튼을 클릭한다.
UI의 Transform이 기본으로 가지며, UISprite(Script)가 컴포넌트 되어있다. Atlas : 버튼을 클릭하면 만든 Atlas 리스트가 나와 고를 수 있게 된다. Sprite : 스프라이트의 종류를 변경 가능하다. Depth : Back과 Forward로 UI의 앞뒤 순서를 변경 할 수 있다. Color Tint : 색상을 변경한다. |
4. Text(Label) UI를 만들어보자.
NGUI > Create a Widget에서 Template을 Label를 선택하고, Add to 버튼 클릭
Font : 버튼을 클릭하면 Atlas에서 설정한 Font를 고를 수 있다. New Label : 여기에서 텍스트를 입력한다. 중간에 폰트 색상을 변경하려면 [html 태그 색상 코드]텍스트 입력[-] 형식으로 입력한다. 한글 폰트 사용 시에만 한글 입력된다. ex) [eeff00]Text Input[-] Depth : Back과 Forward와 UI를 앞뒤로 이동한다. Color Tint : 색상을 변경한다. |
5. Transform을 이용해 Position, Rotate, Scale을 이용하여 배치한다.
또한 Depth를 이용해 Widget 간의 깊이를 조절한다.
- ngui_free.unitypackage (4.4MB) (0)
댓글 0개
| 엮인글 0개
146개(6/8페이지)
번호 | 제목 | 글쓴이 | 조회 | 날짜 |
---|---|---|---|---|
유니티 강좌 모음(영문) | 푸딩뱃살 | 60294 | 2013.08.28 12:02 | |
유니티 경고, 에러 모음 (재정리 예정) [1+1] | 푸딩뱃살 | 71093 | 2013.08.12 00:09 | |
44 | [애셋] NGUI & PlayMaker - Random Button | 푸딩뱃살 | 7390 | 2014.01.23 02:09 |
43 | [애셋] PlayMaker - Random String | 푸딩뱃살 | 5698 | 2014.01.22 03:29 |
42 | [애셋] NGUI & PlayMaker - 웹툰 앱을 만들기 | 푸딩뱃살 | 7081 | 2014.01.20 00:25 |
41 | [애셋] NGUI를 이용한 스크롤 사용하기 | 푸딩뱃살 | 9918 | 2014.01.15 03:21 |
40 | [애셋] NGUI & PlayMaker를 이용한 텍스트 이동하기 | 푸딩뱃살 | 8261 | 2014.01.15 01:07 |
>> | [애셋] NGUI 기본 | 푸딩뱃살 | 7947 | 2014.01.10 03:03 |
38 | [애셋] PlayMaker 기본 | 푸딩뱃살 | 7728 | 2014.01.10 01:30 |
37 | [유니티] Character Controller 캐릭터 컨트롤러 | 푸딩뱃살 | 8910 | 2013.12.23 23:52 |
36 | [스트립트] raycast 예제 | 푸딩뱃살 | 2234 | 2013.12.11 13:40 |
35 | [유니티] unityPackage 만들기 | 푸딩뱃살 | 12044 | 2013.11.29 14:35 |
34 | [유니티] Mecanim으로 애니메이션 연결 | 푸딩뱃살 | 8151 | 2013.11.28 14:12 |
33 | [스트립트] Class (클래스) | 푸딩뱃살 | 2772 | 2013.11.26 23:46 |
32 | [참고] Unity 디컴파일 - Unity 3D Obfuscator 사용법 | 푸딩뱃살 | 4917 | 2013.11.24 16:56 |
31 | [참고] Unity 3D Obfuscator | 푸딩뱃살 | 7985 | 2013.11.24 01:10 |
30 | [스트립트] GUI.Button() 예제 | 푸딩뱃살 | 4946 | 2013.11.22 00:49 |
29 | [스트립트] 마우스 제어 적용 (클릭,오버,아웃) | 푸딩뱃살 | 5784 | 2013.11.21 14:29 |
28 | [소셜] Unite 2013 - Connect Unity gamers across platforms with | 푸딩뱃살 | 1513 | 2013.11.19 18:49 |
27 | [소셜] Facebook SDK for Unity Tutorials (iOS, Android,Web) | 푸딩뱃살 | 5152 | 2013.11.19 14:28 |
26 | [참고] Unite Vancouver 2013 Keynote | 푸딩뱃살 | 3157 | 2013.11.13 20:42 |
25 | [정보] 유니티, 2D 개발 툴 장착한 ‘유니티 4.3’ 전 세계 동시 공개 | 푸딩뱃살 | 3937 | 2013.11.13 20:26 |