quick-cocos2d-x遊戲開發【4】——添加文本

原創

wangdi1224

2020-02-21 21:53

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

效果如下，