跑酷类游戏实现背景无限循环

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