Egret社区

场景切换~新手

2019-8-21 18:50
4260
场景主要分为开始场景,游戏场景,结束场景,这里我们来实现一个简单的场景界面切换,希望能够帮助到刚入门的朋友。
下面是创建过程:
首先打开Egret Launcher创建项目:
857831e834152a64179de9a9b68e132.png
在src文件夹下创建一个SceneManager场景切换管理类,
[mw_shl_code=javascript,true]class SceneManager
{
    private constructor() {   

    }
        /**单例模式 */
        private static _instance:SceneManager ;
    public static getInstance():SceneManager
    {
        if (!this._instance)
        {
            this._instance = new SceneManager();
        }
        return this._instance;
    }
       
        private _currentScene:Scene;
        public gameStage:egret.DisplayObjectContainer;//舞台
        /**
     * 切换场景
     * @param newScene 监听函数
     */
    changeScene(newScene:Scene)
        {
                //把旧场景从舞台上移除
                if(this._currentScene)
                {
                        this.gameStage.removeChild(this._currentScene);
                        this._currentScene = null;
                }
                //把新场景添加到舞台上
                this.gameStage.addChild(newScene);
                this._currentScene = newScene;
        }
}[/mw_shl_code]
为了更好的管理,然后在创建一个父类场景,父类场景中所有的属性,子类场景中必须有
[mw_shl_code=javascript,true]abstract class Scene extends egret.DisplayObjectContainer{
        public constructor() {
                super();
                this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
                this.addEventListener(egret.Event.REMOVED_FROM_STAGE,this.onRemove,this);
        }

        protected abstract onAddToStage();//添加
        protected abstract onRemove();//移除
}[/mw_shl_code]
接下来创建我们的开始场景,这里是用文本直接展示了,点击开始游戏,便切换到游戏场景
[mw_shl_code=javascript,true]class StartScene extends Scene{
        public constructor() {
                super();
        }
        protected  onAddToStage(){
                let startBtn:egret.TextField = new egret.TextField();
                this.addChild(startBtn);
                startBtn.text = "开始游戏";
                startBtn.size = 60;
                startBtn.textColor = 100;//一般赋值为十六进制的数

                startBtn.width = this.stage.stageWidth;
                startBtn.height = 300;
                /**文本居中 */
                startBtn.textAlign = egret.HorizontalAlign.CENTER;
                startBtn.verticalAlign = egret.VerticalAlign.MIDDLE;
                startBtn.y = 600;

                startBtn.touchEnabled = true;
                startBtn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onTap,this);//监听
        }

        private onTap(){
                //切换场景
                let s2:GameScene = new GameScene();
                SceneManager.getInstance().changeScene(s2);
        }
        protected  onRemove(){

        }
}[/mw_shl_code]
开始场景创建完成后,在我们的Main这个类中调用,开始场景就可以显示啦
[mw_shl_code=javascript,true]   /**
     * 创建场景
     * Create a game scene
     */
    private createGameScene() {
        let s1:StartScene = new StartScene();
        SceneManager.getInstance().gameStage = this;
        SceneManager.getInstance().changeScene(s1);
    }[/mw_shl_code]
8a7238758b297b01eb3794cb5542d20.png
开始场景有了,然后创建我们的游戏场景,添加了背景图片,点击创建的文本“结束了”,切换到游戏结束场景
[mw_shl_code=javascript,true]class GameScene extends Scene{
        public sky:egret.Bitmap;//创建图片对象
        public constructor() {
                super();
                this.sky=new egret.Bitmap();//初始化
        }
        protected  onAddToStage(){
                this.init();
        }
        private init(){
                this.sky.texture=RES.getRes("bg_jpg");
        this.addChild(this.sky);
                let textBottom:egret.TextField = new egret.TextField();
        textBottom.text = "点击返回";
        textBottom.size = 50;
        textBottom.textColor = 0x66ffcc;
                textBottom.x = 120;
        textBottom.y = 150;
        this.addChild(textBottom);
                textBottom.touchEnabled = true;
                textBottom.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onTap,this);
        }

        private onTap(){
                //切换场景
                let s1:StartScene = new StartScene();
                SceneManager.getInstance().changeScene(s1);
        }
                protected  onRemove(){
                //数组清空
                //停止定时器
                // 释放资源
        }
}[/mw_shl_code]
2605eba4fac4846d7a23f71bf61361e.png
最后创建我们的游戏结束场景,点击创建的文本“点击返回”,又可以切换到我们的开始场景啦
[mw_shl_code=javascript,true]class OverScene extends Scene{
        public Bird:egret.Bitmap;//创建图片对象
        public constructor() {
                super();
                this.Bird=new egret.Bitmap();//初始化
        }
        protected  onAddToStage(){
                this.init();
        }
        private init(){
                this.Bird.texture=RES.getRes("egret_icon_png");
                this.Bird.x=200;
                this.Bird.y=200;
        this.addChild(this.Bird);

                let textBottom:egret.TextField = new egret.TextField();
        textBottom.text = "点击返回";
        textBottom.size = 50;
        textBottom.textColor = 0x66ffcc;
                textBottom.x = 120;
        textBottom.y = 650;
        this.addChild(textBottom);

                textBottom.touchEnabled = true;
                textBottom.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onTap,this);//监听
        }
                private onTap(){
                //切换场景
                let s1:StartScene = new StartScene();
                SceneManager.getInstance().changeScene(s1);
        }
                protected  onRemove(){
       
        }
}[/mw_shl_code]
e6ac9103954de6eacf2900e39fe029e.png







分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部