游戏场景中的文字包括了静态文字和动态文字。静态文字如下图所示游戏场景中①号文字“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=margin: 0px; padding: 0px; border: non