Cocos2d-x 3.10 蹦字弹板讲解
2016-07-11 本文已影响235人
绿城河
最近在我开发游戏的时候遇到了这样的一个需求，就是在新手教程的时候要求做一个弹板然后还要让里面的文字一个一个的跳出来，刚开始觉得挺难弄的后来通过在网上查阅里一些资料发现还是挺容易的，我写了一个组件，希望今后在遇到的时候和其他人遇到这种情况的时候能够参考借鉴一下。
进入正题，我先把我写的控件的代码贴出来然后在慢慢讲解：
---------------------------------------------------
--创建新手文本弹出框
--@param pos 要显示的位置 锚点(0.5,0.5)
--@param text 要显示的文字
--@param textSize 文字的字号大小
--@param width 行宽
--@param img 背景图片
--@param dim 模糊程度 取值范围 0 - 1
function createNewbieTextDialog(pos, text, textSize, width, img, dim, lineNum)
assert(Utility:isNotEmptyStr(text),"the information text is not set")
assert(textSize ~= 0,"the textSize is wrong")
assert(width ~= 0,"the width is wrong")
assert(pos,"the pos is nil")
assert(img,"the img is nil")
assert(lineNum,"the lineNum is nil")
local textFonts = {} -- 字符暂时存储的地方
local charArrayFonts = {} --字符存放的地方
local startIndex = 1
local endIndex = 1
local isOk = 0
local charIndex = 1 --字符数组下标
-- 添加字符串数组(判断其中是否有中文字符)
for i = 1, string.len(text) do
local curByte = string.byte(text, i)
local byteCount = 1 -- Utf8 编码最大有4個字節的情況
-- 判断编码类型
if curByte > 0 and curByte <= 127 then
byteCount = 1
elseif curByte >= 192 and curByte < 223 then
byteCount = 2
elseif curByte >= 224 and curByte < 239 then
byteCount = 3
elseif curByte >= 240 and curByte <= 247 then
byteCount = 4
end
endIndex = i + byteCount - 1
textFonts[i] = string.sub(text, startIndex, endIndex)
startIndex = endIndex + 1
if byteCount ==3 then
charArrayFonts[charIndex] = textFonts[i]
print("pppppp"..charArrayFonts[charIndex])
charIndex = charIndex + 1
isOk = 2
elseif byteCount == 1 then
if isOk <= 0 then
charArrayFonts[charIndex] = textFonts[i]
print("HHHHHH"..charArrayFonts[charIndex])
charIndex = charIndex + 1
end
isOk = isOk - 1
end
-- 讲字符串数组传入正确的字节数和值
--print("##########"..textFonts[i].."@@@@@@@@@"..startIndex.."^^^^^^^"..byteCount)
end
local popLayer = nil --弹出层
local function onTouchBegan(touch,event)
return true
end
--移除弹出层
local function onTouchEnded(touch,event)
cc.Director:getInstance():getRunningScene():removeChild(popLayer,true)
return true
end
--注册触摸事件
local function registerTouchEvent()
local listener = cc.EventListenerTouchOneByOne:create();
listener:registerScriptHandler(onTouchBegan,cc.Handler.EVENT_TOUCH_BEGAN)
listener:registerScriptHandler(onTouchEnded,cc.Handler.EVENT_TOUCH_ENDED)
listener:setSwallowTouches(true)
cc.Director:getInstance():getEventDispatcher():addEventListenerWithSceneGraphPriority(listener,popLayer);
end
local bgimv=ccui.ImageView:create(img)
bgimv:setContentSize(cc.size(width+50,lineNum * textSize+50)) --50 像素为底部背景比文字大出来的边框
bgimv:setScale9Enabled(true)
bgimv:setPosition(pos)
popLayer = cc.LayerColor:create(cc.c4b(0,0,0,255*dim%255))
popLayer:setPosition(cc.p(0,0))
popLayer:addChild(bgimv)
-- 弹板上的文字
local layerHeight = nil
local tipLable = {}
local i = 1
local j = 0 -- 可能转到第二行
-- 调度函数
local function scheduleUpdate(dt)
tipLable = cc.Label:createWithSystemFont(charArrayFonts[i],"fonts/Marker Felt.ttf",textSize,cc.size(width,-1))
tipLable:setColor(cc.c3b(255,255,255))
layerHeight = tipLable:getContentSize().height
tipLable:setAnchorPoint(cc.p(0.5,0.5))
tipLable:setPosition(pos)
tipLable:setPositionX(pos.x + i * textSize)
if pos.x + i * textSize >= 1.5 * width then -- 自动换行，最多两行
tipLable:setPositionY(pos.y - textSize)
tipLable:setPositionX(pos.x + j * textSize)
j = j + 1
end
i = i + 1
print(i.."##########"..charArrayFonts[i])
popLayer:addChild(tipLable) -- 添加文字
if i >= #charArrayFonts then
cc.Director:getInstance():getScheduler():unscheduleScriptEntry(Schedule.id)
end
end
--创建调度者
Schedule.id = cc.Director:getInstance():getScheduler():scheduleScriptFunc(scheduleUpdate, 0.1, false)
registerTouchEvent() -- 注册触摸监听事件
cc.Director:getInstance():getRunningScene():addChild(popLayer) -- 在当前场景添加层
end
