3.4 NGUI Font 생성하기 – 2

NGUI Font 생성하기

 

3.4.2 BMFont생성 툴을 이용한 비트맵 생성방법

BMFont 툴은 폰트 파일에서 필요한 글자들을 아틀라스 이미지로 생성해주고 이렇게 생성된 아틀라스 이미지에 대한 정보를 담은 텍스트 파일을 추출해주는 프로그램 입니다.

BMFont 를 이 두 파일을 추출한 뒤에 NGUI에서 추출된 파일들을 이용해서 NGUI 폰트 파일로 만든뒤에 생성 하게 됩니다.
따라서 해야할 작업이 크게 두 가지가 있습니다.

– BMFont 툴을 이용해서 아틀라스 이미지 및 이미지 정보를 담은 텍스트 파일 추출
– 추출된 아틀라스 이미지 파일 및 텍스트 파일을 NGUI 폰트 생성 툴에서 NGUI 폰트 생성

먼저 첫 번째 작업을 진행하겠습니다.

bmFont 프로그램이 필요하기 때문에 다운로드 합니다. 다운로드는 아래 링크에서 가능합니다.
http://www.angelcode.com/products/bmfont

다운로드를 하고 프로그램을 설치합니다. 설치가 완료되면 BMFont 를 실행합니다.
Options -> Font Settings 메뉴를 선택합니다.

폰트에 대한 여러가지 설정을 할 수 있는 설정 창이 나타납니다. 아래 그림과 같이 설정을 합니다.
Font 항목을 나눔고딕 폰트로 설정을 하고, OK 버튼을 누릅니다.

bmfont settings

 

Font Settings 창의 항목 중에 Size 크기를 크게 할수록 추출되는 아틀라스 이미지의 크기가 커질 수 있습니다. 이 사이즈는 픽셀 사이즈를 의미하기 때문에 Size를 달리해서 여러가지 아틀라스 이미지를 추출해 본 뒤에 적절한 크기를 설정해서 사용하도록 합니다.

OK 버튼을 누르고 나면 아래그림과 같이 문자 그룹을 설정하는 부분이 있습니다.
이 항목은 추출될 아틀라스에 어떤 글자들이 포함되도록 할지를 설정하는 항목입니다.
예를 들어서 ‘가’, ‘나’, ‘ㄱ’, ‘까’ 등의 글자 등을 아틀라스 이미지에 포함시킬 지에 대한 부분을 설정해주는 항목입니다.

set characters group

 

위의 그림에서 볼 수 있듯이 오른쪽에 보면 각 문자들의 preset을 제공합니다. 이 항목들 중에서 설정을 해도 됩니다만, 직접 글자들을 일일이 선택할 수도 있습니다. 또는 미리 만들어 둔, 문자 그룹 설정 정보를 가져와서 지정할 수도 있습니다.

강좌에서는 미리 만들어 둔 설정항목을 가져와서 폰트를 생성하도록 하겠습니다.
이를 위해서는 미리 만들어 둔 문자 그룹 설정 정보가 담긴 텍스트 파일이 필요합니다. 아래 링크에서 다운로드 합니다.
http://bit.ly/2r4ULBw

텍스트 파일이 다운로드 되지 않고, 웹 브라우져에서 텍스트 정보가 바로 열리는 경우에는, 텍스트를 모두 선택을 하고 윈도우에서 notepad 등의 프로그램에 붙여넣기를 한 뒤에 ks1001.txt 라고 저장을 합니다.

이제 다운로드 또는 텍스트 파일로 저장한 ks1001.txt 파일을 BMFont에서 읽어와서 아틀라스 이미지와 이미지 정보 텍스트 파일을 생성해 보겠습니다. 아래 그림처럼 메뉴에서 Edit -> Select chars from file 항목을 선택합니다.

set characters group

 

그러면 아래 그림과 같이 윈도우 탐색기 창이 뜹니다. 여기에 미리 저장해 둔 ks1001.txt 파일을 지정 합니다.

save ks1001 txt file

 

문자 그룹이 지정되었습니다. 준비 작업은 모두 끝이 났습니다.
아틀라스 이미지와 텍스트 파일을 생성해 보도록 하겠습니다.

BMFont 메뉴에서 Options -> Export Options 항목을 선택합니다.
그리고 아래 그림과 같이 Width와 Height 항목을 각각 2048 / 2048로 설정하고, Bit depth 항목은 32, Textures 항목은 png로 설정을 하고 OK 버튼을 누릅니다.

set bmfont export options

 

 

설정이 끝났으면, 메뉴에서 Options -> Save bitmap font as… 메뉴를 선택합니다.
그리고 생성될 파일 이름과 위치를 지정합니다.

create a font file

 

이렇게 위치와 파일이름을 지정해주면, 아래 그림과 같이 아틀라스 이미지와 텍스트 파일이 생성됩니다.

create a font file

 

이제 생성된 이 파일들을 유니티로 임포트 합니다. 예제에서는 Assets/Font 폴더에 임포트를 했습니다.

import font atlas to unity

 

이후의 과정은 NGUI 기본 제공툴을 이용한 방법과 유사합니다.

유니티 메뉴에서 NGUI -> Open -> Font Maker 항목을 선택합니다.
Font Maker 창이 나타나면 Type 항목을 Imported Bitmap으로 설정합니다.
그리고 Font Data에는 위에서 저장한 텍스트 파일을 드래그 해서 설정하고, Texture 에는 폰트 아틀라스 이미지를 드래그 해서 설정합니다.

set font atlas and text info

 

그리고 Create the Font 버튼을 클릭해서 폰트를 생성합니다. 예제에서는 NanumFont 라는 이름으로 NGUI 폰트를 저장했습니다.

save ngui font

 

NGUI 폰트 생성 후에 사용하는 방법은 첫 번째 방법인 NGUI 기본 툴을 이용하는 방법과 동일 합니다.
유니티 메뉴에서 NGUI -> Open -> Widget Wizard (Legacy) 메뉴를 선택하고 Font 항목을 방금 생성한 NanumFont를 지정한 뒤에 Label 위젯을 생성합니다.

레이블 위젯을 생성한 뒤에 Text 를 Hello World 로 설정했습니다. 아래 그림과 같이 화면에 잘 나타나는 것을 확인할 수 있습니다.

create label widget

 

정리

아틀라스와 폰트 프리팹을 생성하고 사용하는 방법까지 살펴 보았습니다.
아틀라스와 폰트 모두 NGUI에서 제공하는 메뉴를 통해서 쉽게 만들 수 있습니다.

아틀라스와 폰트를 만들 때의 주의할 점을 정리해보면 아래와 같습니다.
– 아틀라스를 만들기 위해서는 각 텍스쳐의 개별 이미지가 준비되어 있어야 한다.
– 폰트를 생성하는 방법은 NGUI 기본 툴을 이용하는 방법, BMFont를 이용하는 방법 두 가지가 있다.
– 두 가지 방법 중 NGUI 기본 툴을 이용하는 방법이 더 간단하지만, 결과물의 모습이 다를 수 있기 때문에 두 가지 방법을 모두 사용해서 적절히 사용하는 것이 좋다.

 

RonnieJ

프리랜서 IT강사로 활동하고 있습니다. 게임 개발, C++/C#, 1인 기업에 관심이 많습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Please turn AdBlock off

Notice for AdBlock users

Please turn AdBlock off