七 手游开发神器 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,修改代码如下：

 

[javascript]  view plain copy

 

1. //  
2. // CleanerScoreScene class  
3. //  
4. var MainLayer = function () {  
5.     cc.log("MainLayer")  
6.     this.scoreLabel = this.scoreLabel || {};  
7.     this.score = 123;  
8. };  
9.   
10. MainLayer.prototype.onDidLoadFromCCB = function () {  
11.     if (sys.platform == 'browser') {  
12.         this.onEnter();  
13.     }  
14.     else {  
15.         this.rootNode.onEnter = function () {  
16.             this.controller.onEnter();  
17.         };  
18.     }  
19.   
20.     this.rootNode.schedule(function (dt) {  
21.         this.controller.onUpdate(dt);  
22.     });  
23.   
24.     this.rootNode.onExit = function () {  
25.         this.controller.onExit();  
26.     };  
27. };  
28.   
29. MainLayer.prototype.onEnter = function () {  
30. }  
31.   
32. MainLayer.prototype.onUpdate = function (dt) {  
33.     this.score += dt;  
34.     this.scoreLabel.setString(Math.floor(this.score));  
35. }  
36.   
37. MainLayer.prototype.onExitClicked = function () {  
38.     cc.log("onExitClicked");  
39. }  
40.   
41.   
42. MainLayer.prototype.onExit = function () {  
43.     cc.log("onExit");  
44. }  

最后点击运行，分数不停的刷新变化