码迷,mamicode.com
首页 > Web开发 > 详细

Cocos2d-JS中的cc.LabelAtlas

时间:2015-03-22 10:35:37      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:

cc.LabelAtlas是图片集标签,其中的Atlas本意是“地图集”、“图片集”,这种标签显示的文字是从一个图片集中取出的,因此使用cc.LabelAtlas需要额外加载图片集文件。cc.LabelAtlas 比cc.LabelTTF快很多。cc.LabelAtlas 中的每个字符必须有固定的高度和宽度。
cc.LabelAtlas类图如下图所示,cc.LabelAtlas间接地继承了cc.Node类,具有cc.Node的基本特性,它还直接继承了cc.AtlasNode。

 技术分享
cc.LabelAtlas类图



如果我们要展示如下图所示的Hello World文字,我们可以使用cc.LabelAtlas实现。

技术分享

cc.LabelAtlas实现的Hello World文字

cc.LabelAtlas实现的Hello World文字主要代码如下:

[html] view plaincopy技术分享技术分享
 
  1. var HelloWorldLayer = cc.Layer.extend({  
  2.     sprite:null,  
  3.     ctor:function () {  
  4.           this._super();  
  5.             ……  
  6.          // 创建并初始化标签    
  7.             var helloLabel = new cc.LabelAtlas("Hello World",   
  8.                 res.charmap_png,  
  9.                 48, 66, " ");                                           ①  
  10.   
  11.   
  12.             helloLabel.x = size.width / 2 - helloLabel.getContentSize().width / 2;  
  13.             helloLabel.y = size.height - helloLabel.getContentSize().height;  
  14.             this.addChild(helloLabel, 5);  
  15.             ……  
  16.             return true;  
  17.     }  
  18. });  


上述代码第①行是创建一个cc.LabelAtlas对象,构造函数的第一个参数是要显示的文字;第二个参数是图片集文件(见下图所示);第三个参数是字符高度;第四个参数是字符宽度;第五个参数是开始字符。

技术分享
图片集文件

为了防止硬编码问题,我们应该使用res.charmap_png表示资源的路径,变量res.charmap_png是在resource.js中定义的资源名,resource.js代码如下:

[html] view plaincopy技术分享技术分享
 
  1. var res = {  
  2.     HelloWorld_png : "res/HelloWorld.png",  
  3.     CloseNormal_png : "res/CloseNormal.png",  
  4.     CloseSelected_png : "res/CloseSelected.png",  
  5.     charmap_png : "res/fonts/tuffy_bold_italic-charmap.png"  
  6. };  

 

 

更多内容请关注最新Cocos图书《Cocos2d-x实战:JS卷——Cocos2d-JS开发》

本书交流讨论网站:http://www.cocoagame.net

欢迎加入Cocos2d-x技术讨论群:257760386

更多精彩视频课程请关注智捷课堂Cocos课程:http://v.51work6.com

 

 

 

 

 

《Cocos2d-x实战 JS卷》现已上线,各大商店均已开售:

京东:http://item.jd.com/11659698.html

欢迎关注智捷iOS课堂微信公共平台,了解最新技术文章、图书、教程信息
技术分享

Cocos2d-JS中的cc.LabelAtlas

标签:

原文地址:http://www.cnblogs.com/iOS-Blog/p/4356764.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!