Cocos实例1：实现平面游戏中的滚动地图

Cocos实例：实现平面游戏中的滚动地图

1.应用：

	在2D游戏或某些UI界面中，会经常遇到一些循环滚动的背景或元素。例如飞机大战的背景、冒险岛的双层循环滚动背景，模拟视觉效果上角色在无限背景地图中运动。

2.实现原理

	需要一张上下或左右在顺序排列时可以无缝衔接的背景图片，搭建UI时顺序排列两张以上的背景图，当一张背景图移除屏幕时，另外一张图替换其滚动的初始位置来实现无缝的切换，如此循环。

3.实例

示例的话准备实现两个：一个是在应用中提到的飞机大战背景的循环滚动；一个是类似冒险岛的双层背景滚动。

1.美术资产

• 飞机大战 :
  
  

• 冒险岛:
  
  
  注：可以看到背景1的上下部分是无缝衔接的，背景2左右部分是无缝衔接的。
  备注：资源都是在百度上找的，仅供学习使用，勿商用。

2.搭建UI**

	打开CocosCreator编辑器，这里使用的版本是3.6.3

• 飞机大战
  设计分辨率选择750*1334（竖屏）
  
  接下来编写背景移动的脚本PlaneBg.ts
• 冒险岛
  设计分辨率选择1334*750（横屏）
  和飞机大战的背景搭建一样，只不过横版换成了竖版
  
  接下来编写背景移动的脚本RunBg.ts

3.编写脚本**

• 飞机大战
  编写背景移动的脚本PlaneBg.ts

import { _decorator, Component, Node, UITransform, view } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('PlaneBg')
export class PlaneBg extends Component {
    @property()
    speed: number = 20;
    private bgs: Node[] = [];

    protected onLoad(): void {
        // 获取bg节点
        for (let i = 0; i < 3; i++) {
            this.bgs[i] = this.node.getChildByName(`bg${i}`);
        };
    }
    start() {

    }

    update(deltaTime: number) {
        // 遍历bgs数组，获取每一个背景的当前位置
        for (let i = 0; i < 3; i++) {
            let bg = this.bgs[i];
            const bg_pos = bg.getPosition();
            // 计算新的位置
            let new_pos_x = bg_pos.x;
            let new_pos_y = bg_pos.y - this.speed * deltaTime;
            // 设置新的位置
            bg.setPosition(new_pos_x, new_pos_y);
        };
        // 如果第一个背景的y坐标小于等于-view的高度，则将其从数组中移除，并将其添加到第二个背景的下面
        if (this.bgs[0].getPosition().y <= -view.getVisibleSize().height) {
            let bg = this.bgs.shift();
            this.bgs.push(bg);
            // 设置新的位置
            bg.setPosition(bg.getPosition().x, this.bgs[1].getPosition().y + this.bgs[1].getComponent(UITransform).height);
        }
    }
}

编写完背景移动的脚本后把它添加到背景的父节点上，就可以预览效果了。

• 冒险岛
  编写背景移动的脚本RunBg.ts

import { _decorator, Component, Node, UITransform, view } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('RunBg')
export class RunBg extends Component {

    @property()
    speed_yuan: number = 20;//远景的移动速度慢一点
    @property()
    speed_jin: number = 50;//近景的移动速度快一点

    private _yuanBgs: Node[] = [];
    private _jinBgs: Node[] = [];
    protected onLoad(): void {
        for (let i = 0; i < 3; i++) {
            this._yuanBgs[i] = this.node.getChildByName(`bg_yuan${i}`);
            this._jinBgs[i] = this.node.getChildByName(`bg_jin${i}`);
        };
    }
    start() {

    }

    update(deltaTime: number) {
       // 遍历jin_bg数组，计算新的位置，并设置新的位置
        for (let i = 0; i < 3; i++) {
            let jin_bg = this._jinBgs[i];
            const jin_pos = jin_bg.getPosition();
            let new_jinpos_x = jin_pos.x - this.speed_jin * deltaTime;;
            let new_jinpos_y = jin_pos.y;
            jin_bg.setPosition(new_jinpos_x, new_jinpos_y);

            let yuan_bg = this._yuanBgs[i];
            const yuan_pos = yuan_bg.getPosition();
            let new_yuanpos_x = yuan_pos.x - this.speed_yuan * deltaTime;;
            let new_yuanpos_y = yuan_pos.y;
            yuan_bg.setPosition(new_yuanpos_x, new_yuanpos_y);
        };
        // 如果jin_bg数组的第一个元素的位置小于等于-view的可见宽度，则将其从数组中移除，并将该元素放置在数组的第二个元素的位置的右边
        if (this._jinBgs[0].getPosition().x <= -view.getVisibleSize().width) {
            let jin_bg = this._jinBgs.shift();
            this._jinBgs.push(jin_bg);
            jin_bg.setPosition(this._jinBgs[1].getPosition().x + this._jinBgs[1].getComponent(UITransform).width, jin_bg.getPosition().y);
        }
        // 如果yuan_bg数组的第一个元素的位置小于等于-view的可见宽度，则将其从数组中移除，并将该元素放置在数组的第二个元素的位置的右边
        if (this._yuanBgs[0].getPosition().x <= -view.getVisibleSize().width) {
            let yuan_bg = this._yuanBgs.shift();
            this._yuanBgs.push(yuan_bg);
            yuan_bg.setPosition(this._yuanBgs[1].getPosition().x + this._yuanBgs[1].getComponent(UITransform).width, yuan_bg.getPosition().y);
        }
    }
}

编写完背景移动的脚本后把它添加到背景的父节点上，预览效果

4.预览

• 飞机大战
  可以看到，虽然飞机没有移动，看上去好像飞机在平稳飞行，背景好像是无限的。
• 冒险岛
  可以看到，远景和近景都在移动，看上去好像是错开移动的，就像真实生活中场景一样。