Free Bitmap Font Generator - BMFont Tool

 게임을 만들다 보면 이쁜 폰트가 필요할 때가 있습니다. 보통 채팅창 같은 경우는 시스템 폰트 또는 TTF를 사용해서 폰트를 출력을 하고 기타 나머지 글자는 이미지 폰트를 사용하는 경우가 많죠. 디자이너가 만들어주거나 툴로 생성한 비트맵(이미지) 폰트를 이용하거나 아니면 폰트 자체를 만들거나 해서 한결 이쁜 폰트를 게임에 적용할 수 있겠죠. 이번 포스팅에서는 디자이너를 거치지 않고 비트맵 폰트를 만들 수 있는 툴에 대해 정리해봅니다.

 본격적인 소개에 앞서 몇가지 비트맵 폰트 툴을 간략히 소개해봅니다.

• Hiero - JAVA로 만들어짐. 저는 오류로 실행이 안됨.
• fonteditor
• Glyph Designer - Mac OSX, 유료
• bmGlyph - Mac OSX, 유료
• LabelAtlasCreator - Mac OSX

 본격적으로 소개할 비트맵 폰트 생성 툴은 AngelCode의 BMFont 입니다. 위에 것은 유료이거나 Mac OSX만 지원하지만, BMFont는 Windows를 지원하고 무료입니다. 2004년부터 꾸준히 업데이트 되고 있네요. Special thanks to에 유명한 코드마스터즈와 너티독등이 있는 걸로 봐서는 이곳에서도 사용하는 툴인 듯 싶네요.

1. 설치

 BMFont 사이트에서 Downloads에 있는 링크를 클릭해 다운로드 합니다. 1.13 기준으로 진행합니다.

 적당한 곳에 압축 해제 후, 설치파일을 실행합니다. Continue를 클릭합니다.

 설치 위치를 지정 후, Install을 클릭합니다.

 기본적인 설치 컴포넌트를 체크 된 상태로 둔 후 Next를 클릭합니다.

 설치가 완료됩니다. Close를 눌러 종료합니다.


2. 비트맵 폰트 만들기

 이번에는 툴을 사용해서 간단한 비트맵 폰트를 만들어보겠습니다. 그전에 cocos2d-x에 이미 만들어져 있는 폰트를 살펴보면,

 많은 샘플 폰트들이 이미 준비되어 있습니다. 참고로 결과물이 fnt와 png로 만들어지는데 fnt는 꼭 cocos2d-x에서만 사용되어 지는게 아니라 간단한 텍스트 파일 형식이라 다른 엔진등에서도 이미 통합되어 있거나 사용가능한 포멧입니다. 예로, OpenGL에 BMFont를 구현하는 것을 확인하시려면 링크를 참고하세요.

 자, 이제 간단하게 숫자 1부터 0까지만 만들어보는 것을 정리해보겠습니다.

 툴을 실행한 스샷입니다. 오른쪽에 아래로 쭉 나열된 것들은 사용할 폰트에서 지원하는 문자열 양식? 또는 문자셋들입니다. 라틴, 그리스, 숫자, 화살표, 특수문자 등등의 공통된 것들끼리 정리되어 있습니다. 현재 폰트가 Arial로 되어있는데 폰트에 따라 지원하는 문자셋이 다릅니다.

 왼쪽은 선택한 양식에서 출력할 수 있는 character들 입니다. 여기서 비트맵 폰트로 만들 문자들을 선택하면 됩니다. 저는 0 ~ 9 총 10개를 선택했습니다.

 폰트 세팅을 해보겠습니다. Options -> Font settings를 선택하거나 F 키를 누릅니다.

 여러가지 설정을 할 수 있습니다. 저는 Font를 Showcard Gothic로 변경했고 아웃라인을 주기위해 Outline thickness를 2로 설정했습니다.

 만들고 있는 폰트의 프리뷰를 확인할 수 있습니다. Options -> Visualize 선택하거나 V 키를 누릅니다. 그러면 Preview 창이 뜹니다. 저 상태로 png가 생성이 되는데 너무 여백 공간이 많네요. 아무래도 이미지 사이즈등 최적화가 필요해보입니다.

 비트맵 폰트 익스포트 옵션설정을 위해 Options -> Export options 또는 T 키를 누릅니다.

 중간 Texture에서 이미지 사이즈를 정합니다. 2의 배수로 정해줍니다. Bit depth는 32로 해줍니다. 제일 밑에 Textures에서 dds, png, tga를 지원하는데 원하시는 것을 선택합니다. 이제 OK를 누른 후 V 키를 눌러 프리뷰를 보시면,

 위와같이 여백이 최소화된 상태를 볼 수 있습니다.

 Options -> Save bitmap font as 또는 Ctrl + S 를 눌러 비트맵 폰트로 저장을 합니다.

 testBMFont라고 저장했습니다. fnt와 png가 생성되었습니다.

 기본 이미지뷰어로 확인하면 이렇습니다.

 이건 cocos2d-x 기반 게임에 CCLabelBMFont를 사용해서 적용해본 스샷입니다.