对白鹭引擎的了解也有一个的时间了，期间也尝试过几个小的游戏练手，但是好像官方并没有对场景切换做封装，所以如下来尝试着动手模拟一出。

新建一个egret的游戏项目

1.具体的目录结构就不在一一描述，在src文件夹下面会生成有两个文件，一个是LoadingUI.ts加载类，另一个是Main.ts项目的入口。
接下来删除掉Main.ts文件里面的createGameScene这个方法里面的所有内容，然后在这里面做一些业务逻辑。为了项目和代码的美观，这里只作为一个小的入口，将业务逻辑独立在一个新的文件里面。

代码如下：

1
2
3
4
5
6
Main.ts：
private createGameScene() {
    var viewManager: ViewManager = new ViewManager();
    this.addChild(viewManager);
    viewManager.start();
}

2.在src里新建一个文件夹，在这个文件夹下面存放一个文件用来作为视图控制管理的逻辑代码，命名为ViewManager.ts

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
class ViewManager extends egret.Sprite{//继承精灵类
    public constructor(){
        super();
        this.init();
    }

    private gameStartPanel: GameStartPanel;//自定义属性，存放开始面板
    private gameEndPanel: GameEndPanel;//自定义属性，存放结束面板
    private gamePlayingPanel: GamePlayingPanel;//自定义属性，存放主面板
    
    public init(){
        this.gameStartPanel = new GameStartPanel();
        this.gameEndPanel = new GameEndPanel();
        this.gamePlayingPanel = new GamePlayingPanel();
    }
    public start(){
        this.addChild(this.gameStartPanel);
        this.gameStartPanel.start();
        //监听开始面板里面的类型为GAME_START的事件
        this.gameStartPanel.addEventListener(GameStartPanel.GAME_START, this.gamePlaying,this);
    }
    private gamePlaying() {
		//移除掉开始面板里面相应的内容
        this.gameStartPanel.end();
        this.removeChild(this.gameStartPanel);
        this.gameStartPanel.removeEventListener(GameStartPanel.GAME_START,this.gamePlaying,this);
		
		//载入主面板
        this.addChild(this.gamePlayingPanel);
        this.gamePlayingPanel.start();
        //监听主面板里面的类型为CHANGEPANEL的事件
        this.gamePlayingPanel.addEventListener(GamePlayingPanel.CHANGEPANEL,this.gameEnd,this);
    }
    private gameEnd() {
    	//移除掉主面板里面相应的内容
        this.gamePlayingPanel.end();
        this.removeChild(this.gamePlayingPanel);
        this.gamePlayingPanel.removeEventListener(GamePlayingPanel.CHANGEPANEL,this.gameEnd,this);

        //载入结束面板
        this.addChild(this.gameEndPanel);
        this.gameEndPanel.start();
        //监听结束面板里面的类型为GAME_END的事件
        this.gameEndPanel.addEventListener(GameEndPanel.GAME_END,this.gameStart,this);
    }
    private gameStart(){
    	//移除掉结束面板里面相应的内容
        this.gameEndPanel.end();
        this.removeChild(this.gameEndPanel);
        this.gameEndPanel.removeEventListener(GameEndPanel.GAME_END,this.gameStart,this);

        //载入开始面板
        this.addChild(this.gameStartPanel);
        this.gameStartPanel.start();
        //监听开始面板里面的类型为GAME_START的事件
        this.gameStartPanel.addEventListener(GameStartPanel.GAME_START,this.gamePlaying,this)
    }
}

  1. 接下来处理每个面板里面的业务，每个文件里面有备注，具体看备注

