Cocos2d-JS中的cc.LabelAtlas

Cocos2d-JS中的cc.LabelAtlas,第1张

概述cc.LabelAtlas是图片集标签,其中的Atlas本意是“地图集”、“图片集”,这种标签显示的文字是从一个图片集中取出的,因此使用cc.LabelAtlas需要额外加载图片集文件。cc.LabelAtlas 比cc.LabelTTF快很多。cc.LabelAtlas 中的每个字符必须有固定的高度和宽度。 cc.LabelAtlas类图如下图所示,cc.LabelAtlas间接地继承了cc.N 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实现的HelloWorld文字

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对象,构造函数的第一个参数是要显示的文字;第二个参数是图片集文件(见下图所示);第三个参数是字符高度;第四个参数是字符宽度;第五个参数是开始字符。

图片集文件 为了防止硬编码问题,我们应该使用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"};


更多内容请关注最新Cocos图书《 Cocos2d-x实战:Js卷——Cocos2d-Js开发本书交流讨论网站:http://www.cocoagame.net
欢迎加入Cocos2d-x技术讨论群:257760386
更多精彩视频课程请关注智捷课堂Cocos课程:http://v.51work6.com
智捷课堂现推出Cocos会员,敬请关注: http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&categoryId=0

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

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

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

以上是内存溢出为你收集整理的Cocos2d-JS中的cc.LabelAtlas全部内容,希望文章能够帮你解决Cocos2d-JS中的cc.LabelAtlas所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1050213.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存