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上设置不同的数值,那么移动速度就会不一样,就会造成视差效果。我们唯一要注意的是,近快远慢,近大远小的常识要牢记,也就是前景的速度要比背景快,不然会很容易头晕(不要问我为什么知道)。