Egret Engine学习笔记（一）——Get Started

最新推荐文章于 2026-02-06 05:18:46 发布

原创最新推荐文章于 2026-02-06 05:18:46 发布 · 1.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Egret

Egret 专栏收录该内容

2 篇文章

订阅专栏

今天开始利用空闲时间学习Egret，学习的过程中想把一些在官方文档里看到的知识点记录一下，决定开始写自己的博客。因为自己是个完完全全的初学者，所以博客里可能不会有什么技术含量，只是自己记录和学习使用。

一、Hello World

1、扩展库

创建项目时可以选择扩展库，这里为官方文档中对常用的扩展库的简介，之后具体学习每个扩展库后再写新的文档具体介绍。

res资源加载库：RES模块是Egret为开发者准备的一套功能完善的资源加载机制。当开发者编写游戏时，无需关心资源加载的细节，只需要指定加载的资源，并且在对应的逻辑位置中添加相应的执行加载代码即可。
eui界面制作库：EUI是一套基于Egret核心显示列表的UI扩展库，它封装了大量的常用UI组件，能够满足大部分的交互界面需求，即使更加复杂的组件需求，您也可以基于EUI已有组件进行组合或扩展，从而快速实现需求。
DragonBones龙骨动画库：DragonBones是一套2D骨骼动画的库，当开发者使用DragonBones pro导出的动画文件时，必须使用DragonBones库来解析和控制动画。
game库：game库主要提供了1、使用Texture Merger制作的动画文件的解析和控制，2、提供了ScrollView 是用于滑动的辅助类，将一个显示对象传入构造函数即可。可以在指定的尺寸范围内显示超过该范围的显示对象。并可以在此范围内随意拖动。3、使用了egret封装的定时函数。
socket库：WebSocket是基于H5规范的，WebSocket 类用于发送和接收数据,WebSocket 标准在很大程度上简化了复杂的双向网络沟通和连接管理。
egret实验功能库: 对照片选择器功能，可以选择手机照片并显示，目前只支持 Web 端。

2、缩放模式和旋转模式

种类非常多，具体看这里。

3、项目结构

只记录官方有具体介绍的文件。

egretProperties.json

项目的配置文件，存储引擎所涉及的配置

engineVersion 字段

项目当前用来运行游戏的 egret 引擎版本

compilerVersion 字段

项目当前使用的 egret 命令行版本，比如执行 build,publish 等命令，每个版本略有不同

template 字段

如果存在该字段，在发布 Html5 项目时，会使用 template/web/index.html 来作为入口文件。

即该字段只要存在，就会使用 template/web/index.html 作为入口文件。

target字段

执行build和publish命令时的目标类型。

web：会编译成Html5项目
wxgame：会编译成微信小游戏项目
bricks：会编译成QQ玩一玩项目
android：会编译成安卓项目
iOS：会编译成iOS项目

modules字段

定义项目中引用的所有库文件。每一个库都是形如{"name":"moduleName" , "path":"modulePath"}的配置信息。

name字段是库名，path字段是库文件存放路径，如果没有此字段，取默认值${EGRET_DEFAULT}。

{
    "egret_version":"5.2.6",
    "modules":[
        {
            "name":"egret",
        },
        {
            "name":"tween",
            "path":"${EGRET_APP_DATA}/4.0.3"
        },
        {
            "name": "particle",
            "path": "../libsrc"
        },
        {
            "name": "promise",
            "path": "./promise"
        }
    ]
}

path字段中可以包括库文件版本号，path字段所对应的路径可能在项目中，也可能在项目外。

如果在项目中，项目运行时直接加载此路径对应的库。
如果在项目外，引擎编译时会首先将此路径所对应的库拷贝至项目中的libs/modules文件夹中，然后加载该文件夹中的库。

修改该配置中的内容后，需要执行egret clean命令进行重新构建，以保证改动生效。

urlParams字段（3.1.6以上支持）

针对egret run命令添加URL参数

{
    "urlParams":{
        "okok":12,
        "id":455464564
    }
}

例如上面这个配置，在执行egrent run后会在浏览器里打开地址

http://10.0.4.63:3000/index.html?okok=12&id=455464564

二、生命周期

在游戏中，用户可以切换应用的前后台。在用户进入后台时，关闭游戏逻辑、渲染逻辑、背景音乐，可以保证更好的用户体验。

白鹭引擎4.1版本引入生命周期管理器：egret.lifecycle。

其中，onPause用来判断app进入后台，onResume用来判断app进入前台。其示例代码如下：

egret.lifecycle.onPause = ()=> {
    console.log("app 进入后台");
    egret.ticker.pause(); // 关闭渲染与心跳
}
egret.lifecycle.onResume = ()=> {
    console.log("app 进入前台");
    egret.ticker.resume(); // 打开渲染与心跳
}