길건너 친구들 모작 개발일지9 (비트맵 폰트 및 UI 타이틀)

비트맵 폰트

여태까지는 넥슨에서 제공하는 Maplestroy 폰트를 이용하고 있었습니다. 

하지만, 게임 특유의 네모네모한 감성을 살리지 못해서, 비트맵 폰트를 만들어서 사용해보려고 합니다. 

https://horeng-study.tistory.com/9

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

이 블로그를 참고했습니다. 

비트맵 폰트는, 이미지를 사용하여 이미지를 폰트처럼 사용하는 방식입니다. 

그래서 실제로 게임을 해보며, 사용되는 폰트 이미지들을 포토샵을 통해 재가공했습니다. 

포토샵 재가공 작업 모습

총 3가지 폰트가 있는데, 점수를 보여주는 폰트, 코인 수량을 알려주는 폰트, 최고 기록을 알려주는 폰트가 있습니다. 

각각의 폰트에 맞는 이미지들을 재가공 하였고, 아래는 재가공한 이미지들 입니다. 

포토샵을 통해 재가공한 이미지들

이 이미지들을 BMFont 툴을 이용하여 폰트로 만들어 줍니다. 

https://www.angelcode.com/products/bmfont/

BMFont - AngelCode.com

위에는 툴 다운로드 링크입니다. 

실행하면 아래와 같은 화면이 나옵니다. 

그리고 위에 참고한 블로그에 나온 방법을 통해, 각각 맞는 폰트들을 만들어주었습니다. 

만든 폰트들

그리고 유니티에서 이 폰트들을 활용하기 위해 AssetStore에서 

위의 asset을 다운받아, 유니티에서 사용할 수 있도록 변환하였습니다. 

유니티에서 재가공한 폰트들

그리고 전에 포스트에서 한 방법 그대로 폰트만 적용시켜주면, 아래와 같은 결과가 나옵니다. 

비트맵 폰트 적용

---

UI 타이틀

그리고 시작할 때, 게임 화면이 있는데, 그 부분을 만들어보겠습니다. 

포토샵을 통해 재가공한 이미지

위에 이미지에 애니메이션을 만들어 줍니다. 

시작시 나오는 타이틀 애니메이션

그리고, 게임을 시작하면, 사라지는 애니메이션도 만듭니다. 

GameMain 스크립트에서 Space바를 누르면 게임이 시작되도록 설정해줍니다. 

이렇게 하면 아래와 같은 결과가 나옵니다. 

이상으로 비트맵 폰트와 타이틀 애니메이션 구현을 완료했습니다.