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

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

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

 

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

class BeginScene extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.Init, this)
    }
    public Init() {
        let begin = new egret.TextField();
        begin.text = "Click Begin"
        begin.size = 50;
        this.addChild(begin)
        begin.x = (GameConfig.SceneW - begin.width) / 2;
        begin.y = GameConfig.SceneH/2;
    }
}

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

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

然后开始界面就做好了。

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

 

目录
相关文章
|
Java Spring 容器
【Java】Spring如何扫描自定义的注解?
【Java】Spring如何扫描自定义的注解?
325 0
|
缓存 小程序 UED
微信小程序如何在切换页面后原页面状态不变
微信小程序如何在切换页面后原页面状态不变
911 0
|
7月前
|
弹性计算 负载均衡 安全
【上云基础系列-02】企业推荐!必学必会的上云标准架构(弹性架构)
本文介绍上云标准弹性架构,针对企业业务发展需求,推荐使用多服务器的弹性架构而非单体架构。方案包含负载均衡、NAT网关、云服务器ECS、云数据库RDS等组件,确保业务的负载分担、冗余备份及平滑扩展。通过统一公网暴露面管理和VPC网络设计,保障架构的稳定性、安全性和可扩展性。该架构适用于中小企业上云,避免性能瓶颈和迭代升级困难,支持业务持续发展。更多内容可参考下方演进说明总览。
|
机器学习/深度学习 PyTorch API
【ORT部署】对bubbliiiing的yolo系列进行进行onnxruntime推理部署
【ORT部署】对bubbliiiing的yolo系列进行进行onnxruntime推理部署
369 0
【ORT部署】对bubbliiiing的yolo系列进行进行onnxruntime推理部署
|
缓存 NoSQL Java
17:缓存机制-Java Spring
17:缓存机制-Java Spring
207 5
|
SQL 安全 搜索推荐
瓴羊Dataphin升级V3.11,新上线数据分析、隐私计算平台促进数据流通消费
瓴羊旗下开发云核心产品Dataphin(智能数据建设与治理)近期升级到V3.11版本,全新上线Notebook数据分析空间,以及Dataphin隐私计算平台,在数据采、建、管、用的基础上,进一步强化数据消费和数据流通能力,帮助企业用标准化的产品能力,在大数据时代构建起生产经济、质量可靠、安全稳定、消费便捷的企业级数据资产,促进数据价值释放。
14503 3
|
SQL 开发框架 .NET
分享74个ASP整站程序源码,总有一款适合您
分享74个ASP整站程序源码,总有一款适合您
141 0
|
前端开发 JavaScript
2023跨年烟花(浪漫烟花+美妙音乐+雪花飘飘)含前端源码直接下载---系列最终篇
2023跨年烟花(浪漫烟花+美妙音乐+雪花飘飘)含前端源码直接下载---系列最终篇
773 0
2023跨年烟花(浪漫烟花+美妙音乐+雪花飘飘)含前端源码直接下载---系列最终篇
|
监控 测试技术 程序员
|
Java Linux Docker
Linux 下的Docker安装与IDEA配置远程Docker
Linux 下的Docker安装与IDEA配置远程Docker
526 0
Linux 下的Docker安装与IDEA配置远程Docker