频道导航

quick-cocos2d-x游戏开发【4】——添加文本

2019-05-18 Cocos2d-x 前端之家

前端之家收集整理的这篇文章主要介绍了quick-cocos2d-x游戏开发【4】——添加文本，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

文本的添加在quick中被封装在ui类中，它可以创建EditBox，菜单以及文本，文本总得来说可以创建TTF和BMFont两种。

api对于它的说明很详细，ui.newBMFontLabel(params)，参数中

所以我们创建一个文本可以使用这样的代码，

 
   [plain] 
   view plain 
   copy 
    
   @H_403_30@

functionMyScene:ctor()
locallabelBMFont=ui.newBMFontLabel({
text="HelloCocos2dx",
font="futura-48.fnt",
align=ui.TEXT_ALIGN_CENTER,248)"> x=display.cx,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> y=display.cy
})
self:addChild(labelBMFont)
end

效果如下，

align参数相当于锚点的作用，默认quick中创建出来的都是靠左，所以经常会用到align = ui.TEXT_ALIGN_CENTER。

注意参数给的名称不可以修改，否则quick认不出参数，就会报错。既然前面说了quick是对cocos2d-x 原生lua的再封装，咱们就再看看这个newBMFontLabel是如何实现的，贴一下ui中的代码，

functionui.newBMFontLabel(params)

assert(type(params)=="table",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "[framework.ui]newBMFontLabel()invalidparams")
localtext=tostring(params.text)
localfont=params.font
localtextAlign=params.alignorui.TEXT_ALIGN_CENTER
localx,y=params.x,params.y
assert(font~=nil,"ui.newBMFontLabel()-notsetfont")
locallabel=CCLabelBMFont:create(text,font,kCCLabelAutomaticWidth,textAlign)
ifnotlabelthenreturnend
iftype(x)=="number"andtype(y)=="number"then
label:setPosition(x,y)
end
iftextAlign==ui.TEXT_ALIGN_LEFTthen
label:align(display.LEFT_CENTER)
elseiftextAlign==ui.TEXT_ALIGN_RIGHTthen
label:align(display.RIGHT_CENTER)
else
label:align(display.CENTER)
returnlabel
end

可以看到还是使用了cocos2dx创建BMFont的方法——CCLabelBMFont:create(text,textAlign)，所以如果你觉得quick哪个参数看得不爽，你把它修改了，那么创建的时候就可以按自己喜欢的字段来了，当然这是不建议的。

另一种是TTF，ui.newTTFLabel(params)，它可用的参数非常多，

align 和 valign 参数可用的值：

我们也简单写个

locallabelTTF=ui.newTTFLabel({

size=30,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> color=ccc3(255,0),248)"> align=ui.TEXT_ALIGN_CENTER,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> x=display.cx,248)"> y=display.cy
self:addChild(labelTTF)
end

效果如下，

关于quick对于TTF是如何实现的源码我就不贴出来了，大家可以自己翻出来看看。

此外，在api中还提供了两种TTF格式的字体创建，

ui.newTTFLabelWithShadow(params)

ui.newTTFLabelWithOutline(params)

这两个分别是带有阴影和描边参数的TTF字体，cocos2dx中一样提供这个功能，所以在quick里简单知道一下就ok，写个效果出来看看

locallabelTTF=ui.newTTFLabelWithOutline({

text="HelloCocos2dx",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> size=50,248)"> color=ccc3(255,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> y=display.cy,248)"> outlineColor=ccc3(255,0)
})
self:addChild(labelTTF)