学习 cocos2dx 描边(lua实现)

前面我们已经学习了很多关于 Cocos2d-x 的知识，今天我们来深入学习 Cocos2d-x 中描边效果的 Lua 实现，这是一个需要细致处理的内容，希望大家认真学习。

工具模块定义

首先，我们定义一个工具模块 mytool，用于封装一些创建文字显示对象的函数。

local mytool = {}

-- 默认字体
mytool.DEFAULT_TTF_FONT = "Arial"
-- 默认字体大小
mytool.DEFAULT_TTF_FONT_SIZE = 24
-- 文字水平对齐方式
mytool.TEXT_ALIGN_LEFT = kCCTextAlignmentLeft
mytool.TEXT_ALIGN_CENTER = kCCTextAlignmentCenter
mytool.TEXT_ALIGN_RIGHT = kCCTextAlignmentRight
-- 文字垂直对齐方式
mytool.TEXT_VALIGN_TOP = kCCVerticalTextAlignmentTop
mytool.TEXT_VALIGN_CENTER = kCCVerticalTextAlignmentCenter
mytool.TEXT_VALIGN_BOTTOM = kCCVerticalTextAlignmentBottom
-- 颜色定义
mytool.COLOR_WHITE = ccc3(255, 255, 255)
mytool.COLOR_BLACK = ccc3(0, 0, 0)

-- 四舍五入函数
function mytool.round(num)
local floorNum = math.floor(num)
local remainder = num % 1
if remainder < 0.5 then
return math.floor(num)
else
return math.ceil(num)
end
end

创建 TTF 文字显示对象

newTTFLabel 函数

该函数用于使用 TTF 字体创建文字显示对象，并返回 CCLabelTTF 对象。

--[[
使用 TTF 字体创建文字显示对象，并返回 CCLabelTTF 对象。
可用参数：
- text: 要显示的文本
- font: 字体名，如果是非系统自带的 TTF 字体，那么指定为字体文件名
- size: 文字尺寸，因为是 TTF 字体，所以可以任意指定尺寸
- color: 文字颜色（可选），用 ccc3() 指定，默认为白色
- align: 文字的水平对齐方式（可选）
- valign: 文字的垂直对齐方式（可选），仅在指定了 dimensions 参数时有效
- dimensions: 文字显示对象的尺寸（可选），使用 CCSize() 指定
- x, y: 坐标（可选）

align 和 valign 参数可用的值：
- mytool.TEXT_ALIGN_LEFT 左对齐
- mytool.TEXT_ALIGN_CENTER 水平居中对齐
- mytool.TEXT_ALIGN_RIGHT 右对齐
- mytool.TEXT_VALIGN_TOP 垂直顶部对齐
- mytool.TEXT_VALIGN_CENTER 垂直居中对齐
- mytool.TEXT_VALIGN_BOTTOM 垂直底部对齐

~~~ lua
-- 创建一个居中对齐的文字显示对象
local label = mytool.newTTFLabel({
text = "Hello, World",
font = "Marker Felt",
size = 64,
align = mytool.TEXT_ALIGN_CENTER  -- 文字内部居中对齐
})

-- 左对齐，并且多行文字顶部对齐
local label = mytool.newTTFLabel({
text = "Hello, World\n您好，世界",
font = "Arial",
size = 64,
color = ccc3(255, 0, 0),  -- 使用纯红色
align = mytool.TEXT_ALIGN_LEFT,
valign = mytool.TEXT_VALIGN_TOP,
dimensions = CCSize(400, 200)
})
~~~

@param table params 参数表格对象
@return CCLabelTTF CCLabelTTF 对象
]]
function mytool.newTTFLabel(params)
assert(type(params) == "table", "[framework.mytool] newTTFLabel() invalid params")
local text = tostring(params.text)
local font = params.font or mytool.DEFAULT_TTF_FONT
local size = params.size or mytool.DEFAULT_TTF_FONT_SIZE
local color = params.color or mytool.COLOR_WHITE
local textAlign = params.align or mytool.TEXT_ALIGN_LEFT
local textValign = params.valign or mytool.TEXT_VALIGN_CENTER
local x, y = params.x, params.y
local dimensions = params.dimensions

