论坛首页 移动开发技术论坛

Cocos2d-x Lua中使用标签

浏览 1545 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2015-05-10  

游戏场景中的文字包括了静态文字和动态文字。静态文字如下图所示游戏场景中①号文字“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.     hAlignmentcc.TEXT_ALIGNMENT_LEFT,         -- 水平对齐,默认值是靠右对齐  
  6.     vAlignmentcc.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在CODE上查看代码片派生到我的代码片
 
  1. 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  
  2. common lineHeight=73 base=58 scaleW=512 scaleH=512 pages=1 packed=0  
  3. page id=0 file="BMFont.png"  
  4. chars count=95  
  5. char id=124 x=2 y=2 width=9 height=68 xoffset=14 yoffset=9 xadvance=32 page=0 chnl=0 letter="|"  
  6. char id=41 x=13 y=2 width=28 height=63 xoffset=1 yoffset=11 xadvance=29 page=0 chnl=0 letter=")"  
  7. char id=40 x=43 y=margin: 0px; padding: 0px; border: non
论坛首页 移动开发技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics