詳解利用ShoeBox製作位元影像字型

標籤：

http://childhood.logdown.com/posts/190580/-details-using-shoebox-produce-bitmap-fonts?utm_source=tuicool

1 ShoeBox 簡介

• ShoeBox官網

ShoeBox是一個基於AdobeAIR實現的免費跨平台的工具。這個工具使用拖放、剪下板的工作流程方式，能夠很方便的處理遊戲圖片、建立位元影像字型等。

• 支援引擎

2 功能概括介紹

ShoeBox雖小，五髒俱全。作者做這個工具足見是用了心，如果各位想捐款，官網右上方:)。寫這篇文字的時候，筆者用的版本是最新版3.4.2。官網的一些圖片說明不少是老版本的，注意下就可以了。

Sprites

• 打包位元影像（Sprite Sheet）

這個功能非常強大。我們在遊戲製作中，經常利用TexturePacker等工具，將一些碎圖圖片合成一個精靈表單(spritesheet)，好處不言而喻。ShoeBox的這個功能，在一些方面並沒有TP工具那麼強大，但卻有自己的特色功能。TA可以將多個圖片，SWF(AS1,AS2,AS3版本)動畫或者GIF動畫合成到一個紋理圖上，強大吧，支援SWF/GIF哦。

• 讀取精靈（Read Sprites）

讀取一個精靈表單或者位元影像字型集，並將他們單獨匯出為精靈圖片。要求圖片檔案和尋找索引文字檔（即圖片描述資料檔案）。

• 提取精靈（Extract Sprites）

是我拿FlappyBird的精靈表單做的實驗。

檢測具有alpha通道的圖片的精靈圖片並一次標上序號匯出。這個功能可以在你丟失了圖片描述檔案的情況下，用作精靈表單反嚮導出精靈圖片。同一個物體如果在圖片上有透明間隙，會被表上多個序號，這裡不是很理想，朋友們如果要用這個功能的話注意下。

• 設定錨點（Sprite Pivots）

這個我們在Cocos2D裡面用的不多，starling裡面倒是有設定pivot的。

GUI

• 位元影像字型（Bitmap Font）

這個就是我們今天介紹的重點了。見後面的詳細介紹。

• 拆分PSD檔案（Split PSD）

這個功能絕對是美術人員的福利。強烈建議朋友們推薦給自己公司的MM們，給她們介紹下這個ShoeBox，並握著她們的小手手，手把手教她們如何使用這個功能。如果美術是GG，不管了。我不知道其他美術是怎麼做的，作為非美術的我，但經常使用Photoshop，我在匯出圖片的時候，如果圖層過多，通過隱藏其他圖層，將圖層的圖片一個個單獨匯出，其中還要涉及裁剪或者建立文檔匯出。麻煩不？當然了。所以，這個功能能高效的匯出PSD中的圖片。

• Slice 9

顧名思義，這個功能處理的是九宮格圖片。因為在Cocos2D中有自己的九宮圖類，這裡就不介紹了。

Animation

• 動畫幀（Ani Frames）

將GIF或者SWF動畫匯出為幀順序圖表。異常強大！將上面的GIF動畫圖片拖放到AniFrames上後，儲存會匯出該動畫的序列幀。SWF同理。這個功能通常用來解析資源。

• 幀表單（FrameSheet）

這個功能集合了動畫幀序列匯出（AniFrames）以及打包精靈圖片（Pack Sprites）功能，將GIF或者SWF動畫檔案拖放到上面後，可以儲存為一個精靈表單，內容包含了動畫的幀順序圖表。

Bitmaps

• JPNG位元影像（JPNG Bitmap）

將32位RGBA位元影像轉成24位的JPG格式圖，附帶一個alpha通道組。引擎解析需要載入JPG圖片，然後通過複製右邊的alpha通道並應用到左側的顏色地區來重新組成32位的RGBA圖。貌似這種做法現在很少用了。

• Mask Image

將JPG圖片進行遮罩和羽化，合成了一張複雜的圖。還不清楚這個具體怎麼使用。

Misc

• Flickr Upload
• Clean Up Text
• Mac to PC url

這三個遊戲基本用不到。就不介紹了。想要進一步瞭解的，可以深入官網探個究竟。

3 言歸正傳 建立位元影像字型

通常情況下，Windows下我們可以使用免費的Bitmap Font Generator，mac下可以使用付費的Glyph Designer。有了這款跨平台的ShoeBox，美術人員可以完全按照自己的設計，做出一套位元影像字型，支援中文。

工作流程

1.右鍵開啟設定面板，在Txt Chars輸入你要製作的字型，如我這裡輸入abcdefghijklmnopqrstuvwxyz這些字型，最後給大家呈現一個cocos quick的美術效果。FollowMe！

2.按住BitmapFont表徵圖2s左右，會複製我們的字元集到剪下板上，這時候開啟Photoshop，建立一個檔案，用文本輸入工具或者熱鍵T點擊畫布，然後粘帖剪下板上的字元到畫布上。如所示

字型毫無美感可言，不是嗎？

3.下面是發揮設計能力的時候了。讓美術盡情設計字型吧。我隨便給文字加了個描邊、外光暈、投影，如

4.儲存剛才的設計，匯出為PNG圖片。這裡需要注意下，在設計的時候字型的間距不要太靠近，否則ShoeBox在後面識別的過程，會將太過於靠近的字型識別為一個字型。

5.拖放上步儲存的圖片到BitmapFont表徵圖上，這時候會有流動的虛線表示可以拖放有效。如果你拖個JPG圖片的，是無效的。

6.見證奇蹟的時刻到了！

在設定面板的 Message 一欄裡面，我們輸入cocos quick，設定字元間距（KerningValue）為合適的值比如-2，空格寬度（TxtSpaceWidth）為5，然後apply應用確定，可以看到文字的預覽效果。

7.參數調整合適後，儲存字型（SaveFont），會在原始圖片目錄下產生一個PNG圖片和FNT資料檔案。這時候引擎就可以直接使用這兩個檔案了。

如果大家覺得看著文字麻煩，可以先看下視頻。

• 【優酷視頻ShoeBox 建立位元影像字型】
• 【優酷視頻ShoeBox 漢字位元影像例子】

Happy Designing!

Posted by ChildhoodAndy March 26, 2014 ShoeBox BMFont 位元影像字型 Bitmap Font Generator Glyph Designer

Comments

詳解利用ShoeBox製作位元影像字型