跑酷类游戏实现背景无限循环
2D跑酷类游戏背景图需要与主角做相对运动,来让玩家感觉主角在移动,为实现这一效果,就需要背景图的移动,而由于机型的限制,图片资源每张大小不能超过2048*2048,所以做跑酷类游戏的时候需要多张散图拼凑成一张完整的大背景图,但是一个关卡所需要的背景资源又很大,所以就需要有限的背景资源循环使用
引擎:creator
语言:ts
const { ccclass, property } = cc._decorator;
@ccclass
export default class Test extends cc.Component {
@property(cc.Sprite) //循环的背景图
bgAry: cc.Node[] = null;
private speed: number = 10; //移动速度
private screenSize: cc.Size; //屏幕大小
private readonly cellBgWidth: number = 100; //单张背景图的宽度
onLoad() {
//获取屏幕的大小
this.screenSize = cc.view.getVisibleSize();
}
update(dt: number) {
//实时监测数组的第一张图片超出屏幕设定距离就取出放到数组最后,
//以此来实现背景图循环滚动
//假设背景图一共有5张
if (this.bgAry[0].x <= -(this.screenSize.width / 2 + this.cellBgWidth)) {
let preFirstfar = this.bgAry.shift();
this.bgAry.push(preFirstfar);
preFirstfar.x = this.bgAry[3].x + this.cellBgWidth;
}
for (let i = 0; i < this.bgAry.length; i++) {
//防止卡帧 *dt
this.bgAry[i].x -= this.speed * dt;
}
}
}
本文地址:https://blog.csdn.net/Pan_mouren/article/details/91039365
上一篇: STL