quick cocos2dx跑马灯实现

跑马灯是一种把文字从左向右或从右向左移动，然后到某一个固定位置消息的技术。

实现起来还是挺简单的，实现的思路如下：

1 创建一个要显示的区域（矩形）

2 创建一个裁剪结点，把要显示的区域设置为模板

3 把要显示的文本放到裁剪结点中，并让它以一定的速度从右向左移动。

利用clippingnode可以制作出许多遮挡效果，跑马灯就是其中一种。

    --用四个点围成一个矩形
    local w      = display.width - 20
    local height = 30
    local startX = 0
    local startY = 0
    local verts  = {
    {startX,startY},{w,height},{startX,height}
    }

    -- 构造矩node和裁剪node
    local drawNode = CCDrawNode:create()
    drawNode:drawPolygon(verts,ccc4f(255,255,100),1,ccc4f(0,100))
    local clipNode = CCClippingNode:create()
    clipNode:setStencil(drawNode)
    clipNode:setPosition(ccp(50,50))
    clipNode:addTo(self)

    self.lab_text = cc.ui.UILabel.new({text = "跑马灯测试测试",size = 20,color = display.COLOR_WHITE})
    self.lab_text:align(display.BOTTOM_LEFT,width - 50,10)
    self.lab_text:addTo(clipNode)
    self.handleScrollText = scheduler.scheduleGlobal(handler(self,self._onInterval),0.1)

 function MainScene:_onInterval(dt)
    local w = self.lab_text:getContentSize().width
    local x = self.lab_text:getPositionX()

    if x <= -w then
        scheduler.unscheduleGlobal(self.handleScrollText)
    return
    end
    self.lab_text:setPositionX(x - self.speed)
end

这样子整个跑马灯所需要的元素就都OK了

注意，整个控件都是以0，0点作为锚点的，这样子放起来习惯些。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!