assert(type(size) == "number", "[framework.mytool] newTTFLabel() invalid params.size")

local label
if dimensions then
label = CCLabelTTF:create(text, font, size, dimensions, textAlign, textValign)
else
label = CCLabelTTF:create(text, font, size)
end

if label then
label:setColor(color)

function label:realign(x, y)
if textAlign == mytool.TEXT_ALIGN_LEFT then
label:setPosition(mytool.round(x + label:getContentSize().width / 2), y)
elseif textAlign == mytool.TEXT_ALIGN_RIGHT then
label:setPosition(x - mytool.round(label:getContentSize().width / 2), y)
else
label:setPosition(x, y)
end
end

if x and y then
label:realign(x, y)
end
end

return label
end

创建带描边效果的 TTF 文字显示对象

newTTFLabelWithOutline 函数

该函数用于创建带描边效果的 TTF 文字显示对象，并返回 CCLabelTTF 对象。

--[[
创建带描边效果的 TTF 文字显示对象，并返回 CCLabelTTF 对象。
相比 mytool.newTTFLabel() 增加一个参数：
outlineColor: 描边颜色（可选），用 ccc3() 指定，默认为黑色

@param table params 参数表格对象
@return CCLabelTTF CCLabelTTF 对象
]]
function mytool.newTTFLabelWithOutline(params)
assert(type(params) == "table", "[framework.mytool] newTTFLabelWithShadow() invalid params")
local color = params.color or mytool.COLOR_WHITE
local outlineColor = params.outlineColor or mytool.COLOR_BLACK
local x, y = params.x, params.y

local g = CCNode:create()

params.size = params.size
params.color = outlineColor
params.x, params.y = 0, 0

g.shadow1 = mytool.newTTFLabel(params)
g.shadow1:realign(1, 0)
g:addChild(g.shadow1)

g.shadow2 = mytool.newTTFLabel(params)
g.shadow2:realign(-1, 0)
g:addChild(g.shadow2)

g.shadow3 = mytool.newTTFLabel(params)
g.shadow3:realign(0, -1)
g:addChild(g.shadow3)

g.shadow4 = mytool.newTTFLabel(params)
g.shadow4:realign(0, 1)
g:addChild(g.shadow4)

params.color = color
g.label = mytool.newTTFLabel(params)
g.label:realign(0, 0)
g:addChild(g.label)

function g:setString(text)
g.shadow1:setString(text)
g.shadow2:setString(text)
g.shadow3:setString(text)
g.shadow4:setString(text)
g.label:setString(text)
end

function g:getContentSize()
return g.label:getContentSize()
end

function g:setColor(...)
g.label:setColor(...)
end

function g:setOutlineColor(...)
g.shadow1:setColor(...)
g.shadow2:setColor(...)
g.shadow3:setColor(...)
g.shadow4:setColor(...)
end

function g:setOpacity(opacity)
g.label:setOpacity(opacity)
g.shadow1:setOpacity(opacity)
g.shadow2:setOpacity(opacity)
g.shadow3:setOpacity(opacity)
g.shadow4:setOpacity(opacity)
end

if x and y then
g:setPosition(x, y)
end

return g
end

创建 Cocostudio UILabel 文字显示对象

newUILabel 函数

该函数用于创建 Cocostudio UILabel 文字显示对象，并返回 UILabel 对象。

--[[
创建 cocostudio UILabel 文字显示对象，并返回 UILabel 对象。
@param table params 参数表格对象
可用参数：
- text: 要显示的文本
- fontsize: 文字尺寸
- x, y: 坐标
- color: 文字颜色(可选), 默认为白色 用 ccc3 表示
- align: 文字的水平对齐方式（可选）
@return CCLabelTTF UILabel 对象
]]
function mytool.newUILabel(params)
assert(type(params) == "table", "[framework.mytool] newUILabel() invalid params")
log("#mytool.newUILabel begin###")
local color = params.color or mytool.COLOR_WHITE
local text = params.text
local fontsize = params.fontsize
local uilabel = UILabel:create()
local textAlign = params.align or mytool.TEXT_ALIGN_LEFT

