《Cocos Creator游戏实战》跑酷背景移动实现

跑酷背景移动实现

节点布局

背景移动原理

编写脚本

---

本节我们来看看跑酷游戏中的背景是怎么移动的。

运行效果如下（蜗牛跑酷可还行...）：

 

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时同理。

 

当然除了上面脚本编写的这种方法外，我们其实还可以单单用动画组件来完成背景移动。

就这么简单，希望大家有所收获！

 

 

欢迎关注我的微信公众号，发现更多有趣内容：