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.設定主相機參數和背景錄影機參數

   

然後在背景錄影機上挂載元件，設定背景圖節點。和滾動方向即可。

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