GameStartPanel.ts
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
class GameStartPanel extends egret.Sprite {//继续精灵类
    public static GAME_START: string = "gameStart";//定义一个事件的类型
    private bg: egret.Bitmap;// 背景
    private startBtn: egret.TextField;//用textfield当做按钮
    public constructor() {
        super();
        this.init();
    }
    //开启监听
    public start() {
        this.startBtn.touchEnabled = true;//开启触摸
        this.startBtn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onTouchTab,this);
    }
    //初始化
    private init() {
    	//背景
        this.bg = new egret.Bitmap(RES.getRes('gameStartBgImage'));
        this.addChild(this.bg);
		
		//开始按钮
        this.startBtn = new egret.TextField();
        this.startBtn.text = '开始游戏';
        this.addChild(this.startBtn);
        this.startBtn.x = (480 - this.startBtn.width) * 0.5;
        this.startBtn.y = 400;
    }

    private onTouchTab(e: egret.TouchEvent) {
    	//分发一个类型为上面所定义事件
        this.dispatchEventWith(GameStartPanel.GAME_START);
    }
	
    //结束界面，释放监听
    public end() {
    	//关闭触摸
        this.startBtn.touchEnabled = false;
        if(this.startBtn.hasEventListener(egret.TouchEvent.TOUCH_TAP))
            this.startBtn.removeEventListener(egret.TouchEvent.TOUCH_TAP,this.onTouchTab,this);//移除事件监听
    }
}

GamePlayingPanel.ts
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
class GamePlayingPanel extends egret.Sprite {//继续精灵类
    public static CHANGEPANEL: string = "changepanel";//定义一个事件的类型
    private bg: egret.Bitmap;// 背景
    private timeTitle: egret.TextField;//用textfield当做开始按钮
    private timer: egret.Timer;//计时器
    private timeNumbers: number = 20;//计时的秒数
    public constructor() {
        super();
        this.init();
    }
    //开启监听
    public start() {
        this.timeNumbers = 20;
        this.timer.start();//开启计时器
        this.timer.addEventListener(egret.TimerEvent.TIMER,this.onTimer,this);
        this.timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE,this.onTimerComplete,this);
    }
    //初始化
    private init() {
        this.bg = new egret.Bitmap(RES.getRes('gamePlayingBgImage'));
        this.addChild(this.bg);

        this.timeTitle = new egret.TextField();
        this.timeTitle.text = "剩余时间：" 　+ this.timeNumbers + " 秒";
        this.timeTitle.x = (480 - this.timeTitle.width) * 0.5;
        this.timeTitle.y = 400;
        this.addChild(this.timeTitle);
        this.timer = new egret.Timer(1000,this.timeNumbers);
    }

    private onTimer(e:egret.TimerEvent){
        this.timeNumbers -= 1;
        this.timeTitle.text = "剩余时间：" 　+ this.timeNumbers + " 秒";
    }
    
    private onTimerComplete(e: egret.TouchEvent) {
    	//分发一个类型为上面所定义事件
        this.dispatchEventWith(GamePlayingPanel.CHANGEPANEL);
    }
        	
    //结束界面，释放监听
    public end() {
        if(this.timer.hasEventListener(egret.TimerEvent.TIMER))
            this.timer.removeEventListener(egret.TimerEvent.TIMER,this.onTimer,this);
        if(this.timer.hasEventListener(egret.TimerEvent.TIMER_COMPLETE))
            this.timer.removeEventListener(egret.TimerEvent.TIMER_COMPLETE,this.onTimerComplete,this);    
        this.timer.stop();
        this.timer.reset();
    }
}

GameEndPanel.ts
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
class GameEndPanel extends egret.Sprite {//继续精灵类
    public static GAME_END: string = "gameEnd";//定义一个事件的类型
    private bg: egret.Bitmap;// 背景
    private restartBtn: egret.TextField;//用textfield当做按钮
    public constructor() {
        super();
        this.init();
    }
    	
    //开启监听
    public start() {
        this.restartBtn.touchEnabled = true;
        this.restartBtn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onTouchTab,this);
    }
    //初始化
    private init() {
        this.bg = new egret.Bitmap(RES.getRes('gameEndBgImage'));
        this.addChild(this.bg);

        this.restartBtn = new egret.TextField();
        this.restartBtn.text = '重新开始游戏';
        this.addChild(this.restartBtn);
        this.restartBtn.x = (480 - this.restartBtn.width) * 0.5;
        this.restartBtn.y = 400;
    }

    private onTouchTab(e: egret.TouchEvent) {
    	//分发一个类型为上面所定义事件
        this.dispatchEventWith(GameEndPanel.GAME_END);
    }
        	
    //结束界面，释放监听
    public end() {
        this.restartBtn.touchEnabled = false;
        if(this.restartBtn.hasEventListener(egret.TouchEvent.TOUCH_TAP))
            this.restartBtn.removeEventListener(egret.TouchEvent.TOUCH_TAP,this.onTouchTab,this);
    }
}