发布于 08/02 14:46
下载安装：
1、EgretLauncher
下载完成按照要求一步步安装就可以了。
引擎管理工具，包括版本管理，项目打包，项目创建，其他工具下载安装等。
2、Egret Wing
打开EgretLauncher引擎管理工具，下载安装egret wing，（这里需要账号密码登录，如果没有就去注册一个吧！
egret wing支持可视化创建、编辑和管理项目 EUI，以及 TS 代码编写和断点调试。
3、更多工具
egret的工具非常多，上述安装的wing是最主要的开发工具，其余的安装方法也差不多，简单用法介绍可以参考官网的介绍，这里不赘述。
1、项目类型
打开EgretLauncher，选中项目，点击创建项目：
创建项目有两个选项，游戏项目和EUI项目，主要是勾选的拓展库不同，建议创建时不管是哪种，都将eui 和game两个库都勾选上。
除了默认勾选的，其他按需求勾选。
舞台尺寸一般按照美术出图设置。
2、缩放模式
有很多种，具体介绍可以看官网介绍，可以说非常详细了
旋转方式一般就横屏竖屏或者自动模式，最后创建项目。
打开创建的项目：
.wing文件夹 存放使用wing打开的配置文件
bin-debug文件夹 存放调试时将ts转为js文件
bin-release文件夹 存放打包输出文件(打包后才会出现)
libs文件夹 存放引擎源码以及三方库文件
resources文件夹 存放资源文件包括图片、json、动画、exml等文件
scripts文件夹 存放一些配置文件，比如android ios wxgame的配置脚本文件
src文件夹 存放开发源码
template文件夹 存放模板文件
egretProperties.json文件 三方库的配置文件
其他的可以不用管了，如果还需要详细了解的：
打开项目进入src文件目录
以下是我修改添加注释后的源码（Main.ts）
class Main extends eui.UILayer {
protected createChildren(): void {
super.createChildren();
egret.lifecycle.addLifecycleListener((context) =& {
// custom lifecycle plugin
//inject the custom material parser
//注入自定义的素材解析器
let assetAdapter = new AssetAdapter();
egret.registerImplementation("eui.IAssetAdapter", assetAdapter);
egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());
this.runGame().catch(e =& {
console.log(e);
private async runGame() {
await this.loadResource()
//this.createGameScene();
const result = await RES.getResAsync("description_json")
const gameui:GameUi = new GameUi();
this.stage.addChild(gameui)
//资源加载函数，
private async loadResource() {
//加载页面添加到舞台
const loadingView = new LoadingUI();
this.stage.addChild(loadingView);
//加载默认资源，json文件，里面记录着所有的图片数据
await RES.loadConfig("resource/default.res.json", "resource/");
//加载皮肤文件
await this.loadTheme();
//加载资源组
await RES.loadGroup("preload", 0, loadingView);
//加载完成后将加载页面从舞台移除
this.stage.removeChild(loadingView);
console.log('资源加载完成')
catch (e) {
console.error(e);
private loadTheme() {
return new Promise((resolve, reject) =& {
//加载皮肤主题配置文件,可以手动修改这个文件。替换默认皮肤。
let theme = new eui.Theme("resource/default.thm.json", this.stage);
theme.addEventListener(eui.UIEvent.COMPLETE, () =& {
resolve();
private textfield: egret.TextF
* 创建游戏场景
* Create a game scene
private createGameScene() {
let sky = this.createBitmapByName("dabg@3x_png");
this.addChild(sky);
let stageW = this.stage.stageW
let stageH = this.stage.stageH
sky.width = stageW;
sky.height = stageH;
* 根据name关键字创建一个Bitmap对象。name属性请参考resources/resource.json配置文件的内容。
* Create a Bitmap object according to name keyword.As for the property of name please refer to the configuration file of resources/resource.json.
private createBitmapByName(name: string) {
let result = new egret.Bitmap();
let texture: egret.Texture = RES.getRes(name);
result.texture =
* 描述文件加载成功，开始播放动画
* Description file loading is successful, start to play the animation
private startAnimation(result: string[]) {
let parser = new egret.HtmlTextParser();
let textflowArr = result.map(text =& parser.parse(text));
let textfield = this.
let count = -1;
let change = () =& {
if (count &= textflowArr.length) {
count = 0;
let textFlow = textflowArr[count];
// 切换描述内容
// Switch to described content
textfield.textFlow = textF
let tw = egret.Tween.get(textfield);
tw.to({ "alpha": 1 }, 200);
tw.wait(2000);
tw.to({ "alpha": 0 }, 200);
tw.call(change, this);
资源适配器（AssetAdapter .ts）
class AssetAdapter implements eui.IAssetAdapter {
* @language zh_CN
* 解析素材
* @param source 待解析的新素材标识符
* @param compFunc 解析完成回调函数，示例：callBack(content:any,source:string):
* @param thisObject callBack的 this 引用
public getAsset(source: string, compFunc:Function, thisObject: any): void {
function onGetRes(data: any): void {
compFunc.call(thisObject, data, source);
if (RES.hasRes(source)) {
let data = RES.getRes(source);
if (data) {
onGetRes(data);
RES.getResAsync(source, onGetRes, this);
RES.getResByUrl(source, onGetRes, this, RES.ResourceItem.TYPE_IMAGE);
主题适配器（ThemeAdapter.ts）
class ThemeAdapter implements eui.IThemeAdapter {
* 解析主题
* @param url 待解析的主题url
* @param onSuccess 解析完成回调函数，示例：compFunc(e:egret.Event):
* @param onError 解析失败回调函数，示例：errorFunc():
* @param thisObject 回调的this引用
public getTheme(url: string, onSuccess: Function, onError: Function, thisObject: any): void {
function onResGet(e: string): void {
onSuccess.call(thisObject, e);
function onResError(e: RES.ResourceEvent): void {
if (e.resItem.url == url) {
RES.removeEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, onResError, null);
onError.call(thisObject);
if (typeof generateEUI !== 'undefined') {
egret.callLater(() =& {
onSuccess.call(thisObject, generateEUI);
RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, onResError, null);
RES.getResByUrl(url, onResGet, this, RES.ResourceItem.TYPE_TEXT);
declare var generateEUI: { paths: string[], skins: any }
关于js的异步，依然使用了es7的async与await，用法自行脑补
关于三方库引入
打开egretProperties.json
按照已有的格式以相同的写法将你的三方库路径添加上去，然后在终端执行egret build -e命令
以引入socket.io为例：
开发根目录：D:\dev\live-psz
socket.io目录：D:\dev\socket-libsrc
"name": "socket.io",
"path": "../socket-libsrc/bin/socket.io"
关于exml主题UI布局
在resource目录下新建eui_skins文件夹，在下面新建**.exml文件，然后进行布局，
在default.thm.json确保引入
"skins": {},
"autoGenerateExmlsList": true,
"exmls": [
"resource/eui_skins/Animation.exml",
"resource/eui_skins/AniShowCName.exml",
"resource/eui_skins/GameUi.exml",
"resource/eui_skins/RoleDetailUi.exml",
"resource/eui_skins/RoleUi.exml",
"resource/eui_skins/test.exml"
"path": "resource/default.thm.json"
在src下面新建对应的ts文件
class GameUi extends eui.Component
constructor() {
this.skinName = "resource/eui_skins/GameUi.exml";
如果在布局里面命名了相对应的Id，那么
public gold_group_btn :eui.G
public roleContainer: eui.G
const gameui:GameUi = new GameUi();
this.stage.addChild(gameui)
其他涉及到的API可以查看官网文档，如有错误，望斧正，如有疑问，请留言，我会及时回复。
& 著作权归作者所有
人打赏支持
码字总数 9203
DragonBonesJS是DragonBones的JS版本，DragonBones的改进版。 用法： dragonbones-alone.js dragonbones-pixi.js pixi工厂代码 dragonbones-hilo.js is hilo工厂代码 dragonbones-createjs.j......
一直关注白鹭引擎的童靴会发现，今天白鹭引擎先后完成了白鹭引擎5.2.0、白鹭引擎5.3.0两个版本的更迭，在周三发布《白鹭引擎稳定版即将发布，后续路线图同步公开》文中，我们已详细介绍了白鹭...
最近看到网上一篇文章，标题叫做《2016年 最火的 15 款 HTML5 游戏引擎》。目前针对HTML5游戏的解决方案已经非常多，但谁好谁差却没有对比性资料。特意花了几天时间，针对文章中出现的12款免...
前一篇提到：你应该有一些C或者C++基础，或者Java基础。 个人以为只有Java基础入门Xcode比较困难，特别是非科班出身，从未接触过C的朋友，即使已经能照着例子写东西，确没意思到自己还在门外...
Egret Engine 3.0.0 发布！更新时间：日 概述 Egret Engine 3.0 包含了白鹭时代研发的遵循HTML5标准的2D引擎及全新打造的3D引擎，它解决了HTML5性能问题及碎片化问题，灵活地满足...
没有更多内容
加载失败，请刷新页面
本文讲解如何在两种模式下使用macros,首先在apolloxlua下有两种模式， 一种是 web模式另一种是工具模式。 web模式下我们可以在浏览器端来使用，但是有一些限制， 就是比如说某些native的api...
（IntelliJ IDEA ULTIMATE
30天试用期） 新建一个springCloud项目，如图： 在这里加个注解，启动tomcat后访问才不会404，加入这个注解@EnableEurekaServer，表示着有注册中心的功能...
monroeCode
Question 189. Rotate Array Solution 题目大意：数组中最后一个元素移到第一个，称动k次 思路：用笨方法，再复制一个数组 Java实现： public void rotate(int[] nums, int k) {
JEECG 表单校验新提示风格使用讲解&升级方法 （validform 新风格漂亮，布局简单) JEECG 表单校验采用的是validform，默认的校验提示需要占用页面布局，提示效果较传统。jeecg这个自定义的校验...
1. 安装依赖npm install node-sass --save-devnpm install sass-loader --save-dev2.修改：webpack.base.config.js
(在loaders里面加入以下代码){
test: /\.scss$/,
没有更多内容
加载失败，请刷新页面
文章删除后无法恢复，确定取消删除此文章吗？
亲，自荐的博客将通过私信方式通知管理员，优秀的博客文章审核通过后将在博客推荐列表中显示
确定推荐此文章吗？
确定推荐此博主吗？
聚合全网技术文章，根据你的阅读喜好进行个性推荐
指定官方社区
深圳市奥思网络科技有限公司版权所有扫一扫体验手机阅读
Egret之自定义类库(一)
<span type="1" blog_id="1976887" userid='
255篇文章，19W+人气，0粉丝HTML5隐藏的你不得不知的js全屏接口 fullscreen API | HTML5Party
HTML5时代先锋网
当前位置: >>>> 阅读正文&>&&>&&&&egret engine 如何使用？
egret engine 如何使用？
作者：小葫芦 来源：PC下载网资讯 原创 时间： 16:28:32
&1.不知道大家对egr是否有了解，据小编了解，这是一款非常好用的H5游戏引擎，对于从事H5开发的小伙伴来说，一定非常有用，接下来小编就来为大家介绍引擎的安装配置使用方法。
2.首先在使用egret之前，需要下载一款名为NodeJS的软件，可以来PC下载网寻找这款软件，下载安装之后，需要配置环境，这个大家可以看一下相关教程。
3.一切准备就绪之后，就需要下载安装Egret Engine了，依然可以在PC下载网寻找软件，就是如图所示的软件，下载完成之后，需要到当前文件夹。
4.解压完成之后，打开解压好的文件夹，会进入下图中的页面，然后运行图中红圈选中的install.bat文件，这时会自动安装命令行工具。
5.完成以上步骤之后，就证明已经成功安装Egret Engine了，然后就可以来用命令来编译项目了，不过还需要去下载一个可视化的开发工具，就是下图中的软件。
以上就是小编为大家准备的egret engine如何使用的教程了，大家安装成功之后就可以来开发H5项目了，不过目前软件自身还有一些小问题，这个以后应该会解决的。
如有问题，请加群联系小编！
③：(已满)；群④：
PC下载站网友：