白鹭引擎项目实战-赛车游戏（四）

前言

在之前的所有的工作都是准备工作，现在接下来正式开始编写代码。

这里面主要会讲解一些EgretWing 的使用和exml与逻辑代码结合的例子，初学者对这里很是有疑惑。这里要说一下我们之前皮肤编辑中使用的ID，不知道大家有没有印象，我们给很多组件设置了ID。我们就是利用这个ID使皮肤中的组件和逻辑代码关联起来，进而对逻辑组件进行逻辑操作。

在正式编辑皮肤与逻辑之间代码之前，我们先编辑一下其它代码,主要进行界面的管理.Wing 中整理如下布局，这个根据个人习惯。

beforeCoding.png

场景切换

这里不会过多的讲解，更详细的内容请参考这里的教程

这里主要还是利用自定义事件来传递消息，进行场景切换操作。在Wing的中快捷整理代码，现在需求全选代码，然后ctrl/cmd+i,这个快捷键就是格式化代码，马上会提供全局代码格式化快捷方式。自定义一个类，取名SceneEvent,具体内容

module game {
    /**
     *
     * @author xsstomy
     *
     */
    export class SceneEvent extends egret.Event{
        public static ChangeScene: string = "changeScene";
        public eventType: string;//事件类型
        public eventObj: any;//对象
        
        
        public static GAME_START: string = "gamestart";
        public static GAME_PLAYING: string = "gameplaying";
        public static GAME_END: string = "gameend";
        public constructor(type: string,bubbles: boolean = false,cancelable: boolean = false) {
            super(type,bubbles,cancelable);
        }
    }
}

然后创建一个管理类，取名ViewManager

module game {
    /**
     *
     * @author xsstomy
     * 场景舞台，这里是我个人设定的为舞台
     */
    export class ViewManager extends egret.Sprite {
        public constructor() {
            super();
        }

        private static instance: ViewManager;
        private gameStart: GameStart;
        private gamePlaying: GamePlaying;
        private gameOver: GameOver;

        //获取单例
        public static getInstance(): ViewManager {
            if(ViewManager.instance == null) {
                ViewManager.instance = new ViewManager();
            }
            return ViewManager.instance;
        }
        
        //开始
        public start() {
            this.init();

            this.initListener();
        }

        //初始化数据
        private init() {
            this.gameStart = new GameStart();
            this.gameOver = new GameOver();
            this.gamePlaying = new GamePlaying();

            this.addChild(this.gameStart);
        }
        
        //初始化事件监听
        private initListener() {

            this.addEventListener(SceneEvent.ChangeScene,this.onChangeScene,this);
        }
        private onChangeScene(e: SceneEvent) {
            
            //移除所有子对象
            this.removeChildren();
            
            //判断事件，接下来添加哪个场景在舞台展现
            switch(e.eventType) {
                case SceneEvent.GAME_START:
                    this.addChild(this.gameStart);
                    break;

                case SceneEvent.GAME_PLAYING:
                    this.addChild(this.gamePlaying);
                    break;

                case SceneEvent.GAME_END:
                    this.addChild(this.gameOver);
                    break;
                default: break;
            }
        }
    }
}

皮肤与逻辑代码

gameStart.png

这里以GameStart.ts类讲解。

this.skinName = "gameStartSkin";
我们默认在构造函数中赋值皮肤,更多使用方式查看这里.

public startBtn:eui.Button;
这里定义了一个共有变量,取名为startBtn，类型为eui.Button.注意 这里的名称很重要，可以对比图中的图层，一个Button组件，ID为startBtn. 这两者就同一个同一个ID关联起来了。即面板中的Button组件，游戏开始按钮，在逻辑代码中，我们操作startBtn这个代码中的逻辑，那么显示效果就跟着发生变化。

private sceneEvent: SceneEvent = new SceneEvent(SceneEvent.ChangeScene);
这里定义一个场景切换事件变量。

public childrenCreated() {
    
            this.startBtn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onTouchTab,this)
            
            this.sceneEvent.eventType = SceneEvent.GAME_PLAYING;
        }

这里我们覆写 childrenCreated() 方法。这个方法，在皮肤上所有的子元素创建完成之后才会调用(前提是同步调用)。即相当于，我们需要的操作的元素已经初始化好了，然后我们在这个方法里面添加相对应的逻辑。这里给button添加了一个点击事件。这里说一下，在eui和gui中，所有的组件的touchEnabled 默认的都为 true;非gui和eui，显示对象，默认都是关闭的，即touchEnabled = false

private onTouchTab(e: egret.TouchEvent) {
            ViewManager.getInstance().dispatchEvent(this.sceneEvent);
        }

监听startBtn点击事件。

源码下载