cocos2dx-lua 实现跑马灯效果

1、引言

平常玩游戏中，经常会看到游戏中上部有一个喇叭滚动显示某某玩家获取了什么奖励或者有一些系统通知！都会以这样的方式显示给玩家，这样一个功能看起来很酷！究竟怎么做呢，我们一起来看看，如果有什么不对的地方和更好的思路，还请各位看官留言评论。

2、功能实现

俗话说磨刀不误砍柴工，开始之前我们想要理清思路，才能事半功倍。

2.1、分析

跑马共有三部分组成：

半透明的黑色背景以及铃铛；

滚动的文字

一个遮罩

我们只需要创建出一个每个控件,再移动文字就好了，移动的位置从最右边开始移动到最左边+文字的长度，只需固定的速度就可以得到移动的时间！这个时间自己根据需要调试。

2.2、具体实现

我们直接上代码

--全局滚动消息
function Hall:showScrollMessage(messageContent,direction)

    print("self.scrollMessageArr", #self.scrollMessageArr, messageContent)
    table.insert(self.scrollMessageArr, messageContent) -- 插入数据

    local temp = display.getRunningScene():getChildByTag(20000)
    print("Hall:showScrollMessage,是否已经显示", temp)
    local temp = display.getRunningScene():getChildByTag(20000)
    if temp then 	-- 正在滚动，就只插入数据
        return
    end

    local winSize = cc.Director:getInstance():getWinSize();

    --滚动消息
    local scrollTextContainer = ccui.Layout:create()
    self.scrollTextContainer = scrollTextContainer
    scrollTextContainer:setAnchorPoint(cc.p(0.5,0.5))
    scrollTextContainer:setContentSize(cc.size(600,30))
    scrollTextContainer:setPosition(cc.p(winSize.width/2, winSize.height-150))
    display.getRunningScene():addChild(scrollTextContainer,20000,20000)

    if direction == "portrait" then -- 如果是竖屏就是旋转90度
        scrollTextContainer:setPosition(cc.p(150,winSize.height/2))
        scrollTextContainer:rotation(-90)
    end

    local scrollBg = ccui.ImageView:create("common/loudspeaker1.png")  -- 透明背景带喇叭
    scrollBg:setScale9Enabled(true)
    scrollBg:setContentSize(cc.size(720, 40))
    scrollBg:ignoreAnchorPointForPosition(false)
    scrollBg:setAnchorPoint(cc.p(0.5,0.5))
    scrollBg:setPosition(cc.p(313,15))
    scrollTextContainer:addChild(scrollBg)

    local scrollTextPanel = ccui.Layout:create()
    scrollTextPanel:setContentSize(cc.size(660,30))
    scrollTextPanel:setPosition(cc.p(10,0))
    scrollTextPanel:setClippingEnabled(true) -- 设置裁剪启用
    scrollTextPanel:setName("scrollTextPanel")
    scrollTextContainer:addChild(scrollTextPanel)

    -- local labaImg = ccui.ImageView:create("common/laba.png")
    -- labaImg:setPosition(cc.p(68,22))
    -- scrollTextContainer:addChild(labaImg)

    self:startScrollMessage()

end

function Hall:startScrollMessage()

    local scrollTextContainer = display.getRunningScene():getChildByTag(20000)

    local messageCount = table.maxn(self.scrollMessageArr)
    if messageCount > 0 then

        if scrollTextContainer then
            
            local scrollTextPanel = scrollTextContainer:getChildByName("scrollTextPanel")
            
            local messageContent = self.scrollMessageArr[1]
            table.remove(self.scrollMessageArr,1) -- 清除第一条信息

            local scrollText = ccui.Text:create()
            scrollText:setFontSize(24)
            scrollText:setAnchorPoint(cc.p(0,0.5))
            scrollText:setColor(cc.c3b(255,255,255))
            scrollText:setString(messageContent)
            scrollText:setPosition(cc.p(scrollTextPanel:getContentSize().width,scrollTextPanel:getContentSize().height/2))
            scrollTextPanel:addChild(scrollText)

            local moveDistance = scrollText:getContentSize().width + scrollTextPanel:getContentSize().width
            local moveDuration = moveDistance / 100
            local scrollAction = cc.Sequence:create(
                            cc.MoveBy:create(moveDuration, cc.p(-moveDistance,0)),
                            cc.CallFunc:create(function() 
                                --scrollText:removeFromParent()
                                self:startScrollMessage()
                            end)
                        )
            scrollText:runAction(scrollAction)

        else
            --清空消息队列
            self.scrollMessageArr = {}
        end
        
    else -- 所有消息滚动完，移除这个布局容器
        if scrollTextContainer then
            scrollTextContainer:removeFromParent()
        end
    end
end

代码比较简单这里不再详细说明了！

2.3、效果如下

在这里插入图片描述

3、结束语

The End
好了，今天的分享就到这里，如有不足之处，还望大家及时指正，随时欢迎探讨交流！！！

喜欢的朋友们，请帮顶、点赞、评论！您的肯定是我写作的不竭动力！