最近在我開發(fā)游戲的時候遇到了這樣的一個需求，就是在新手教程的時候要求做一個彈板然后還要讓里面的文字一個一個的跳出來，剛開始覺得挺難弄的后來通過在網(wǎng)上查閱里一些資料發(fā)現(xiàn)還是挺容易的，我寫了一個組件，希望今后在遇到的時候和其他人遇到這種情況的時候能夠參考借鑒一下。

進入正題，我先把我寫的控件的代碼貼出來然后在慢慢講解：

---------------------------------------------------
--創(chuàng)建新手文本彈出框
--@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  --字符數(shù)組下標(biāo)

    -- 添加字符串?dāng)?shù)組(判斷其中是否有中文字符)
    for i = 1, string.len(text) do
        local curByte = string.byte(text, i)
        local byteCount = 1  -- Utf8 編碼最大有4個字節(jié)的情況

        -- 判斷編碼類型
        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

        -- 講字符串?dāng)?shù)組傳入正確的字節(jié)數(shù)和值
        --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  -- 可能轉(zhuǎn)到第二行


    -- 調(diào)度函數(shù)
    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    
   
    --創(chuàng)建調(diào)度者
    Schedule.id = cc.Director:getInstance():getScheduler():scheduleScriptFunc(scheduleUpdate, 0.1, false)

    registerTouchEvent()  -- 注冊觸摸監(jiān)聽事件
    cc.Director:getInstance():getRunningScene():addChild(popLayer)  -- 在當(dāng)前場景添加層

end

在上面的這一長串的代碼里，也基礎(chǔ)的一般都能看懂，但里面核心實現(xiàn)讓文字一個一個的跳出來還是靠的中間的那段代碼（--添加字符串?dāng)?shù)組（判斷是否有中文字符））從那段帶代碼移植到for循環(huán)結(jié)束，這里面主要的參數(shù)其實就是傳進來一個字符串，然后第一次截取一個字符，第二次截取兩個字符，依次類推但是要注意的是，這段字符串里面可以有標(biāo)點符號的，再使用string.byte去字符的時候要注意中文是占兩個位置的而其他的符號是占一個位置的，所以這里分了四個區(qū)間來區(qū)分所占的位置，我們這里會用到的一般就是3和1這兩個位置，分別表示的是中文和特殊符號。將字區(qū)分好了，剩下的就使用調(diào)度者去調(diào)度讓這些字顯現(xiàn)出來