獨立開發者必備技能 - 為Unity游戲制作Bitmap字體(圖片字體)

題記 - 作為獨立開發者,需要面對產品從策劃到開發到發布到運營所有過程中的方方面面,分開來說,每個步驟都是一個大課題,按理來講需要多人分工合作才能把產品做好,而獨立開發者卻只能自己扛起所有大旗,從這點來看,獨立開發者是孤獨的,因為每當他環顧四周,看到的只有鏡子里的自己。(我建了一個QQ群:438640117,歡迎同樣是獨立開發者的你加入,共同探討獨立開發中遇到的各種問題,分享各種經驗。感謝這個美好的時代,讓我們雖然遠隔萬水千山依然能方便的交流)



這篇文章主要是分享一下Unity中如何制作Bitmap字體(圖片字體),我假設看到這篇文章的人都已經知道什么是制作Bitmap字體了,我相信,如果你是獨立開發者你肯定知道什么叫制作Bitmap字體。我曾經在幾個Unity技術群里問過Unity里怎么制作Bitmap字體,但是從得到的回答看,他們并不清楚什么叫制作,他們只知道怎么使用,因為這些素材早由美術做好提供給了他們。這就是獨立開發者孤獨的一個體現(也許是我問錯了地方,我也問過幾個獨立開發者群,但是得不到任何回答,這些群里更多的是吹水,因此我才想建一個真正能交流獨立開發問題而不是只有吹水的群,我想不明白為什么這些人要在獨立開發群里吹水,要吹水可以去水群啊),很多時候你遇到的問題沒有人能幫你,你只能靠自己。如果你不清楚什么是制作Bitmap字體的話請先谷歌一下(抵制百度從我做起)。


先分享一個免費的方法:以前用Cocos2d-x時我是用的是一個俄羅斯人寫的java開源軟件FontEditor這里可以下載源碼,這個工具可以用來制作Cocos2d-x使用的fnt字體(等有時間我準備給它加個自動識別字符塊的功能,這個想法已經有一年多了遲遲沒有動手,哭)。這個免費的方法需要的就是FontEditor制作好后導出的這個fnt文件和字母圖片。接下來還需要一個Unity插件Bitmap Font Importer,將這個插件導入到你的Unity工程,然后再導入前面提到的fnt文件和圖片,這個插件會根據這兩個文件自動生成一個對應的Unity可用的Custom Font。就是這么簡單,不過我要詳細說的并不是這個方法,因為我喜歡用PS做字體圖片(這樣自定義程度可以更高),再用FontEditor來制作fnt文件,FontEditor需要手動為每個字母設置區域,這個過程非常痛苦,如果你是用Bitmap字體生成軟件來做的話,那這個方法是最方便的。我還試過ShoeBox,怎么說呢,這個工具其它的功能比較強大,但是字體制作功能很坑,它是自動識別字母的,但是它的自動識別算法估計不太行,稍微炫一點的圖片總是會識別錯誤,比如把1識別成L,a識別成e,識別錯誤也就算了,你還不能手動去調整,也許是我用的姿勢不對,如果有知道的請告訴我,非常感謝。


接下來分享一個我強烈推薦的方法,這個方法需要一個Unity售價9美金的插件Font Setter Packer下載地址),我想解釋一下為什么我愿意花9美金來購買這個插件。我本身也是一個很摳的人,要我花9美金買一個軟件那這個軟件一定要能給我帶來遠超過9美金的收益才行,而這個插件正如作者在介紹中說的那樣,能讓你在幾分鐘內從一張png字母圖片開始完成一個Unity的Custom Font字體。這個過程假設使用FontEditor來做的話,視字母的多少花費的時間大概是半個小時到一個小時,如果還有漢字的話,這個時間會更長。獨立開發者最缺的就是時間,有太多事情需要我們花時間去操心了,能花點小錢就節約大量時間出來這在我看來是非常劃算的。廢話不多說,下面開始步入正題。


原料:

1.Font Setter Packer插件。

2.一張提前制作好的有字母或漢字帶透明通道的png圖片,注意字母之間一定要留一定空隙。比如這樣的(這只是我為了測試這個插件隨意制作的,花費時間不超過5分鐘)

步驟:

1.導入Font Setter Packer插件,如果已經導入請忽略。

2.導入字母圖片,并注意設置成下圖所示的樣子,設置好以后不要忘記Applay

3.打開Unity中菜單欄中Window->Font Editor窗口

4.選擇需要編輯的字體圖片文件

然后你會看到這個界面

5.進入自動設置模式,其實是半自動,因為還是要手動輸入對應的字母或漢字

6.逐個輸入對應的字母或漢字,每輸入完一個以后按回車鍵會自動進入下一個字母的輸入模式,所有字母都輸入完成后按Stop退出自動模式

退出自動設置模式后是這個樣子

7.點擊+1,增加一個空格字符,并將空格字符對應的位置放在合適的位置,調整好寬度和高度

8.設置字符對應區域的錨點的垂直位置,注意,同一行的錨點必須保證在同一水平線上,可以直接用鼠標拖動調整錨點位置,也可以直接通過修改Y的值來精確設置錨點的垂直位置

設置好以后是這個樣子的,到此字符的設置部分就算完成了

9.重新打包,其實不打包也是可以的,只是打包會更節約空間。

Pack method是圖片打包方式,可以多試幾次選擇一個最優的方案,每變更一次Pack method都需要重新點擊Pack按鈕重新打包一次以查看效果。

確認結果后點擊Accept Pack Result按鈕完成打包,最后關閉Font Editor對話框即可

此時可以看到asset文件夾下多出來幾個文件font-1(Font),font-1(Font)(Packed),font-1(Material),font-1(Material)(Packed),font-1(Packed),其中帶Packed的都是打包后生成的文件,而紅框內的文件是打包之前的,打包完成以后我們不再需要它們,刪除。

最后Fonts文件夾內只剩下3個文件

10.測試,在場景內新建一個UI->Text對象,Text的Font屬性選擇為我們剛剛創建好的font-1(Font)(Packed)文件,Materia屬性選擇font-1(Material)(Packed),在Text屬性隨便輸入一句話。需要注意的是,由于Bitmap字體的特殊性,我們無法通過直接設置Font size的大小來設置字體的顯示大小,但是我們可以通過設置文字對象的縮放大小來達到這個目的。此外,如果你的圖片字體比較大,那么你可能看不到任何文字顯示,這時候你需要調整文字對象的width和height到合適的大小來使文字得到顯示。

到此分享結束,謝謝觀賞!

最后再為我的群打一下廣告,如果你是獨立開發者,歡迎加入這個群:438640117

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容