Cocos2dx lua 横向滚动字幕实现

需求:要求设计一个顶部滚动栏,滚动后台推送的游戏消息文本。

要点:1、文本单行显示;2、文本背景半透明黑色(宽度不是全屏的);

设计:可以使用ClippingNode来实现该功能



UI设计如上图所示。

代码实现:

--跑马灯
function InputLayer:AddUibroadcastMsg()
    _Panel_Clipping = UIUtils:GetWidgetByName(_widget,{"Panel_Input","Panel_MsgOut","Panel_Clipping"})
    local Text_Msg =  UIUtils:GetWidgetByName(_widget,"Panel_Clipping","Text_Msg"})
    Text_Msg:setVisible(false)

    local fWidth =_Panel_Clipping:getContentSize().width
    local fheight = _Panel_Clipping:getContentSize().height

    local clipper = _Panel_Clipping:getChildByName("_ClippingNode")
    if not clipper then

        clipper = cc.ClippingNode:create()
        clipper:setContentSize(fWidth,fheight)
        clipper:setAnchorPoint(0,0)
        clipper:setPosition(0,0)
        clipper:setName("_ClippingNode")
        _Panel_Clipping:addChild(clipper)

        local stencil = cc.DrawNode:create()
        local rectangle = {
            {0,0},{fWidth,fheight},{0,fheight}
        }
        local rectangle = {cc.p(0,0),cc.p(fWidth,fheight),cc.p(0,fheight)}
        local white = cc.c4f(1,1,1)
        stencil:drawpolygon(rectangle,4,white,white)
        clipper:setStencil(stencil)

    end

    _scrollText = clipper:getChildByName("_ScrollText")
    self._scrollStartX = fWidth
    if not _scrollText then
        _scrollText = Text_Msg:clone()
        local strMsg = "各位玩家请文明娱乐,远离赌博。如发现赌博行为,封停账号,并向公安机关举报!"
        _scrollText:setString(strMsg)
        _scrollText:setVisible(true)
        _scrollText:ignoreContentAdaptWithSize(true)
        _scrollText:setPosition(fWidth+10,5)
        _scrollText:setName("_ScrollText")
        clipper:addChild(_scrollText)

        self._scrollScheduleId = ToolUtils:schedule(handler(self,self.StartScrollUpdate),0.0,false)
    end
end

--滚动字幕
function InputLayer:StartScrollUpdate()
    local width = _scrollText:getContentSize().width
    local posx = _scrollText:getPositionX()
    if posx < -width-10 then
        local cuMsg = ""
        local tmp = LobbyController:getGameScrollMsgs()
        if #tmp > 0  then    
            cuMsg = tmp[1]
            table.remove(tmp,1)
        else
            _scrollText:getParent():getParent():getParent():setVisible(false)
            return
        end

        _scrollText:setString(cuMsg)
        width = _scrollText:getContentSize().width
        _scrollText:setPositionX(self._scrollStartX+10)
        _scrollText:getParent():getParent():getParent():setVisible(true)
    else
        _scrollText:setPositionX(posx - 3)
    end
end

相关文章

    本文实践自 RayWenderlich、Ali Hafizji 的文章《...
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@1...
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从C...
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发...
1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《...
   Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试...