欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-23 11:26:42
2D跑酷类游戏背景图需要与主角做相对运动,来让玩家感觉主角在移动,为实现这一效果,就需要背景图的移动,而由于机型的限制,图片资源每张大小不能超过2048*2048,所以做跑酷类游戏的时候需要多张散图拼凑成一张完整的大背景图,但是一个关卡所需要的背景资源又很大,所以就需要有限的背景资源循环使用......

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