菜鳥教程 | Egret場景切換管理類切換和單例使用方法

場景切換是不少開發者在開發過程當中必不可少的一個環節，當項目中有兩個或兩個以上的遊戲場景時，怎樣管理這些場景，可以使它們之間的切換更加方便呢？今天就爲你們介紹場景切換管理類的切換方法和單例的使用方法。

案例源碼:https://github.com/hkjlx/qhcj

 首先建立一個全部場景的父類Scene

Scene類主要是爲了方便管理場景，此類是一個抽象類，子類必須繼承此類並實現onComplete()抽象方法才能進行場景的切換。

abstract class Scene extends eui.Component{
    public constructor() {
        super();
        // 監聽組件建立完畢 也就是場景的外觀建立完畢
        this.addEventListener(eui.UIEvent.CREATION_COMPLETE,this.onComplete,this);
    }
     protected abstract onComplete();
}

場景管理器SceneManger

全部場景的切換，彈出關閉都是由SceneManger類來控制，這樣方便對場景進行統一管理。

1.使用單例模式

SceneManger類須要使用到單例模式，單例模式是一種經常使用的軟件設計模式，其定義是單例對象的類只能容許一個實例存在。

class SceneManager {
    private static _manager:SceneManager;
    public static get Instance(){
        if( SceneManager._manager==null){
            SceneManager._manager = newSceneManager();
        }
        return SceneManager._manager;
    }
    public constructor() {
    }
}

 

 2.控制場景切換的方法

changeScene()方法：當舞臺上有場景時，會先將當前場景從舞臺移除，再添加新場景到舞臺上；當舞臺尚未場景時，會直接添加到舞臺上。

 

public rootLayer:eui.UILayer;//起始場景
    private currentScene:Scene;//須要顯示的場景
    private pop_scene:Scene;//彈出場景層
    //切換場景
    public changeScene(s:Scene){
        if(this.currentScene){
           this.rootLayer.removeChild(this.currentScene);
            this.currentScene = null;
        }
        this.rootLayer.addChild(s);
        this.currentScene = s;
    }

 

3.彈出場景和關閉彈出場景

彈出場景不會使底層場景消失，而是直接在當前場景上再顯示一個場景出來（主要用於設置面板之類的）。

在彈出場景時先調用了一次關閉場景層，防止還沒關閉場景層又點擊了彈出場景層。

   

 //彈出場景層
    public pushScene(s:Scene){
        this.popScene();
        if(!this.pop_scene){
            this.rootLayer.addChild(s);
            this.pop_scene = s;
        }
    }
    //關閉場景層
    public popScene(){
        if(this.pop_scene){
            this.rootLayer.removeChild(this.pop_scene);
            this.pop_scene = null;
        }
    }

 

在入口文件 Main.ts 中引入場景管理類 SceneManage

首先將Main.ts中createGameScene()方法中的代碼刪掉，再調用下面的方法,將this定爲起始場景（舞臺）。

SceneManager.Instance.rootLayer = this;

使用eui建立三個場景和一個彈出場景

使用eui建立三個場景，分別爲：開始場景（StartScene.exml），遊戲場景（GameScene.exml），結束場景（EndScene.exml）。

下圖示例爲開始場景（StartScene.exml）：

 

 

使用eui建立彈出層（TanChu.exml）。

下圖示例爲彈出場景：

 

 

eui文件建立完成以後需在終端中輸入egret build編譯項目，這時會在default.thm.json 文件中生成皮膚對應的skinName。

 

開始場景（StartScene.ts）、遊戲場景（GameScene.ts），結束場景（EndScene.ts）對應的TS文件

因爲StartScene類繼承自Scene抽象類，因此在此類中必須得實現onComplete()方法，示例代碼以下：

 

class StartScene extends Scene {
        public btn_tc: eui.Label;//彈出層按鈕
        public btn_qh2: eui.Label;//切換場景


        public constructor() {
            super();
            //指定開始場景對應的皮膚文件StartScene.exml
            this.skinName ="resource/game/StartScene.exml";
        }
        //實現父類的onComplete方法
        protected onComplete() {
            //設置兩個Label爲可點擊
            this.btn_tc.touchEnabled =true;
            this.btn_qh2.touchEnabled =true;
            //添加點擊事件
           this.btn_tc.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTaptc,this);
            this.btn_qh2.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onTapqiehuan, this);
        }
        //彈出場景
        private onTaptc(){
        }
        private onTapqiehuan(){
        }
}

 

 

遊戲場景（GameScene），結束場景（EndScene）對應的ts文件基本與開始場景一致。

 

可參考源碼:https://github.com/hkjlx/qhcj

 

遊戲初始化時在Main.ts中的createGameScene()方法添加開始遊戲場景(StartScene)，切換場景時調用SceneManager.Instance.changeScene()便可；注意：此處參數爲一個場景實例。

let s1:StartScene =  new StartScene();
SceneManager.Instance.changeScene(s1);

彈出場景層方法

在對應的點擊事件中調用pushScene()方法。

let tc:Tanchu = new Tanchu();
SceneManager.Instance.pushScene(tc);//添加場景彈出層

若是須要關閉彈出場景層，在彈出場景層的類中調用popScene()方法。

SceneManager.Instance.popScene();//移除場景層

小結

本文主要講解了場景切換管理類的切換方法和單例的使用方法，有任何技術問題或者以爲這篇文章對你有所幫助，歡迎留言與咱們交流互動！