BMFont, 이미지를 폰트화 해서 Unity에 사용하기

- BMFont 설치 -

(1.14버전은 베타 버전이라고 써있기에 1.13버전을 사용함, 차이는 모릅니다.)

BMFont - AngelCode.com

 

---

- BMFont로 숫자이미지를 폰트로 만들기 -

임시로 제작한 숫자png들

일단 저는 임시로 0~9까지의 숫자이미지를 제작하였습니다.

이 이미지를 Unity에서 텍스트로 사용하기 위해 폰트로 만들어 보겠습니다.

 

먼저 BMFont를 실행시켜줍니다.

BMFont 창

위와 같이 창이 열리면 사용하려는 글자를 선택해 줍니다. (0~9 선택)

선택을 해준 후에 BMFont 창의 왼쪽 상단에 있는 Edit→Open Image Manager를 선택해줍니다.

 

Image Manager 창

위 창이 나오면 왼쪽 상단의 Image→Import Image를 선택해줍니다.

 

그러면 이미지를 가져오는 창이 열리는데 여기서 사용할 숫자 이미지를 선택해줍니다.

한번에 선택은 되지 않으므로 하나씩 눌러 Import 해줘야합니다.

 

이미지를 하나 선택하게되면 위의 창이 뜨는데 Id: 부분에 숫자를 입력해 주어야합니다.

0은 Id:가 48번이고, 1은 49번, 2는 50번 ··· 9는 57번 이렇게 순서대로 입력해줍니다.

 

혹시 Id:입력 또는 이미지 선택을 잘못하였을 때에는 Image Manager창의 왼쪽 상단에 Image→Edit Image를 눌러 수정할 수 있습니다.

그리고 사용하지 않는 이미지를 Import했다면 Image→Delete selected를 눌러 삭제할 수 있습니다.

 

위와 같이 이미지를 모두 넣어주고 창을 닫아줍니다.

 

그러면 처음과는 다르게 각 숫자의 오른쪽 하단부분에 파란색 사각형이 생기게 됩니다.

Image Manager에서 하나하나 입력할 떄마다 해당 부분에 파란사각형이 생겨 잘 입력됨을 확인 할 수 있기에 보면서 확인하는 것도 좋습니다.

 

이 다음은 BMFont창의 왼쪽 상단에 있는 Options→Export Options를 선택해줍니다.

이 부분은 이미지를 폰트화하여 내보낼 시에 사용될 옵션값들을 설정하는 부분입니다.

 

일단 Width와 Height 부분은 숫자 이미지들이 한페이지에 모두 나올 수 있도록 설정해 줍니다.

(너무 크면 여백이 많아지고 너무 작으면 한장이 아닌 여러장에 이미지들이 담기므로 적절한 값을 설정해줍니다.)

Bit depth는 8에서 32로 체크하고 (이 부분은 원하는대로 체크하면 될 것 같습니다.)

Textures는 png로 바꿔주었습니다.

 

Options 값들을 설정해 주었다면 OK버튼을 눌러 저장한 후

BMFont창의 Options→Save bitmap font as 버튼을 눌러 줍니다.

저장하고자 하는 위치에 이름을 작성하여 저장버튼을 눌러주면 폰트가 만들어 집니다.

 

위와 같이 해당 위치에 폰트가 만들어짐을 확인할 수 있습니다.

 

---

- 만든 숫자폰트를 Unity에서 사용하기 -

 

임시로 만든 Unity안에 위에 제작한 폰트(상단에 보여주는 NumFont.fnt 파일과 NumFont_0 이미지 파일)을 넣어줍니다.

 

이렇게만 넣으면 아무런 변화도 없고 사용법도 없습니다.

비트맵 폰트를 사용하는 방법이 지금 막 생성된 유니티에서는 없기 때문입니다.

일단 에셋스토어로 들어갑니다.

 

위 사진의 에셋을 검색하여 다운로드 후 Import해줍니다.

그리고 왼쪽에 있는 사진에 빌드하는 방법이 상세히 되어있습니다.

(더이상 읽기 귀찮은 분은 저거보고 바로 따라하시면 됩니다.)

 

사용하려는 fnt파일을 우클릭 → Bitmap Font → Rebuild Bitmap Font를 눌러줍니다.

 

그러면 도화지에 A가 써져있는 파일이 새로 생기게 되는데 이것은 Text컴포넌트에 넣어주면 됩니다.

(안에 Material도 같이 생김을 확인할 수 있습니다.)

 

Unity에서 Text 컴포넌트 값, 각 파랑 부분이 수정된 부분

이제 Font에 만들어진 NumFont를 넣어주고

Color값은 하얀색으로 바꿔주며 (기본값은 어둡다.)

Material에 같이 만들어지 Font Material을 넣어주면 텍스트로 사용가능하게 됩니다.

(0~9까지 숫자만 있는 폰트이기에 0~9만 입력이 됩니다.)

 

(화면이 0만 입력하는 것으로 보이는 분은 해당 이미지를 클릭하시면 0~9까지 입력하는 것을 확인할 수 있습니다.)