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两个方法,前面一个是可以设置容器对象的深度,可以控制对象渲染的层级,比如显示到前面或者后面,后面一个方法,我的理解就是(先添加就先渲染,后添加就后渲染,后添加的就显示在前面)

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

然后开始界面就做好了。

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

原文地址:https://www.cnblogs.com/boxrice/p/8151577.html

时间: 2024-11-06 03:46:07

Egret学习笔记 (Egret打飞机-2.开始游戏)的相关文章

Egret学习笔记 (Egret打飞机-1.大致思路)

大致看了一遍Egret的官方文档,就开始打算使用Egret来开发一个打飞机游戏. 首先来捋一捋思路,先来看一看一个打飞机游戏的图片 基本上一个打飞机游戏分为 开始游戏   ----------进入游戏的第一个显示对象.必须点击开始游戏界面的开始游戏,才能进入游戏去开始玩 背景   ------背景我们就用两个图片来循环滚动 敌机  -------随机出现N个敌机,并且会不停的发射子弹 猪脚 -------猪脚也会不停的发射子弹 敌人的子弹  ------由敌机发出的子弹,向下飞 猪脚的子弹  

Egret 学习笔记 h5牛牛源码 h5牛牛源码搭建教程

1.纹理集实际上就是将一些零碎的小图放到一张大图当中.游戏中也经常使用到纹理集.使用纹理集的好处很多,我们通过将大量的图片拼合为一张图片从而减少网络请求,原先加载数次的图片资源现在加载一次即可.同时,在引擎渲染的时候也会减少IO读取,从而提高h5牛牛源码性能.h5牛牛源码Q 2171793408     http://wowotouba.com/h52.只要发生事件,Flash就会调度事件对象.如果事件目标不在显示列表中,则Flash Player或AIR将事件对象直接调度到事件目标.例如,Fl

白鹭Egret学习之egret.ImageLoader.load的一个小问题(#1011:流错误)

egret.ImageLoader.load的路径问题 本来这个问题只是一个小问题,但是是学习Egret路途上遇到的第一个困惑了一段时间的问题,也花了一段时间去进行各种尝试.调试想要解决问题.同时也是由于自身基础不够扎实导致,所以记录下来警醒自己. 使用egret.ImageLoader.load加载ImageLoader的资源,其默认路径为工程所在路径,假设工程TEST下有以下资源:TEST->resource->assets->123.jpeg,如下图: 现在想要创建一个位图对象,使

Unity学习笔记12——打飞机战斗模块

打飞机战斗模块: 一.场景管理: 1.双方进入场景效果(例如:依次飞入) 关于动画,这里我们使用的是DoTween组件,具体的使用方法可以看我之前的博客: http://blog.csdn.net/linshuhe1/article/details/51331569 2.战斗结束到下次战斗开始过度效果(例如:屏幕渐黑,胜利一方的飞机飞出屏幕显示范围) 黑幕效果:也是使用Plane组件,但是此时使用的材质所绑定的Shader类型,我们需要自行编写Shader文件,然后在Plane上绑定一个脚本,用

cocos2dx游戏开发——微信打飞机学习笔记(三)——WelcomeScene的搭建

一.场景与层的关系: cocos2dx的框架可以说主要由导演,场景,层,精灵来构成: 1.其中导演,意如其名,就是操控整个游戏的一个单例,管理着整个游戏. 2.场景就像电影的一幕剧情,所以说,懂得如何划分好游戏的场景,是开始动手做游戏的第一步. 3.一个场景会有很多层,用来处理场景不同的功能. 4.而精灵则是最小的单位,比如子弹,飞机,敌机都是一个个的精灵所组成的.   二.WelcomeScene的搭建: 1.场景和层的二种搭建方法: (1)一种就是跟HelloWorld示例一样的方法,以一个

cocos2dx游戏开发——微信打飞机学习笔记(二)——游戏框架

一.游戏的基本框架: WelcomeScene    ——>    GameScene   ——>   GameOverScene ||                                       ||                                    || ∨                                      ∨                                   ∨ WelcomeLayer            

cocos2dx游戏开发——微信打飞机学习笔记(一)——开发准备

一.环境的搭建 1.Windows开发准备: (1)软件下载及安装 •下载Cocos2d-x 最新版本:http://www.cocos2d-x.org/download 或者从Cocos2d-x GitHub主页中克隆Develop分支:https://github.com/cocos2d/cocos2d-x •配置Python 2.7 环境:http://www.python.org/download/releases/ •建议IDE:Visual Studio 2013 •运行cocos2

Egret学习-初次创建项目

最近无聊,好久没有写游戏了,决定学习下egret,主要原因:egret是h5框架,相比android和iPhone或cocos2dx来说不需要安装可以直接运行. 下面进入正题,开始学习egret 简单看了下官方文档, 1.需要安装引擎 EgretLauncher,版本号:1.1.4 安装引擎,5.2.4 2.安装开发工具 Egret Wing3,版本号4.1.6 3.创建项目,跟着官方文档就好 各文件夹功能说明 .wing:包括 Egret 项目的任务配置文件和启动配置文件. wingPrope

[知了堂学习笔记]_用JS制作《飞机大作战》游戏_第2讲(四大界面之间的跳转与玩家飞机的移动)

一.通过点击按钮事件,实现四大界面之间的跳转: (一)跳转的思路: 1.打开软件,只显示登录界面(隐藏游戏界面.暂停界面.玩家死亡界面) 2.点击微信登录(QQ登录)跳转到游戏界面,隐藏登录界面 3.点击暂停,弹出具有透明度的暂停界面 4.点击暂停界面的开始按钮,隐藏暂停界面,调用开始方法(点击登录跳转的方法): 5.点击暂停界面的退出游戏,只显示登录界面,隐藏其他界面: 6.游戏结束界面,该界面的跳转目前还不能通过游戏实现,可以先建设(根据上一讲的游戏界面图片制作). 7.点击游戏结束界面的开