Cocos2d-JS中的cc.LabelAtlas


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

 Cocos2d-JS中的cc.LabelAtlas
cc.LabelAtlas类图

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

Cocos2d-JS中的cc.LabelAtlas

cc.LabelAtlas实现的Hello World文字

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

var HelloWorldLayer = cc.Layer.extend({     sprite:null,     ctor:function () {           this._super();       ……          // 创建并初始化标签            var helloLabel = new cc.LabelAtlas("Hello World",            res.charmap_png,           48, 66, " ");           ①            helloLabel.x = size.width / 2 - helloLabel.getContentSize().width / 2;          helloLabel.y = size.height - helloLabel.getContentSize().height;          this.addChild(helloLabel, 5);        ……          return true;     } });

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

Cocos2d-JS中的cc.LabelAtlas
图片集文件

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

var res = {     HelloWorld_png : "res/HelloWorld.png",     CloseNormal_png : "res/CloseNormal.png",     CloseSelected_png : "res/CloseSelected.png",     charmap_png : "res/fonts/tuffy_bold_italic-charmap.png" };

4 responses on “Cocos2d-JS中的cc.LabelAtlas

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>