七 手游開發神器 cocos2d-x editor 之圖片字體（LabelBMFont）

我們平時玩游戲時候看到很多超炫的字體效果，大部分都是用了自定義圖片, cocos2dx里面叫做LabelBMFont;

運行效果如下；

代碼下載地址：http://www.kuaipan.cn/file/id_25348935635744540.htm?source=1

  首先在Resources目錄下新建一個fonts目錄存放字體

fonts目錄成功后，右擊，新建BMFont

命名后發現fonts目錄下有了 score.fnt文件，把準備好的字體圖片復制到fonts目錄，然后把圖片拖動到指定區域

接著一張一張的截取圖片，對應好名稱，完成后別忘記點擊保存

保存好了后查看Text可以看到已經對應好了，到這里圖片字體創建成功

接下來我們要使用score.fnt,打開MainLayer.ccbx,先創建一個普通的LabelTTF，調節參數，命名“分數”；

然后創建一個LabelBMFont,指定src為score.fnf,設置text值，只能是score.fnt里面的名稱，如果沒有實時刷新，關閉后打開；

我們要實現分數隨時間增加而變化的功能，打開MainLayer,js,修改代碼如下：

// // CleanerScoreScene class // var MainLayer = function () {     cc.log("MainLayer")     this.scoreLabel = this.scoreLabel || {};     this.score = 123; };  MainLayer.prototype.onDidLoadFromCCB = function () {     if (sys.platform == 'browser') {         this.onEnter();     }     else {         this.rootNode.onEnter = function () {             this.controller.onEnter();         };     }      this.rootNode.schedule(function (dt) {         this.controller.onUpdate(dt);     });      this.rootNode.onExit = function () {         this.controller.onExit();     }; };  MainLayer.prototype.onEnter = function () { }  MainLayer.prototype.onUpdate = function (dt) {     this.score += dt;     this.scoreLabel.setString(Math.floor(this.score)); }  MainLayer.prototype.onExitClicked = function () {     cc.log("onExitClicked"); }   MainLayer.prototype.onExit = function () {     cc.log("onExit"); } 

下一篇文章 我會介紹cocos2d-x  editor的動畫和幀動畫      筆者（李元友）

資料來源：cocos2d-x  editor