cocos2dx之利用视差效果制造简单动画

                     cocos2dx之利用视差效果制造简单动画

 

    之前和大家分享过，如何实现视差效果。不外乎就是利用前中后背景的速度不一致，导致的视觉差异。

    我们市面上很多的跑酷类游戏都是利用这个原理让背景图无限循环。

    →→视察效果原理

    今天就直接上一个例子，告诉大家如何实现这个功能。

     

  （像上图这个例子，很明显背景图的移动速度是比游戏其他UI移动的要慢的）

 

（一）让背景图重复展示

    我的做法是：在编辑器中放入两张背景图，然后图首尾相接（就是前面的图无缝紧接着后面的前端），然后只是展示一张图片在屏幕上，两张图按同样的速度往前移动，然后当第一张图完全移动出屏幕时，就把第一张图的位置移动到第二张图后面。

local playCartoonLoop = function(img, speed)
    local width = img:getSize().width
    local y = img:getPositionY()
    local moveSpd = speed  -- 滚动速度
    local moveTo1 = cc.MoveTo:create(2 * width / moveSpd, cc.p(-width / 2, y))
    local moveBack = cc.MoveTo:create(0, cc.p(width * 3 / 2 - 20, y))
    local seq = transition.sequence({ moveTo1, moveBack})
    local action = cc.RepeatForever:create(seq)
    img:runAction(action)
end

   其实moveTo1是移出屏幕的操作，moveBack是重置位置的操作。我们把这两个动作按顺序执行，用sequence来拼接起来。然后因为我们的背景图是不断的重复重复的，所以我们再用一层RepeatForever来创建一个不断循环的动作，这样子我们就完成了背景图重复展示的功能。

 

（二）让前景和背景的速度不一样，造成视差效果

   其实第二步很简单，我们代码可以重用上面的，我们只需要在moveSpd上设置不同的数值，那么移动速度就会不一样，就会造成视差效果。我们唯一要注意的是，近快远慢，近大远小的常识要牢记，也就是前景的速度要比背景快，不然会很容易头晕（不要问我为什么知道）。

 

  OK，今天的分享就到这里！谢谢大家！