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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

api对于它的说明非常具体。ui.newBMFontLabel(params)，參数中

text: 要显示的文本
font: 字体文件名称
align: 文字的水平对齐方式（可选）
x, y: 坐标（可选）

所以我们创建一个文本能够使用这种代码，

function MyScene:ctor()
local labelBMFont = ui.newBMFontLabel({
text = "Hello Cocos2dx",
font = "futura-48.fnt",
align = ui.TEXT_ALIGN_CENTER,
x = display.cx,
y = display.cy
})
self:addChild(labelBMFont)
end

效果例如以下，

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

注意參数给的名称不能够改动，否则quick认不出參数。就会报错。

既然前面说了quick是对cocos2d-x 原生lua的再封装，咱们就再看看这个newBMFontLabel是怎样实现的。贴一下ui中的代码。

function ui.newBMFontLabel(params)
assert(type(params) == "table",
"[framework.ui] newBMFontLabel() invalid params") local text = tostring(params.text)
local font = params.font
local textAlign = params.align or ui.TEXT_ALIGN_CENTER
local x, y = params.x, params.y
assert(font ~= nil, "ui.newBMFontLabel() - not set font") local label = CCLabelBMFont:create(text, font, kCCLabelAutomaticWidth, textAlign)
if not label then return end if type(x) == "number" and type(y) == "number" then
label:setPosition(x, y)
end if textAlign == ui.TEXT_ALIGN_LEFT then
label:align(display.LEFT_CENTER)
elseif textAlign == ui.TEXT_ALIGN_RIGHT then
label:align(display.RIGHT_CENTER)
else
label:align(display.CENTER)
end return label
end

能够看到还是使用了cocos2dx创建BMFont的方法——CCLabelBMFont:create(text, font, kCCLabelAutomaticWidth, textAlign)。所以假设你认为quick哪个參数看得不爽。你把它改动了，那么创建的时候就能够按自己喜欢的字段来了，当然这是不建议的。

还有一种是TTF。ui.newTTFLabel(params)，它可用的參数许多。

text: 要显示的文本
font: 字体名，假设是非系统自带的 TTF 字体，那么指定为字体文件名称
size: 文字尺寸，由于是 TTF 字体。所以能够随意指定尺寸
color: 文字颜色（可选），用 ccc3() 指定，默觉得白色
align: 文字的水平对齐方式（可选）
valign: 文字的垂直对齐方式（可选），仅在指定了 dimensions 參数时有效
dimensions: 文字显示对象的尺寸（可选），使用 CCSize() 指定
x, y: 坐标（可选）

align 和 valign 參数可用的值：

ui.TEXT_ALIGN_LEFT 左对齐
ui.TEXT_ALIGN_CENTER 水平居中对齐
ui.TEXT_ALIGN_RIGHT 右对齐
ui.TEXT_VALIGN_TOP 垂直顶部对齐
ui.TEXT_VALIGN_CENTER 垂直居中对齐
ui.TEXT_VALIGN_BOTTOM 垂直底部对齐

我们也简单写个

function MyScene:ctor()
local labelTTF = ui.newTTFLabel({
text = "Hello Cocos2dx",
size = 30,
color = ccc3(255, 255, 0),
align = ui.TEXT_ALIGN_CENTER,
x = display.cx,
y = display.cy})
self:addChild(labelTTF)end

效果例如以下，

关于quick对于TTF是怎样实现的源代码我就不贴出来了，大家能够自己翻出来看看。

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

ui.newTTFLabelWithShadow(params)

ui.newTTFLabelWithOutline(params)

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

local labelTTF = ui.newTTFLabelWithOutline({
text = "Hello Cocos2dx",
size = 50,
color = ccc3(255, 0, 0),
align = ui.TEXT_ALIGN_CENTER,
x = display.cx,
y = display.cy,
outlineColor = ccc3(255, 255, 0)
})
self:addChild(labelTTF)

效果例如以下，