Quick-cocos2d-x Study Notes [4] -- add text

Text is encapsulated in the UI class in quick. It can create editbox, menu, and text. In general, TTF and bmfont can be created.

The description of the API is very detailed, UI. newbmfontlabel (Params), In the Parameter

• Text: the text to be displayed.
• Font: font file name
• Align: horizontal alignment of text (optional)
• X, Y: coordinates (optional)

So we can use this code to create a text,

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

The effect is as follows,

The align parameter is equivalent to the anchor. By default, all the items created in quick are left-aligned. Therefore, align = UI. text_align_center is often used.

Note that the parameter name cannot be modified. Otherwise, an error is returned if quick does not recognize the parameter. Since we have mentioned that quick is a re-encapsulation of the native Lua of cocos2d-x, let's look at how this newbmfontlabel is implemented, paste the code in the 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 labelend

We can see that we still use the cocos2dx method to create bmfont-cclabelbmfont: Create (text, Font, kcclabelautomaticwidth, textalign). If you think that the quick parameter is uncomfortable, if you modify it, you can create it based on your favorite fields. Of course, this is not recommended.

The other is TTF, UI. newttflabel (Params), which has many available parameters,

• Text: the text to be displayed.
• Font: The font name. If it is not a built-in TTF font, it is specified as the font file name.
• Size: The text size. Because it is a TTF font, you can specify any size.
• Color: The text color (Optional). It is specified with ccc3 (). The default value is white.
• Align: horizontal alignment of text (optional)
• Valign: vertical alignment of text (Optional). It is valid only when the dimensions parameter is specified.
• Dimensions: the size of the text display object (optional), specified using ccsize ()
• X, Y: coordinates (optional)

Available values of the align and valign parameters:

• Ui. text_align_left left alignment
• Ui. text_align_center align horizontally
• Ui. text_align_right right
• Ui. text_valign_top vertical top aligment
• Ui. text_valign_center vertical center aligment
• Ui. text_valign_bottom vertical bottom aligment

We can also write a simple example

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

The effect is as follows,

I will not post the source code of how quick implements TTF. You can refer to it by yourself.

In addition, two types of TTF fonts are provided in the API,

Ui. newttflabelwithshadow (Params)

Ui. newttflabelwithoutline (Params)

The two are TTF fonts with shadow and stroke parameters, which are also provided in cocos2dx. Therefore, you can simply find out in quick and write an effect.

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)

The effect is as follows,

Label is basically like this. There is also a native atlas, which is often used for digital tags in games ~