if uilabel then
uilabel:setColor(color.r, color.g, color.b)
uilabel:setText(text)
uilabel:setFontSize(fontsize)
end

function uilabel:realign(x, y)
if textAlign == mytool.TEXT_ALIGN_LEFT then
local w, h = uilabel:getSize()
uilabel:setPosition(mytool.round(x + 3), y)
elseif textAlign == mytool.TEXT_ALIGN_RIGHT then
local w, h = uilabel:getSize()
uilabel:setPosition(x - mytool.round(w / 2), y)
else
uilabel:setPosition(x, y)
end
end

local x, y = params.x, params.y
if x and y then
uilabel:realign(x, y)
end

log("#mytool.newUILabel end###")
return uilabel
end

创建带描边效果的 Cocostudio UILabel 文字显示对象

newUILabelWithOutline 函数

该函数用于创建带描边效果的 Cocostudio UILabel 文字显示对象，并返回 UILabel 对象。

--[[
创建带描边效果的 cocostudio UILabel 文字显示对象，并返回 UILabel 对象。
@param table params 参数表格对象
可用参数：
- text: 要显示的文本
- size: 文字尺寸
- x, y: 坐标
- outlineColor : 文字描边颜色， 用 ccc3() 指定， 默认为黑色
- color: 文字颜色（可选），用 ccc3() 指定，默认为白色
- align: 文字的水平对齐方式（可选）
@return CCLabelTTF UILabel 对象
]]
function mytool.newUILabelWithOutline(params)
assert(type(params) == "table", "[framework.mytool] newUILabelWithOutline() invalid params")
log("####mytool.newUILabelWithOutline(params) begin####")
local widget = params.widget
local r, g, b = widget:getColor()
local sizew, sizeh = widget:getSize()
local fontsize = params.fontSize or 28
local color = params.color or ccc3(r, g, b)
local outlineColor = params.outlineColor or mytool.COLOR_BLACK
widget = tolua.cast(widget, "UILabel")
local text = widget:getStringValue()

local g = UILabel:create()
params.color = outlineColor
params.text = text
params.x, params.y = 0, 0
params.fontsize = fontsize

g.shadow1 = mytool.newUILabel(params)
g.shadow1:realign(1, 0)
g:addChild(g.shadow1)

g.shadow2 = mytool.newUILabel(params)
g.shadow2:realign(-1, 0)
g:addChild(g.shadow2)

g.shadow3 = mytool.newUILabel(params)
g.shadow3:realign(0, -1)
g:addChild(g.shadow3)

g.shadow4 = mytool.newUILabel(params)
g.shadow4:realign(0, 1)
g:addChild(g.shadow4)

local parent = widget:getParent()
widget:removeFromParentAndCleanup(true)

params.color = color
g.label = mytool.newUILabel(params)
g.label:realign(0, 0)
g:addChild(g.label)

parent:addChild(g)

local x, y = params.x, params.y
if x and y then
g:setPosition(x, y)
end

log("####mytool.newUILabelWithOutline(params) end####")
return g
end

return mytool

用法示例

mytool = require("util.mytool.lua")
local ttf = mytool.newTTFLabel{text = "卧槽xxx", x = 320, y = 640}
localUnionWindow.beginInputLayer:addChild(ttf, 10)

-- createtext 从 cocostudio 中读出来的
local createtext = xwidget.getChild(createBtn, "text")
mytool.newUILabelWithOutline{widget = createtext, outlineColor = ccc3(255, 0, 0)}

效果展示

Cocos2d-x 描边（Lua 实现） - 第1张 | 游戏开发网-最好的游戏编程开发技术网站！

实现原理

描边效果是通过 5 个控件来实现的，分别将上下左右的控件各移动一个像素进行显示，另一个控件不移动，从而形成描边的视觉效果。