跑酷背景移动实现
本节我们来看看跑酷游戏中的背景是怎么移动的。
运行效果如下（蜗牛跑酷可还行...）：
Cocos Creator版本：2.2.0
公众号后台回复"背景移动"，获取完整项目源码：
节点布局
首先创建以下节点：
1. bg1和bg2是两张一模一样的图片，它们的大小和锚点都一样，位置是前后拼接。
注：为确保在手机上没有黑边出现，我们背景图片需要大于Canvas画布尺寸。
2. ground节点为地面，这个大家可以自己摆放。
3. snail节点就是主角，我们在它上面加上了动画：
关于动画组件的具体设置大家可以参考摘星星进阶版这一教程，笔者在那里已经讲得非常详细。
背景移动原理
bg1和bg2同时以相同的速度往左移动，当bg1移动了自身宽度的距离后，bg2其实恰好处在了bg1刚开始的位置。那么此时bg2右边已经没有图可以显示了(就是黑边了)，所以当bg1移动了自身宽度的距离后，我们应该立马将bg1放到bg2刚开始的位置，做到无缝衔接。同理bg2到时候也会被重置到刚开始的位置。
注：上面说的“将bg1放到bg2刚开始的位置”是为了便于理解原理，但其实不准确，后文会进行解释。
编写脚本
首先在properties中添加如下属性：
// BgMove.js
properties: {
bg1: cc.Node,
bg2: cc.Node,
snail: cc.Node,
speed: 100,
},speed就是背景移动速度，同时也会影响蜗牛的移动速度。
在onLoad方法中我们确定触发背景重置的x坐标，同时让设置蜗牛动画。
// BgMove.js
onLoad () {
// 获取重置触发坐标点
this.triggerX = -this.bg1.width;
// 设置蜗牛动画
this.snailCrawl();
},这x坐标其实就是背景的宽度负值。snailCrawl方法编写如下：
// BgMove.js
snailCrawl () {
// 设置蜗牛动画
let snailAnim = this.snail.getComponent(cc.Animation);
let state = snailAnim.play();
state.repeatCount = Infinity;
state.speed = this.speed / 50;
},在该方法中我们调用play()播放动画，并设置播放次数为无数次，蜗牛移动速度为this.speed/50，当然大家可以自行调整。
现在重点是update方法：
// BgMove.js
update (dt) {
// 背景移动
this.bg1.x -= dt * this.speed;
this.bg2.x -= dt * this.speed;
// 重置
if (this.bg1.x <= this.triggerX)
this.bg1.x = this.bg2.x+this.bg1.width;
else if (this.bg2.x <= this.triggerX)
this.bg2.x = this.bg1.x+this.bg1.width;
},在该方法中我们让bg1和bg2不断向左移动，当它们的x坐标小于等于触发点时，我们就重置它们的x坐标。
大家可以看到这里不是让它们直接等于bg2最开始的坐标位置。这是因为dt它的值不是确定的，有偏差，所以如果直接将bg1重置到bg2最开始时的位置上的话，那么bg1和bg2可能就不会紧靠着(会有一条小黑边)，大家可以自己试试。
因此重置bg1时正确的写法应该是让bg2当前的x坐标加上背景图片的宽度，重置bg2时同理。
当然除了上面脚本编写的这种方法外，我们其实还可以单单用动画组件来完成背景移动。
就这么简单，希望大家有所收获！
欢迎关注我的微信公众号，发现更多有趣内容：
