Cocos2d-x Lua中使用标签
游戏场景中的文字包括了静态文字和动态文字。静态文字如下图所示游戏场景中①号文字“COCOS2DX”,动态文字如图4-1所示游戏场景中的②号文字“Hello World”。
静态文字一般是由美工使用Photoshop绘制在背景图片上,这种方式的优点是表现力很丰富,例如:①号文字“COCOS2DX”中的“COCOS”、“2D”和“X”设计的风格不同,而动态文字则不能,而且静态文字无法通过程序访问,无法动态修改内容。
动态文字一般是需要通过程序访问,需要动态修改内容。Cocos2d-x Lua可以通过标签类实现。
下面我们重点介绍Cocos2d-x Lua中标签类,Cocos2d-x Lua中标签类主要有三种:LabelTTF、LabelAtlas和LabelBMFont。此外,在Cocos2d-x 3.x之后又推出了新的标签类Label。
LabelTTF
LabelTTF是使用系统中的字体,它是最简单的标签类。LabelTTF类图如下图所示,可以LabelTTF继承了Node类,具有Node的基本特性。此外还实现了LabelProtocol接口。
如果我们要展示图中所示的Hello World文字,我们可以使用LabelTTF实现。
LabelTTF实现的Hello World文字主要代码如下:
- function GameScene:createLayer()
- local layer = cc.Layer:create()
- // 创建并初始化标签
- local label = cc.LabelTTF:create("Hello World", "Arial", 64) ①
- label:setPosition(cc.p(size.width/2, size.height - label:getContentSize().height))
- layer:addChild(label, 1)
- local sprite = cc.Sprite:create("HelloWorld.png")
- sprite:setPosition(cc.p(size.width/2,
- size.height/2))
- layer:addChild(sprite, 0)
- return layer
- end
上述代码第①行是创建一个LabelTTF对象,create函数的第一个参数是要显示的文字,第二个参数是系统字体名,第三个参数是字体的大小,事实上该create函数省略了三个参数,create函数的完整定义如下:
- cc.LabelTTF:create (text,
- fontName,
- fontSize,
- dimensions=cc.size(0,0), --在屏幕上占用的区域大小,cc.size(0,0)表示按照字体大小显示
- hAlignment= cc.TEXT_ALIGNMENT_LEFT, -- 水平对齐,默认值是靠右对齐
- vAlignment= cc.VERTICAL_TEXT_ALIGNMENT_TOP) -- 垂直对齐,默认值是顶对齐
其中后三个参数有默认值,如果不指定就会使用默认值。
LabelAtlas
LabelAtlas是图片集标签,其中的Atlas本意是“地图集”、“图片集”,这种标签显示的文字是从一个图片集中取出的,因此使用LabelAtlas需要额外加载图片集文件。LabelAtlas 比LabelTTF快很多。LabelAtlas 中的每个字符必须有固定的高度和宽度。
LabelAtlas类图如下图所示,LabelAtlas间接地继承了Node类,具有Node的基本特性,它还直接继承了AtlasNode。此外还实现了LabelProtocol接口。
如果我们要展示图中所示的Hello World文字,我们可以使用LabelAtlas实现。
LabelAtlas实现的Hello World文字主要代码如下:
- function GameScene:createLayer()
- local layer = cc.Layer:create()
- local label = cc.LabelAtlas:_create("HelloWorld",
- "fonts/tuffy_bold_italic-charmap.png", 48, 66, string.byte(" ")) ①
- label:setPosition(cc.p(size.width/2 - label:getContentSize().width / 2,
- size.height - label:getContentSize().height))
- layer:addChild(label, 1)
- local sprite = cc.Sprite:create("HelloWorld.png")
- sprite:setPosition(cc.p(size.width/2, size.height/2))
- layer:addChild(sprite, 0)
- return layer
- end
上述代码第①行是创建一个LabelAtlas对象,create函数的第一个参数是要显示的文字,第二个参数是图片集文件(见如图所示),第三个参数是字符高度,第四个参数是字符宽度,第五个参数是开始字符。
使用LabelAtlas需要注意的是图片集文件需要放置在Resources目录下。
LabelBMFont
LabelBMFont是位图字体标签,需要添加字体文件:包括一个图片集(.png)和一个字体坐标文件(.fnt)。LabelBMFont比LabelTTF快很多。LabelBMFont中的每个字符的宽度是可变的。
LabelBMFont类图如下图所示,可以LabelBMFont间接地继承了Node类,具有Node的基本特性,此外还实现了LabelProtocol接口。
如果我们要展示下图所示的Hello World文字,我们可以使用LabelBMFont实现。
LabelBMFont实现的Hello World文字主要代码如下:
- function GameScene:createLayer()
- local layer = cc.Layer:create()
- local label = cc.LabelBMFont:create("HelloWorld", "fonts/BMFont.fnt") ①
- label:setPosition(cc.p(size.width/2,
- size.height - label:getContentSize().height))
- layer:addChild(label, 1)
- local sprite = cc.Sprite:create("HelloWorld.png")
- sprite:setPosition(cc.p(size.width/2, size.height/2))
- layer:addChild(sprite, 0)
- return layer
- end
上述代码第①行是创建一个LabelBMFont对象,create函数的第一个参数是要显示的文字,第二个参数是图片集文件。图片集文件BMFont.fnt如下图所示,对应还有一个字体坐标文件BMFont.fnt。
坐标文件BMFont.fnt代码如下:
- info face="AmericanTypewriter" size=64 bold=0 italic=0 charset="" unicode=0 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=2,2
- common lineHeight=73 base=58 scaleW=512 scaleH=512 pages=1 packed=0
- page id=0 file="BMFont.png"
- chars count=95
- char id=124 x=2 y=2 width=9 height=68 xoffset=14 yoffset=9 xadvance=32 page=0 chnl=0 letter="|"
- char id=41 x=13 y=2 width=28 height=63 xoffset=1 yoffset=11 xadvance=29 page=0 chnl=0 letter=")"
- char id=40 x=43 y=2 width=28 height=63 xoffset=4 yoffset=11 xadvance=29 page=0 chnl=0 letter="("
- ... ...
- char id=32 x=200 y=366 width=0 height=0 xoffset=16 yoffset=78 xadvance=16 page=0 chnl=0 letter="space"
使用LabelBMFont需要注意的是图片集文件和坐标文件需要放置在Resources目录下,文件命名相同。图片集合和坐标文件是可以通过位图字体工具制作而成的,由于位图字体工具的使用请参考本系列丛书的工具卷(《Cocos2d-x实战:工具卷》)。
Cocos2d-x 3.x标签类Label
Cocos2d-x 3.x后推出了新的标签类Label,这种标签通过使用FreeType[ FreeType库是一个完全免费(开源)的、高质量的且可移植的字体引擎,它提供统一的接口来访问多种字体格式文件。——引自于百度百科 http://baike.baidu.com/view/4579855.htm
]来使它在不同的平台上有相同的视觉效果。由于使用更快的缓存代理,它的渲染也将更加快速。Label提供了描边和阴影等特性。
Label类的类图如下图所示。
创建Label类静态create函数常用的有如下几个:
- cc.Label:createWithSystemFont(text, -- 是要显示的文字
- font, -- 系统字体名
- fontSize, -- 字体的大小
- dimensions = cc.size(0,0), -- 可省略,参考LabelTTF定义
- vAlignment= cc.TEXT_ALIGNMENT_LEFT, -- 可省略,参考LabelTTF定义
- vAlignment= cc.VERTICAL_TEXT_ALIGNMENT_TOP -- 可省略,参考LabelTTF定义
- )
- cc.Label:createWithTTF(const std::string & text,
- fontFile, -- 字体文件
- fontSize,
- dimensions = cc.size(0,0),
- hAlignment= cc.TEXT_ALIGNMENT_LEFT,
- vAlignment= cc.VERTICAL_TEXT_ALIGNMENT_TOP
- )
- cc.Label:createWithTTF(ttfConfig, -- 字体配置信息
- text,
- hAlignment= cc.TEXT_ALIGNMENT_LEFT,
- int maxLineWidth = 0 -- 可省略,标签的最大宽度
- )
- cc.Label:createWithBMFont(const std::string& bmfontFilePath, -- 位图字体文件
- text,
- hAlignment= cc.TEXT_ALIGNMENT_LEFT,
- int maxLineWidth = 0,
- imageOffset = cc.p(0,0) -- 可省略,在位图中的偏移量
- )
其中createWithSystemFont是创建系统字体标签对象,createWithTTF是创建TTF字体标签对象,createWithBMFont是创建位图字体标签对象。
createWithBMFont
下面我们通过一个实例介绍一下,它们的使用。这个实例如下图所示。
下面我们看看HelloWorldScene.cpp中init函数如下:
- function GameScene:createLayer()
- local layer = cc.Layer:create()
- local label1 = cc.Label:createWithSystemFont("世界你好1 ", "Arial", 36) ①
- label1:setPosition(cc.p(size.width/2, size.height - 100))
- layer:addChild(label1, 1)
- local label2 = cc.Label:createWithTTF("世界你好2", "fonts/STLITI.ttf", 36) ②
- label2:setPosition(cc.p(size.width/2, size.height - 200))
- layer:addChild(label2, 1)
- local label3 = cc.Label:createWithBMFont ("fonts/bitmapFontChinese.fnt", "中国") ③
- label3:setPosition(cc.p(size.width/2, size.height - 300))
- layer:addChild(label3, 1)
- local ttfConfig = {} ④
- ttfConfig.fontFilePath="fonts/Marker Felt.ttf"
- ttfConfig.fontSize = 32
- local label4 = cc.Label:createWithTTF(ttfConfig, "Hello World4") ⑤
- label4:setPosition(cc.p(size.width/2, size.height - 400))
- layer:addChild(label4 , 1)
- ttfConfig.outlineSize = 4 ⑥
- local label5 = cc.Label:createWithTTF(ttfConfig, "Hello World5") ⑦
- label5:setPosition(cc.p(size.width/2, size.height - 500))
- label5:enableShadow(cc.c4b(255,255,255,128), cc.size(4, -4)) ⑧
- label5:setColor(cc.c3b(255, 0, 0)) ⑨
- layer:addChild(label5, 1)
- return layer
- end
在上面的代码中第①行是通过createWithSystemFont函数创建Label对象,第②行代码是通过createWithTTF是创建TTF字体标签对象,第③行代码是createWithBMFont是创建位图字体标签对象。
第④行代码local ttfConfig = {}是声明一个TTFConfig变量,TTFConfig的属性如下:
- fontFilePath -- 字体文件路径
- fontSize, -- 字体大小
- glyphs = cc.GLYPHCOLLECTION_DYNAMIC, -- 字体库类型
- customGlyphs -- 自定义字体库
- outlineSize -- 字体描边
- distanceFieldEnabled -- 开启距离字段字体开关
第⑤行代码cc.Label:createWithTTF(ttfConfig, "Hello World4")是通过指定TTFConfig创建TTF字体标签。第⑥行代码ttfConfig.outlineSize = 4设置TTFConfig的描边字段。第⑦行代码cc.Label:createWithTTF(ttfConfig, "Hello World5")是重新创建TTF字体标签。
第⑧行代码label5:enableShadow(cc.c4b(255,255,255,128), cc.size(4, -4))是设置标签的阴影效果。第⑨行代码label5:setColor(cc.c3b(255, 0, 0))是设置标签的颜色。
本书交流讨论网站:http://www.cocoagame.net
更多精彩视频课程请关注智捷课堂Cocos课程:http://v.51work6.com
京东:http://item.jd.com/11659698.html
欢迎关注智捷iOS课堂微信公共平台,了解最新技术文章、图书、教程信息
Cocos2d-x Lua中使用标签的更多相关文章
- cocos2d-x 2.2.0 如何在lua中注册回调函数给C++
cocos2d-x内部使用tolua进行lua绑定,但是引擎并没有提供一个通用的接口让我们可以把一个lua函数注册给C++层面的回调事件.翻看引擎的lua绑定代码,我们可以仿照引擎中的方法来做.值得吐 ...
- lua中打印所以类型功能实现table嵌套table
lua中打印所以类型功能实现 本人測试 number.string.bool.nil.table嵌套table.userdata没问题 共享一下有什么问题请拍砖 代码例如以下 cclog = func ...
- Lua中的weak表——weak table(转)
弱表(weak table)是一个很有意思的东西,像C++/Java等语言是没有的.弱表的定义是:A weak table is a table whose elements are weak ref ...
- cocos2dx lua中异步加载网络图片,可用于显示微信头像
最近在做一个棋牌项目,脚本语言用的lua,登录需要使用微信登录,用户头像用微信账户的头像,微信接口返回的头像是一个url,那么遇到的一个问题就是如何在lua中异步加载这个头像,先在引擎源码里找了下可能 ...
- cocos2d-x 3.0 在lua中调用自定义类
环境 windows8, cocos2d-x 3.0, 现在开始安装需要的一些其它包 1. 按README.mdown文档上面要求的, 下载在windows下要安装的东东, 主要就是python2.7 ...
- cocos2d-x lua 中使用protobuf并对http进行处理
cocos2d-x lua 中使用protobuf并对http进行处理 本文介绍 cocos2d-x lua 中使用http 和 基于cocos2d-x 对lua http的封装(部分ok) 本博客链 ...
- 从架构层面杜绝lua中使用未定义的变量
# 从架构层面杜绝lua中使用未定义的变量 标签(空格分隔): lua --- lua中有一个很坑的地方:1.就是如果一个变量拼写错误,会自动的认为你定义了一个值为nil的全局变量.2.如果在func ...
- cocos2d-x lua中实现异步加载纹理
原文地址: http://www.cnblogs.com/linchaolong/p/4033118.html 前言 问题:最近项目中需要做一个loading个界面,界面中间有一个角色人物走动的 ...
- Html中<font>标签的使用
Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...
随机推荐
- 使RESTful Web服务更加实用的10个建议
提示:随着RESTful Web services的流行程度不断地上升,开发人员需要知道如何避免开发中的陷阱以及让开发出来的Web service达到自己能做到的最好程度. 过去的几年里,我们看到RE ...
- .Net 使用的快捷键
快捷键 功能 CTRL + SHIFT + B生成解决方案 CTRL + F7 生成编译 CTRL + O 打开文件 CTRL + SHIFT + O打开项目 CTRL + SHIFT + C显示类视 ...
- lucene 异常 Lock obtain timed out 解决方法
http://terje.blog.163.com/blog/static/119243712008102122316595/ 一般都是索引建立的过程中,不正常操作影响了IndexWriter ...
- Cookie的增删改查
增加: 第一种方法:Response.Cookies[“UserName”].Value=”张三” Response.Cookies[“UserName”].Expires=DateTime.Now. ...
- MyTest——边界检测
实现思路如下: Step1:大文件的内存映射,多线程数据读取,加快读取速度. Step2:点云数据预处理(抽希.去噪点). Step3:Step2处理后数据使用kdtree进行离散点排序. Step4 ...
- MySQL 使用 比较函数 INTERVAL() 函数 实现数据按区间分组
首先看一下它的定义: INTERVAL(N,N1,N2,N3,..........) INTERVAL()函数进行比较列表(N1,N2,N3等等)中的N值.该函数如果N<N1返回0,如果N< ...
- linux命令ulimit 系统限制你打开一些资源数
#ulimit -a 查看系统的一些限制,比如在做并发测试时ab命令的请求书不能超过 1024个. 要更改 #ulimit -n 10240
- Linux操作系统桌面环境GNOME和KDE的切换
一.设置GNOME或者KDE为默认的启动桌面环境 方法1:修改/etc/sysconfig/desktop,根据需要将“DESKTOP”后面的内容改为KDE或GNOME. 方法2:在当前用户目录下建立 ...
- 图像视频编码和FFmpeg(2)-----YUV格式介绍和应用
本文不讲FFmpeg,而是讲YUV图像格式.因为摄像头拍摄出来的原始图像一般都是YUV格式.在FFmpeg中,视频是通过多张YUV图像而得到. YUV图像格式是什么,这个可以看一下维基百科.这个超链接 ...
- 121. Best Time to Buy and Sell Stock【easy】
121. Best Time to Buy and Sell Stock[easy] Say you have an array for which the ith element is the pr ...