第五節 使用BMFont軟件製作位圖字體
好看的字體可以增加遊戲的美觀度或者趣味性,本節筆者就來帶教大家如何使用BMFont來製作字體並添加到遊戲中。
注:由於BMFont只有exe格式,所以本節筆者將在Windows系統上進行演示。
下載BMFont
大家可以點擊這個BMFont官網鏈接去下載該軟件。
網站一共提供了兩種下載版本:安裝版和免安裝版。
筆者建議就直接下載免安裝版的,方便又快捷,而且版本較新,相對於安裝版本(1.13)也修復了很多bug。
下載完畢後雙擊運行就可以了:
確定字符
新建一個txt文件(名稱隨意),輸入你要修改(字體)的字符。按照我們前幾節的遊戲開發情況來看,需要用到的字符就是下面這些:
不過我們也可以稍微多加一些以防後續開發會用到,這樣可以少一次重新做位圖字體的麻煩:
確定好字符後,請點擊保存->另存爲,確保自己將文本編碼方式設置爲UTF-8:
注:爲防止以後要添加新的字符,請不要刪除這個txt文件。
字體添加和導出設置
點擊Options->Font settings打開字體設置窗口。點擊Font下拉框選擇已經在系統中安裝好的字體:
注:通常要製作位圖字體的話,我們會使用付費的或者已經獲取版權的字體。如果是系統自帶的字體,我們其實不需要製作,直接在Cocos引擎中進行選擇就可以了。那筆者這裏爲了演示,就直接在BMFont中用系統自帶的字體了。
點擊OK後,我們再通過Options->Export options打開導出設置窗口並進行如下設置:
- 由於我們的字符數量不是特別多,所以可以讓最後生成的字體圖片小一些。如果字符數很多,而這裏的圖片大小又設置的很小的話,那BMFont爲了把所有字符都包含進去,就會生成很多張同等大小的圖片。
- 位數我們選擇32位。
- 最後的格式選擇png,也就是將字體放在圖片上。
點擊OK保存。
導入字符
點擊Edit->Select chars from file,選擇我們剛纔保存好的txt文件導入字符。此時出現在txt文件中的字符就會在窗口中發亮顯示:
導出位圖字體
點擊Options->Save bitmap font as導出位圖字體:
一共生成兩個文件,分別是fnt格式和png格式。
接着我們打開Tetris.fnt文件查看下里面size的值:
如果這個是負數,那麼我們在使用該位圖字體時,所有的字體將會倒着顯示。所以爲了正常顯示,我們需要把這個負號給去掉:
使用位圖字體
接下來我們就在Cocos Creator中使用剛製作好的位圖字體。
首先在資源管理器中添加位圖字體:
接着將上面圖標爲Bf的文件拖入score節點上的Label組件中就行了:
運行截圖如下: