七 手遊開發神器 cocos2d-x editor 之圖片字體(LabelBMFont)

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


運行效果如下;





代碼下載:http://share.weiyun.com/c3f24a752d5e6f26ca3e1e97855807f6 (snow-font)



  首先在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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章