• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Cocos2d-xLua中使用标签

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

 

游戏场景中的文字包括了静态文字和动态文字。静态文字如下图所示游戏场景中①号文字“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接口。



LabelTTF类图



如果我们要展示图中所示的Hello World文字,我们可以使用LabelTTF实现。

LabelTTF实现的Hello World文字

LabelTTF实现的Hello World文字主要代码如下:

[html] view plaincopy
 
  1. function GameScene:createLayer()  
  2.   
  3.   
  4.     local layer = cc.Layer:create()  
  5.     // 创建并初始化标签  
  6.     local label = cc.LabelTTF:create("Hello World", "Arial", 64)                        ①  
  7.     label:setPosition(cc.p(size.width/2, size.height - label:getContentSize().height))  
  8.   
  9.   
  10.     layer:addChild(label, 1)  
  11.     local sprite = cc.Sprite:create("HelloWorld.png")      
  12.     sprite:setPosition(cc.p(size.width/2,   
  13.                                     size.height/2))  
  14.     layer:addChild(sprite, 0)  
  15.   
  16.   
  17.     return layer  
  18. end  

上述代码第①行是创建一个LabelTTF对象,create函数的第一个参数是要显示的文字,第二个参数是系统字体名,第三个参数是字体的大小,事实上该create函数省略了三个参数,create函数的完整定义如下:

[html] view plaincopy
 
  1. cc.LabelTTF:create (text,             
  2.     fontName,   
  3.     fontSize,   
  4.     dimensions=cc.size(0,0),    --在屏幕上占用的区域大小,cc.size(0,0)表示按照字体大小显示  
  5.     hAlignment= cc.TEXT_ALIGNMENT_LEFT,         -- 水平对齐,默认值是靠右对齐  
  6.     vAlignment= cc.VERTICAL_TEXT_ALIGNMENT_TOP)     -- 垂直对齐,默认值是顶对齐  

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

LabelAtlas类图



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

LabelAtlas实现的Hello World文字

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

[html] view plaincopy
 
  1. function GameScene:createLayer()  
  2.     local layer = cc.Layer:create()  
  3.     local label = cc.LabelAtlas:_create("HelloWorld",   
  4.                         "fonts/tuffy_bold_italic-charmap.png", 48, 66, string.byte(" "))                ①  
  5.     label:setPosition(cc.p(size.width/2  - label:getContentSize().width / 2,  
  6.                            size.height - label:getContentSize().height))  
  7.     layer:addChild(label, 1)  
  8.       
  9.     local sprite = cc.Sprite:create("HelloWorld.png")      
  10.     sprite:setPosition(cc.p(size.width/2, size.height/2))  
  11.     layer:addChild(sprite, 0)  
  12.   
  13.   
  14.     return layer  
  15. end  

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

图片集文件

使用LabelAtlas需要注意的是图片集文件需要放置在Resources目录下。
LabelBMFont
LabelBMFont是位图字体标签,需要添加字体文件:包括一个图片集(.png)和一个字体坐标文件(.fnt)。LabelBMFont比LabelTTF快很多。LabelBMFont中的每个字符的宽度是可变的。
LabelBMFont类图如下图所示,可以LabelBMFont间接地继承了Node类,具有Node的基本特性,此外还实现了LabelProtocol接口。

LabelBMFont类图



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

LabelBMFont实现的Hello World文字

LabelBMFont实现的Hello World文字主要代码如下:

[html] view plaincopy
 
  1. function GameScene:createLayer()  
  2.     local layer = cc.Layer:create()  
  3.     local label = cc.LabelBMFont:create("HelloWorld", "fonts/BMFont.fnt")               ①  
  4.     label:setPosition(cc.p(size.width/2,  
  5.                            size.height - label:getContentSize().height))     
  6.     layer:addChild(label, 1)  
  7.     local sprite = cc.Sprite:create("HelloWorld.png")      
  8.     sprite:setPosition(cc.p(size.width/2, size.height/2))  
  9.     layer:addChild(sprite, 0)  
  10.     return layer  
  11. end  

上述代码第①行是创建一个LabelBMFont对象,create函数的第一个参数是要显示的文字,第二个参数是图片集文件。图片集文件BMFont.fnt如下图所示,对应还有一个字体坐标文件BMFont.fnt。

图片集文件

坐标文件BMFont.fnt代码如下:

[html] view plaincopy
 
  1. info face="AmericanTypewriter" size=64 bold=italic=charset="" unicode=stretchH=100 smooth=aa=padding=0,0,0,0 spacing=2,2  
  2. common lineHeight=73 base=58 scaleW=512 scaleH=512 pages=packed=0  
  3. page id=file="BMFont.png"  
  4. chars count=95  
  5. char id=124 x=y=width=height=68 xoffset=14 yoffset=xadvance=32 page=chnl=letter="|"  
  6. char id=41 x=13 y=width=28 height=63 xoffset=yoffset=11 xadvance=29 page=chnl=letter=")"  
  7. char id=40 x=43 y=width=28 height=63 xoffset=yoffset=11 xadvance=29 page=chnl=letter="("  
  8. ... ...  
  9. char id=32 x=200 y=366 width=height=xoffset=16 yoffset=78 xadvance=16 page=chnl=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类图

