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

来源：互联网发布：淘宝新增网站推广编辑：程序博客网时间：2024/05/22 14:04

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

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

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

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

[plain] view plaincopy
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中的代码，

[plain] view plaincopy
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 垂直底部对齐

我们也简单写个

[plain] view plaincopy
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，写个效果出来看看

[plain] view plaincopy
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)  

效果如下，

label基本就是这样了，原生的还有一个Atlas，在游戏中做数字标签还是很常用的~

0 0