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

相关文章

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