quick cocos2dx跑马灯实现

前端之家收集整理的这篇文章主要介绍了quick cocos2dx跑马灯实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
利用clippingnode可以制作出许多遮挡效果,跑马灯就是其中一种。

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

实现起来还是挺简单的,实现的思路如下:

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点作为锚点的,这样子放起来习惯些。

猜你在找的Cocos2d-x相关文章