Egret学习笔记 (Egret打飞机-2.开始游戏)

Posted 青城同学的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Egret学习笔记 (Egret打飞机-2.开始游戏)相关的知识,希望对你有一定的参考价值。

打开 Egret Wing,新建一个Egret游戏项目,然后删掉默认生成的createGameScene方法里面的东西

 

然后新建一个BeginScene.ts的文件,作为我们的游戏的第一个场景

 1 class BeginScene extends egret.DisplayObjectContainer {
 2     public constructor() {
 3         super();
 4         this.addEventListener(egret.Event.ADDED_TO_STAGE, this.Init, this)
 5     }
 6 
 7     public Init() {
 8         let begin = new egret.TextField();
 9         begin.text = "Click Begin"
10         begin.size = 50;
11 
12         this.addChild(begin)
13         begin.x = (GameConfig.SceneW - begin.width) / 2;
14         begin.y = GameConfig.SceneH/2;
15     }
16 }

然后我们再Main.ts里面的createGameScene方法把这个场景添加到里面

 /**
     * 创建游戏场景
     * Create a game scene
     */
    private createGameScene() 
    {
        /**
         * 添加开始场景
         */
        this.beginScene = new BeginScene();
        this.beginScene.width = GameConfig.SceneW;
        this.beginScene.width = GameConfig.SceneH;
        this.addChild(this.beginScene)

    }

然后点击Wing的调试按钮,这时候不出意外的话,模拟器中间上就会显示出Click Begin的字,(如果使用Chrome调试的话,那么最好切换到手机模式)

 

光秃秃的几个字看起来也有点尴尬,我们再来给当前场景弄一个背景层

再在src下新建一个文件 BgContent.ts 然后编写如下代码

/**
 * 背景
 */
class BgContent extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.Init, this)
    }

    public Init(): void {
        var shp: egret.Shape = new egret.Shape();
        shp.graphics.beginFill(0x000000, 1);   
        shp.graphics.drawRect(0, 0, GameConfig.SceneW, GameConfig.SceneH);
        shp.graphics.endFill();
        this.addChild(shp);
    }
}

 这个背景层就是一个黑色的背景,如果需要自己加图片或者其他的样式,就直接在Init里面写自己的逻辑就行了

加上背景之后,我们再次把这个背景层添加到Main.ts里面

/**
     * 创建游戏场景
     * Create a game scene
     */
    private createGameScene() {

        /**
        * 添加背景层
        */
        var bg = new BgContent();
        bg.name = "bg";
        this.addChildAt(bg, 0)
        /**
         * 添加开始场景
         */
        this.beginScene = new BeginScene();
        this.beginScene.width = GameConfig.SceneW;
        this.beginScene.width = GameConfig.SceneH;
        this.addChild(this.beginScene)

    }

添加到场景的,egret给我们提供了addChildAtaddChild两个方法,前面一个是可以设置容器对象的深度,可以控制对象渲染的层级,比如显示到前面或者后面,后面一个方法,我的理解就是(先添加就先渲染,后添加就后渲染,后添加的就显示在前面)

然后再次点击调试按钮,运行我们的代码

然后开始界面就做好了。

好了,我也要睡觉去了,眼睛都有点疼了

 

以上是关于Egret学习笔记 (Egret打飞机-2.开始游戏)的主要内容,如果未能解决你的问题,请参考以下文章

Egret学习笔记.2 (Egret开发环境)

Egret学习笔记.1 (写在前面的废话)

[egret+pomelo]实时游戏杂记

Egret3D初步学习笔记三 (角色使用)

egret 入门学习笔记之问题解决

Egret学习-初次创建项目