美文网首页
白鹭引擎项目实战-赛车游戏(四)

白鹭引擎项目实战-赛车游戏(四)

作者: ee6c75107d3f | 来源:发表于2017-07-20 21:49 被阅读155次

前言

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

这里面主要会讲解一些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点击事件。

源码下载

相关文章

网友评论

      本文标题:白鹭引擎项目实战-赛车游戏(四)

      本文链接:https://www.haomeiwen.com/subject/aenjkxtx.html