안녕하세요? 글뻥입니다.
(이득우님께 잡혀서 열심히 하라는 일은 안하고 강좌 올리는... ㅋㅋ)
연일 강추위 건강 유의하시기 바라며, http://www.unitystudy.net에 올린 글을 옮겨서 올려봅니다.
먼저 NGUI를 사시기 전에 (꽤 비싸죠... ㅋ) Free 버전으로 초간단 NGUI 강좌를 진행해 보겠습니다.
사용자 삽입 이미지
(어서와~ NGUI는 처음이지?)
다운로드는
http://forum.unity3d.com/threads/124032-NGUI-Free-Edition
여기서 받을 수 있구요. NGUI 로고 클릭하면 unitypackage 다운로드 가능합니다.
그럼 import하고 시작!
사용자 삽입 이미지
import가 완료되면 메뉴에 NGUI라는 넘이 생기고 그걸 클릭하면 이제 모든 준비가 완료됩죠. 네네
사용자 삽입 이미지

영어 울렁증이 올라오지만 꾸욱 참고 가장 많이 쓰는 기능들만 간단히 살펴봅시다.
가장 많이 궁금해 하시는 부분이 바로 한글 출력일텐데요.
이것 부터 짚고 넘어가죠.
우리의 공짜주의에 입각해서 네이버의 나눔폰트를 사용하겠습니다.
http://hangeul.naver.com/font
폰트 설치후 BMFONT라는 녀석을 다운 받아야 하는데욤. 이녀석은...
http://www.angelcode.com/products/bmfont/
여기서 다운로드 가능합니다.
그리고도...
아직 다 준비가 안됐습니다.
Font파일중에 한글만 뽑아낼 녀석이 필요하니까요. 많이 사용하는 한글만 뽑아낸 txt파일이 필요합니다.
첨부파일로 저희쪽에서 사용하는 한글 파일을 드리지요. (서비스 확실하게...)
드디어 모든 준비가 끝났습니다.
사용자 삽입 이미지

일전에도 설명드렸듯이... 이바닥이 원래 이럽니다.
쉽다고 해놓고 뒷통수 치기... 이런게 뭐..
암튼... 이제 BMFont를 실행합니다.
사용자 삽입 이미지
이렇게 생긴 녀석이 뜰텐데요.
Option에서 폰트설정을 다음과 같이 해줍니다.
사용자 삽입 이미지

폰트를 25폰트 이상 올릴 수도 있겠지만.. 나중에 용량관리하시며 정신건강에 해로 울 수도 있사오니... 걍 25폰트로 뽑습니다. 이렇게 뽑으면 딱 1024x1024 사이즈의 텍스쳐에 들어갈 수 있죠.
Option에서 Export Option을 클릭하고 다음과 같이 1024x1024, Alpha값이 있는 흰색, text에 png로 뽑아냅니다.
사용자 삽입 이미지

이제부터 진짜입니다.
첨부된 KS1001.txt파일을 읽어 들입니다. "Edit"에서 Select char from file로 읽을 수 있죠.
사용자 삽입 이미지

그럼 아래와 같이 txt파일에 있는 폰트만 highlight됩니다.
사용자 삽입 이미지

이제 제대로 출력되는지 Option메뉴에서 Visualize를 클릭해서 확인합니다.
아래와 같이 1024x1024 사이즈에 한장에 들어오면 잘 따라오신겁니다.
사용자 삽입 이미지

마지막으로 Export합니다.
Option에서 "Save..."어쩌구 된넘을 누르면 끝.
사용자 삽입 이미지

Export된 파일중에 "fnt"확장자를 "txt"로 고쳐줍시다.
사용자 삽입 이미지

사용자 삽입 이미지

위와 같이 고쳐주시면 한글 사용할 준비가 정말... 진짜 완료되었습니다.
사용자 삽입 이미지

위와 같이 Font폴더를 만들고, 아까 변경해준 이름의 파일을 Drag&Drop해서 Unity로 Import 시킵니다.
NGUI메뉴에서 Font Maker를 클릭해, 다음의 화면을 호출하도록 합시다.
사용자 삽입 이미지

Font Data에는 ".txt"파일을 나머지 texture에는 아까 생성한 ".png"를 Drag&Drop으로 넣어줍니다.
그럼 다음과 같이 알수 없는 욕을 해대면서 UI가 변경될 겁니다.
사용자 삽입 이미지

이럴때 Fuc* u를 날려주는 Sense... 이제 X 먹으라고 빨간색 버튼 눌러주면...
다음과 같이 폰트 Atlas가 생성됩니다.
사용자 삽입 이미지

(한글 한번 쓰기 디따 힘들군요. T_T)
드디어~~ 진짜.. NGUI 강좌들어갑니다.
사용자 삽입 이미지

NGUI 메뉴에서 "Create a New UI"를 누르고 Layer를 하나 추가합니다.
사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지

(쓸데없는 고퀄로 차례로 이미지를 보여드렸슴돠... ㅡㅡ;;)
이제 과감히 버튼 클릭!
사용자 삽입 이미지

그럼 다음과 같이 하이라키가 변경되는게 보이실 겁니다.
사용자 삽입 이미지

이제 다시 NGUI 메뉴에서 Create a Widget 버튼을 눌러줍니다. 살포시...
사용자 삽입 이미지

위젯 툴에서 Label로 변경하고 "Add to" 버튼을 클릭!
사용자 삽입 이미지

갑작이 화면이 바뀌면서... New Label이라는 메시지가 보입니다.
사용자 삽입 이미지

인스펙터 메뉴에서 설정을 변경하면...
사용자 삽입 이미지
사용자 삽입 이미지

변경 완료!
오늘은 간단히 Label을 한글로 사용하는걸 봤습니다.
담 강좌는 버튼한번 해볼까요?
사용자 삽입 이미지
* 본 강좌의 저작권은 링고게임즈에 있습니다.
출처없는 불펌은 법대로 할겁니다.
KS1001 파일입니다.
2013/01/04 21:31 2013/01/04 21:31

트랙백 주소 :: 이 글에는 트랙백을 보낼 수 없습니다