创建Label类静态create函数常用的有如下几个:

[html] view plaincopy
 
  1. cc.Label:createWithSystemFont(text,                 -- 是要显示的文字        
  2.         font,                                                   -- 系统字体名  
  3.         fontSize,                                       -- 字体的大小  
  4.         dimensions = cc.size(0,0),                          -- 可省略,参考LabelTTF定义  
  5.         vAlignment= cc.TEXT_ALIGNMENT_LEFT,             -- 可省略,参考LabelTTF定义  
  6.         vAlignment= cc.VERTICAL_TEXT_ALIGNMENT_TOP      -- 可省略,参考LabelTTF定义  
  7. )   
  8.   
  9.   
  10. cc.Label:createWithTTF(const std::string & text,  
  11.         fontFile,                                       -- 字体文件  
  12.         fontSize,  
  13.         dimensions = cc.size(0,0),                
  14.         hAlignment= cc.TEXT_ALIGNMENT_LEFT,   
  15.         vAlignment= cc.VERTICAL_TEXT_ALIGNMENT_TOP   
  16.     )         
  17.   
  18.   
  19. cc.Label:createWithTTF(ttfConfig,                       -- 字体配置信息  
  20.         text,  
  21.         hAlignment= cc.TEXT_ALIGNMENT_LEFT,  
  22.         int maxLineWidth = 0                            -- 可省略,标签的最大宽度  
  23.     )  
  24.   
  25.   
  26. cc.Label:createWithBMFont(const std::string& bmfontFilePath,    -- 位图字体文件  
  27.         text,                             
  28.         hAlignment= cc.TEXT_ALIGNMENT_LEFT,   
  29.         int maxLineWidth = 0,                             
  30.         imageOffset = cc.p(0,0)                             -- 可省略,在位图中的偏移量  
  31.     )     

其中createWithSystemFont是创建系统字体标签对象,createWithTTF是创建TTF字体标签对象,createWithBMFont是创建位图字体标签对象。
createWithBMFont
下面我们通过一个实例介绍一下,它们的使用。这个实例如下图所示。

Label类实例

下面我们看看HelloWorldScene.cpp中init函数如下: 

[html] view plaincopy
 
  1. function GameScene:createLayer()  
  2.     local layer = cc.Layer:create()  
  3.     local label1 = cc.Label:createWithSystemFont("世界你好1 ", "Arial", 36)                 ①  
  4.     label1:setPosition(cc.p(size.width/2, size.height - 100))     
  5.     layer:addChild(label1, 1)  
  6.     local label2 = cc.Label:createWithTTF("世界你好2", "fonts/STLITI.ttf", 36)          ②  
  7.     label2:setPosition(cc.p(size.width/2, size.height - 200))  
  8.     layer:addChild(label2, 1)  
  9.     local label3 = cc.Label:createWithBMFont ("fonts/bitmapFontChinese.fnt", "中国")      ③  
  10.     label3:setPosition(cc.p(size.width/2, size.height - 300))  
  11.     layer:addChild(label3, 1)  
  12.     local ttfConfig  = {}                                                   ④  
  13.     ttfConfig.fontFilePath="fonts/Marker Felt.ttf"  
  14.     ttfConfig.fontSize = 32  
  15.     local label4 = cc.Label:createWithTTF(ttfConfig, "Hello World4")                    ⑤  
  16.     label4:setPosition(cc.p(size.width/2, size.height - 400))  
  17.     layer:addChild(label4 , 1)  
  18.     ttfConfig.outlineSize = 4                                               ⑥  
  19.     local label5 = cc.Label:createWithTTF(ttfConfig, "Hello World5")                    ⑦  
  20.     label5:setPosition(cc.p(size.width/2, size.height - 500))     
  21.     label5:enableShadow(cc.c4b(255,255,255,128), cc.size(4, -4))                    ⑧  
  22.     label5:setColor(cc.c3b(255, 0, 0))                                      ⑨  
  23.     layer:addChild(label5, 1)  
  24.     return layer  
  25. end  

在上面的代码中第①行是通过createWithSystemFont函数创建Label对象,第②行代码是通过createWithTTF是创建TTF字体标签对象,第③行代码是createWithBMFont是创建位图字体标签对象。
第④行代码local ttfConfig = {}是声明一个TTFConfig变量,TTFConfig的属性如下:

[html] view plaincopy
 
  1. fontFilePath                                        -- 字体文件路径  
  2. fontSize,                                           -- 字体大小  
  3. glyphs = cc.GLYPHCOLLECTION_DYNAMIC,            -- 字体库类型  
  4. customGlyphs                                    -- 自定义字体库  
  5. outlineSize                                         -- 字体描边  
  6. 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))是设置标签的颜色。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
lua入门发布时间:2022-07-22
下一篇:
C++中嵌入Lua脚本环境搭建发布时间:2022-07-22
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap