creator 无限滚动背景

无限滚动背景

• 技术需求
• • 先上效果图
  • 组件代码
  • 用到的技术点
• 还有不明白的可以找我一起交流

技术需求

创建一个无线滚动背景，适用于场景图一直循环，比如打飞机背景图，跑酷背景图。
           

先上效果图

水平方向无限滚动

垂直方向无限滚动

组件代码

代码片

.

/**
 * 无限滚动背景  
 * 支持横向和纵向
 */
const {ccclass, property} = cc._decorator;

//滚动方向   
enum ROLL_DIRECTIION {
    HORIZONTAL,
    VERTICAL
}

@ccclass
export default class ScrollCamera extends cc.Component {
    
    @property(cc.Integer)
    speed:number = 300; 
    @property([cc.Node])
    loopGrounds:cc.Node[] = [];

    @property({
        type:cc.Enum(ROLL_DIRECTIION)
    })  
    DIR:ROLL_DIRECTIION = ROLL_DIRECTIION.HORIZONTAL;
    
    camera:cc.Camera;

    @property isStop:boolean = false;
  
    start () {
        this.camera = this.getComponent(cc.Camera);
        //初始化背景图片位置
        let node:cc.Node = this.loopGrounds[0] as cc.Node;

        if(this.DIR == ROLL_DIRECTIION.HORIZONTAL){
            let startX = -(cc.winSize.width - node.width)/2;
            node.position = cc.v3(startX, 0);
            for (let i = 1; i < this.loopGrounds.length; i++) {
                let front = this.loopGrounds[i - 1];
                node = this.loopGrounds[i];
                node.position = cc.v3(front.x + (front.width + node.width) / 2,0 );   
            } 
        }else{
            let startY = -(cc.winSize.height - node.height)/2
            node.position = cc.v3(0, startY);
            for (let i = 1; i < this.loopGrounds.length; i++) {
                let front = this.loopGrounds[i - 1];
                node = this.loopGrounds[i];
                node.position = cc.v3(0, front.y + (front.height + node.height) / 2);   
            } 
        } 
    }
 
    update(dt) { 
        if(this.isStop) return;
        let current = this.loopGrounds[0];
        if(this.DIR == ROLL_DIRECTIION.HORIZONTAL){
            let offset = (cc.winSize.width - current.width) / 2;     
            if (this.camera.node.x > current.x + current.width + offset) { 
                let last = this.loopGrounds[this.loopGrounds.length - 1];
                this.loopGrounds.shift();
                this.loopGrounds.push(current);
                current.x = last.x + (last.width + current.width) / 2; 
            }
            this.node.x += dt * this.speed; 
        }else{ 
            let offset = (cc.winSize.height - current.height) / 2;     
            if (this.camera.node.y > current.y + current.height + offset) { 
                let last = this.loopGrounds[this.loopGrounds.length - 1];
                this.loopGrounds.shift();
                this.loopGrounds.push(current);
                current.y = last.y + (last.height + current.height) / 2; 
            }
            this.node.y += dt * this.speed; 
        }
    } 
}

           

用到的技术点

利用creator的摄像机进行渲染背景图

然后一个背景数组根据位置不断拼接

1. 首先设置一个分组

   Creator 编辑器->项目-> 增加一个backgroud组

   

   2.创建一个背景层，里面放上背景图和一个背景摄像机

   

   3.设置主相机参数和背景摄像机参数

   

然后在背景摄像机上挂载组件，设置背景图节点。和滚动方向即可。

还有不明白的可以找我一起交流