文本的添加在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)
Icon Image:

Theme Zone:
Android
Include in RSS:
1