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文字主要代码如下:

  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. helloLabel.x = size.width / 2 - helloLabel.getContentSize().width / 2;
  11. helloLabel.y = size.height - helloLabel.getContentSize().height;
  12. this.addChild(helloLabel, 5);
  13. ……
  14. return true;
  15. }
  16. });

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

图片集文件

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

  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的更多相关文章

  1. cocos2d JS 中的数组拼接与排序

    var arrA = [];//创建三个局部变量的新数组 var arrB = []; var arrC = []; var newCards = this.MyMahjong;//创建一个新的局部变 ...

  2. cocos2d js ClippingNode 制作标题闪亮特效

    1.效果图: 之前在<Android 高仿 IOS7 IPhone 解锁 Slide To Unlock>中制作了文字上闪亮移动的效果,这次我们来看下怎样在cocos2d js 中做出类似 ...

  3. cocos2d JS 本地缓存存储登陆记住账号密码->相当于C++中的UserDefault

    在cocos-js 3.0以上的版本中,当我们用到本地存储的时候,发现以前用到的UserDefault在JS中并没有导出,而是换成了LocalStorage. 在LocalStorage.h文件中我们 ...

  4. JS中parseInt()、Numer()深度解析

    JS中字符串转换为数字有两种方式: 1.parseInt函数 定义:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/ ...

  5. 区别和详解:js中call()和apply()的用法

    1.关于call()和apply()的疑点: apply和call的区别在哪里 什么情况下用apply,什么情况下用call apply的其他巧妙用法(一般在什么情况下可以使用apply) 2.语法和 ...

  6. JS中 toString() & valueOf()

    数据的转换 所有对象继承了两个转换方法: 第一个是toString(),它的作用是返回一个反映这个对象的字符串 第二个是valueOf(),它的作用是返回它相应的原始值 toString() toSt ...

  7. JS中定义类的方法

    JS中定义类的方式有很多种: 1.工厂方式    function Car(){     var ocar = new Object;     ocar.color = "blue" ...

  8. jquery中的each用法以及js中的each方法实现实例

    each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...

  9. js中关于事件处理函数名后面是否带括号的问题

    今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Leve ...

随机推荐

  1. Educational Codeforces Round 4 A. The Text Splitting 水题

    A. The Text Splitting 题目连接: http://www.codeforces.com/contest/612/problem/A Description You are give ...

  2. hdu 4740 The Donkey of Gui Zhou bfs

    The Donkey of Gui Zhou Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproble ...

  3. BackTrack5 (BT5)无线password破解教程之WPA/WPA2-PSK型无线password破解

    昨天公布了BackTrack5 (BT5)无线weppassword破解教程之minidwep-gtk破解法一文,对BT5下破解wep无线password的简单方法做了介绍,今天奶牛为朋友们介绍下怎样 ...

  4. JavaScript Modules

    One of the first challenges developers new to JavaScript who are building large applications will ha ...

  5. 使用ActivityGroup来切换Activity和Layout

    前言 在一个主界面中做Activity切换一般都会用TabActivity,使用方便,Activity互相之间相对独立,但是可定制性不强,而且修改起来很麻烦.当然也可以把layout分开,把逻辑代码全 ...

  6. iOS开发——实用OC篇&多种定时器详细介绍

    多种定时器详细介绍   在软件开发过程中,我们常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法.在这个时候,我们就需要用到定时器. 然而,在iOS中有很多方法完成以上的任务,到底有 ...

  7. 进程产生的三种方式:fork、system和exec

    1.fork()方式 fork()函数以父进程为蓝本复制一个进程,其ID号与父进程ID号不同.在Linux环境下,fork()是以写复制实现的,只有内存等与父进程不同,其他与父进程共享,只有在父进程或 ...

  8. apache htaccess

    #RewriteCond :重新条件#RewriteRule : 重写规则# .htaccess文件中的规则会以它们出现的顺序被处理 <IfModule mod_rewrite.c>Rew ...

  9. Golang学习 - io 包

    ------------------------------------------------------------ 先说一下接口,Go 语言中的接口很简单,在 Go 语言的 io 包中有这样一个 ...

  10. docker 连接容器

    1.通过端口映射 sudo docker run -d -P training/webapp python app.py 容器有一个内部网络和IP地址(在使用Docker部分我们使用docker in ...