【Cocos2dx 3.3 Lua】滚动字幕

参考资料：

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

1、原理

通过调用update来更新位置达到的移动效果，和背景滚动有点类似，一旦滚动结束就重置为起点，开始新的滚动。只是为了达到在某个区域内滚动而不至于超出这个区域，有时候会用一些前景图来做遮盖，所以这个时候其实字幕或者公告是有在后面滚动的，但是被遮住了，因此看起来就像是只在某个区域内滚动。

垂直滚动：

如下图

由底层和字幕以及遮盖层组成

水平滚动：

设置字幕在update时x轴移动，移动到屏幕外时重新开始移动

2、实现

RollingFont.lua

Link:

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
font vertical move with Cocos2dx 3.x Lua
"
    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

3、执行效果