首先要介紹一下，圖字是怎么來的？其實這個很早很早了，記得80后在95年開始玩DOS下的仙劍奇俠傳的時候，那些令人難忘的中文對話吧！DOS下做游戲，使用的是C語言，不要說寫字了，很多復雜的操作甚至涉及驅動。那時候繪圖就是利用將圖片中的像素取出來后繪制在屏幕上，所以處理游戲中的中文，就只有把這些文字的像素預先寫到BMP或二進制文件中，然后讀取出來再設置屏幕像素以實現。后來進入DDRAW的時代，可以使用WINDOWS系統中的字庫來寫字了。把DDRAW的后臺表面進行LOCK，取出其DC，然后用GDI將文字寫到其DC上，這種做法后面也延續了很久，但GDI進行TextOut的效率非常慢，你要是想像夢幻西游一樣滿屏寫了，那得卡死，解決方案是什么？還是圖字。專業的游戲開發者會將所用到的字都預處理生成到一張圖片中，通過一個編碼與紋理UV對應文件來進行紋理UV的獲取后做為頂點的UV值然后進行繪制，有也的在每一幀中實時的將需要的字使用DDRAW寫字的方法繪制到相應的紋理上然后使用文字編碼與紋理UV對應信息來進行繪制，這樣效率就提高很多了。目前比較流行的做法是使用一張png圖片來存儲用到的文字。一個.fnt文件來存儲文字圖片說明信息。Cocos2d-x和LibGdx中都集成了相關的圖字處理類。在世界范圍內，也有很多游戲使用了這個方案。

??????? 我們以Cocos2d-x的tests工程中的LabelTest中的最后一個Label顯示“中國”為例來分析一下。

??????? 打開Cocos2d-x所在目錄下的tests\Resources\fonts目錄，找到bitmapFontChinese.png(文字貼圖文件)和bitmapFontChinese.fnt(文字圖片說明信息文件)?www.2cto.com

??????? 先打開png，我們可以看到它是512x512大小，上面由12行，14列個文字組成。包括有一些漢字，常用字符，數字和字母。它的每個字都是由青色到藍色的向下漸變。

??????? 再用UEdit或記事本打開bitmapFontChinese.fnt,可以看到它的構成,我在這里講一下。

第一行是對字體的介紹。

info face="華康海報體W12(P)" size=32 bold=0italic=0 charset="" unicode=0stretchH=100smooth=1 aa=1 padding=0,0,0,0 spacing=1,1

解釋：

face="華康海報體W12(P)":字體為”華康海報體W12(P)”,

size=32:大小為32像素

bold=0 :不加粗

italic=0:不使用斜體

charset="": charset是編碼字符集，這里沒有填寫值即使用默認，

unicode=0:不使用Unicode

stretchH=100:縱向縮放百分比

smooth=1 :開啟平滑

aa=1:開啟抗鋸齒

padding=0,0,0,0:內邊距，文字與邊框的空隙。

spacing=1,1 :外邊距，就是相臨邊緣的距離。

?

第二行是對應所有字貼圖的公共信息

common lineHeight=37 base=28 scaleW=512 scaleH=512pages=1 packed=0

解釋：

lineHeight=37：行高，如果遇到換行符時，繪制字的位置坐標的Y值在換行后增加的像素值。

base=28 :字的基本大小

scaleW=512 :圖片大小

scaleH=512:圖片大小

pages=1 :此種字體共用到幾張圖。

packed=0:圖片不壓縮

?

第三行是對應當前字貼圖的信息

//第一頁，文件名稱是”bitmapFontChinese.png”

page id=0 file="bitmapFontChinese.png"

?

第四行是當前貼圖中所容納的文字數量

chars count=204

?

第五行起把當前貼圖中所用到的所有文字的編碼以及對應在圖片上的矩形位置，偏移等列出來

第一個字符編碼為32,也就是空格，位置為0,0,寬高為0,0, 繪制到屏幕的相應位置時，像素偏移（0，28），繪制完后相應位置的x往后移15像素再畫下一個字符，字的圖塊在第1頁上

char id=32? x=0???? y=0???? width=0??? height=0???? xoffset=0???? yoffset=28??? xadvance=15???? page=0 chnl=0

第一個字符編碼為漢字”象”,也就是空格，位置為0,0,寬為33,高為36, 繪制到屏幕的相應位置時，像素偏移（0，-1），繪制完后相應位置的x往后移36像素再畫下一個字，字的圖塊在第1頁上

char id=35937? x=0???? y=0???? width=33??? height=36???? xoffset=0???? yoffset=-1??? xadvance=36???? page=0 chnl=0

char id=26696? x=33???? y=0???? width=35???? height=36???? xoffset=-1???? yoffset=-1??? xadvance=36???? page=0 chnl=0

char id=26071? x=68???? y=0???? width=35???? height=36???? xoffset=-1??? yoffset=-1??? xadvance=36???? page=0 chnl=0

…

?

再后面是描述兩個字在進行組合繪制時字距調整的相關信息，這里沒有要進行間距調整的字組合所以為設-1。對于字組合間距調整可以看此示例圖：http://www.2cto.com/uploadfile/2012/0903/20120903112659845.jpg

?

kernings count=-1

這個數字代表參與字組合間距調整的字的數量。

如果kernings count大于零，后面會有類似這樣的描述：

kerning first=102? second=41 amount=2

也就是’f’與’)’進行組合顯示’f)’時，’)’向右移2像素防止粘在一起。

?

通過上面這些信息，引擎可以通過編碼找到相應的文字并取出對應的紋理塊。

總結

以上是生活随笔為你收集整理的fnt 文件解释的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。