前面我们已经学习了很关于cocos2dx的知识，今天我们来学习 cocos2dx 描边(lua实现)，这是个细致的事情，希望大家认真。

ocal 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 % floorNum
if remainder < 0.5 then
return math.floor(num)
else
return math.ceil(num)
end
end
–[[–
使用 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 文字显示对象，并返回 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文字显示对象，并返回 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
— log(“#######color = “..tostring(color.r))
— log(“#######color = “..tostring(color.g))
— log(“#######color = “..tostring(color.b))
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) –x + w / 2–x+3
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
if x and y then label:realign(x, y) end
log(“#mytool.newUILabel end###”)
return uilabel
end
–[[–
创建带描边效果的 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()–Layout: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)
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)}
效果：
cocos2dx 描边(lua实现) - 第1张  | 游戏开发网-最好的游戏编程开发技术网站！
原理：描边用5个控件 来实现 上下左右 各移动一个像素显示 另一个不移动