평가판 다운로드
www.tasharen.com >> products >> NGUI:Next-Gen UI kit
Evaluation Version 다운로드
Package Import
설치 확인
Menu에 "NGUI" 메뉴가 생김
특징
UI와 관련된 리소스를 하나의 Texture로 만들어 한번의 Draw Call로 이미지를 그릴 수 있도록 하고 있음
예제 Scene들 살펴보기
Example 살펴보기
Example 1 - UIAnchor
Example 2 - Interaction
Example 4 - Controlloer Input
Example 5 - Lights and Refraction
Example 6 - Draggable Window
Example 7 - Scroll View (Panel)
Example 8 - Scroll View (Camera)
Example 9 - Quest Log
Example 10 - Localization
Example 11 - Drag & Drop
Example 12 - Chat Window
Tutorial 살펴보기
Tutorial 1 - Scene
Tutorial 2 - Sprite
Tutorial 3 - Sliced Sprite
Tutorial 4 - Tiled Sprite
Tutorial 5 - Label
Tutorial 6 - Button
Tutorial 7 - Slider
Tutorial 8 - Checkbox
Tutorial 9 - Input
Tutorial 10 - 3D
Tutorial 11 - Popup List
Tutorial 따라하기
참고 사이트 : http://icoder.tistory.com/entry/Unity3D-NGUI-Tutorial-Step-by-stepTutorials
Sliced Sprite 하는 법
Game Camera와 NGUI camera
Game Camera의 Depth가 NGUI Camera의 Depth보다는 낮아야 함(그래야 NGUI가 위에 보이니까)
NGUI 환경은 Scene 밖으로 옮겨서 만들어 놓는 것이 바람직할 듯 ...
Example 따라하기
NGUI에서 한글 폰트 사용하기
Dynamic Font를 사용하기 위해서는 여기를 참고
참고 사이트 :
한글 글자 폰트 구하기
네이버 제공 무료 폰트 : http://hangeul.naver.com/font
BM Font 프로그램을 설치 및 구동
(벡터형의) 폰트 데이터를 이미지 폰트(Bitmap Font)로 만들어 주는 프로그램
다운로드 : http://www.angelcode.com/products/bmfont/
실행 파일 위치 : 프로그램 파일 >> Angel Code >> Bitmap Font Generator >> BMFont
한글 정보 가져 오기
Edit >> Select chars from file : KS1001.txt 선택
폰트 가져오기
Options >> Font settings
Font : 나눔고딕
Size :
Bold :
Italic :
Output invalid char glyph :
Do not include kerning pairs :
Render from TrueType outline :
TrueType hinting :
Font smoothing :
Super sampling :
Outline thickness :
폰트 내보내기 설정
Options >> Export options
Padding :
Spacing :
Equalize the cell heights :
Force offsets to zero :
Texture[Width, Height] : 실제 사용되는 텍스쳐 사이즈를 결정
Bit depth :
Pack chars in multiple channels :
Presets :
white text with alpha : 투명 배경에 흰 글씨
black text with alpha : 투명 배경에 검정 글씨
white text on black(no alpha) : 검정 배경에 흰 글씨
black text on white(no alpha) : 흰 배경에 검정 글씨
outlined text with alpha : 투명 배경에 테두리가 있는 글씨
pack text and outline in same channel :
Font descriptor :
Textures :
Compression :
폰트 이미지 내보내기
Options >> Save bitmap font as ...
______.fnt 와 _______.png 파일이 생성됨
NGUI에서 이미지 폰트를 사용하기 위해서는 fnt 파일을 txt 파일로 강제로 확장자를 변경해야 함
Unity에서 만든 이미지 폰트 사용하기
참고 사이트 : http://progagmer.blog.me/189427373
만든 txt, png 파일을 Unity Project View로 가져오기
NGUI >> Font Maker
NGUI 작업 단계
게임에 사용될 UI 이미지들을 Atlas로 생성
이미지 폰트를 사용할 경우 추가함
만들어진 Atlas로 UI를 제작함
UI디자이너가 NGUI에서 창 크기 맞추기
[ 참고 사이트 ]