【Cocos2dx 3.3 Lua】滾動字幕

參考資料：

     http://blog.csdn.net/jackystudio/article/details/12991977

 

一、原理

        經過調用update來更新位置達到的移動效果，和背景滾動有點相似，一旦滾動結束就重置爲起點，開始新的滾動。只是爲了達到在某個區域內滾動而不至於超出這個區域，有時候會用一些前景圖來作遮蓋，因此這個時候其實字幕或者公告是有在後面滾動的，可是被遮住了，所以看起來就像是隻在某個區域內滾動。

 

垂直滾動：

    以下圖

                

由底層和字幕以及遮蓋層組成

 

 

水平滾動：

     設置字幕在update時x軸移動，移動到屏幕外時從新開始移動

 

二、實現

RollingFont.lua

Link: http://codepad.org/i2T4gEvB    [ raw code | fork ]

RollingFont=class("RollingFont",function()
    return cc.Layer:create()
end)

RollingFont.ctor=function(self)
    local cache=cc.SpriteFrameCache:getInstance()
    cache:addSpriteFrames("rollfont/ui_serverlist.plist")
    self.size=cc.Director:getInstance():getWinSize()

    --註冊定時事件
    self:registerScriptHandler(function(tag)
        local scheduler=nil
        if tag=="enter" then
            scheduler=self:onEnter()
        elseif tag=="exit" then
            self:onExit(scheduler)
        end
    end)
end

RollingFont.createText=function(self,text)
    local ttfConfig = {}
    ttfConfig.fontFilePath="fonts/arial.ttf"
    ttfConfig.fontSize=11.4

    local label = cc.Label:createWithTTF(ttfConfig, text, cc.TEXT_ALIGNMENT_LEFT, self.size.width)
    label:setTextColor( cc.c4b(255, 0, 0, 255) )
    return label
end

--垂直滾動字幕
RollingFont.verticalFont=function(self)
    --添加垂直滾動字幕邊框
    local listbox=cc.Sprite:createWithSpriteFrameName("login_listbase.png")
    listbox:setPosition(cc.p(self.size.width/2,self.size.height/2+30))
    listbox:setScale(1.2)
    self:addChild(listbox)
    local listboxSize=listbox:getBoundingBox()
    local listboxX=listbox:getPositionX()
    local listboxY=listbox:getPositionY()
    self.verticalRect=cc.rect(listboxX-listboxSize.width/2,listboxY-listboxSize.height/2,listboxSize.width,listboxSize.height)

    --垂直滾動字幕
    local text="1.Hi! Welcome to My Blog,This is a Sample about\nfont vertical move with Cocos2dx 3.x Lua\n"
    local label=self:createText(text)
    label:setPosition(self.verticalRect.x+self.verticalRect.width-40,self.verticalRect.y)
    label:setAnchorPoint(1,1)
    self:addChild(label)
    self.labelVertical=label

    --字幕遮罩
    local fg=cc.Sprite:create("rollfont/fg.png")
    fg:setPosition(cc.p(self.verticalRect.x+self.verticalRect.width/2,self.verticalRect.y+self.verticalRect.height/2));
    self:addChild(fg);
end

--水平滾動字幕
RollingFont.horizontalFont=function(self)
    --添加水平滾動字幕邊框
    local listbox=cc.Sprite:createWithSpriteFrameName("login_textbase.png")
    listbox:setPosition(cc.p(self.size.width/2,self.size.height/2-65))
    listbox:setScaleX(2.5)
    self:addChild(listbox)
    local listboxSize=listbox:getBoundingBox()
    local listboxX=listbox:getPositionX()
    local listboxY=listbox:getPositionY()

    --水平滾動字幕
    local text="1.Hi! This is a Sample about font vertical move with Cocos2dx 3.x Lua"
    local label=self:createText(text)
    label:setPosition(self.size.width,self.verticalRect.y-10)
    label:setAnchorPoint(0,0)
    self:addChild(label)
    self.labelHorizontal=label
    local labelSize=label:getBoundingBox()
    self.horizontalSize=cc.rect(0,0,labelSize.width,labelSize.height)
end

RollingFont.onEnter=function(self)
    --垂直滾動最大和最小高度
    local hlabelSize=self.labelVertical:getBoundingBox()
    local hmaxHeight=self.verticalRect.y+self.verticalRect.height+hlabelSize.height
    local hminHeight=self.verticalRect.y+40

    --水平滾動最大寬度和最小寬度
    local vmaxWidth=self.size.width
    local vminWidth=-self.horizontalSize.width

    local function schedule()
        --垂直滾動
        local y=self.labelVertical:getPositionY()
        y=y+1
        if y >= hmaxHeight then
            y=hminHeight
        end
        self.labelVertical:setPositionY(y)

        --水平滾動
        local x=self.labelHorizontal:getPositionX()
        x=x-1
        if x <= vminWidth then
            x=vmaxWidth
        end
        self.labelHorizontal:setPositionX(x)
    end

    local scheduler=cc.Director:getInstance():getScheduler()
    scheduler:scheduleScriptFunc(schedule,0.02,false)
    return scheduler
end

RollingFont.onExit=function(self,scheduler)
    if scheduler then
        cc.Director:getInstance():getScheduler():unscheduleScriptEntry(scheduler)
    end
end

RollingFont.create=function(self)
    local roll=RollingFont.new()
    roll:verticalFont()
    roll:horizontalFont()
    return roll
end

return RollingFont

 

三、執行效果