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 onl oad(): 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 onl oad(): 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.预览
- 飞机大战
可以看到，虽然飞机没有移动，看上去好像飞机在平稳飞行，背景好像是无限的。 - 冒险岛
可以看到，远景和近景都在移动，看上去好像是错开移动的，就像真实生活中场景一样。