egret游戏开发技巧和问题总结

Egret官网：https://www.egret.com/
Egret Engine：下载Launcher1.2.4
Egret API：点此进入
代码示例：点此进入
UI Editor：点此进入

基础工具
1.Egret wing: win_4.1.6 和 mac_4.1.6，Egret团队已于2018年放弃维护。
2.Egret UIEditor：win_1.12.1 和 mac_1.12.1,wing的升级版，将编辑器和代码分开，代码使用vscode。Editor文档 和 EUI库文档

3.Texture Merger：图集工具1.2.4，点此下载

项目配置

1.egretProperties.json
基础配置：引擎版本，编译版本，引擎模块

{
    
    
  "engineVersion": "5.4.1",
  "compilerVersion": "5.4.1",
  "template": {
    
    },
  "target": {
    
    "current": "web"},
  "modules": [
    {
    
    "name": "egret"},
    {
    
    "name": "eui"},
    {
    
    "name": "assetsmanager"},
    {
    
    "name": "game"},
    {
    
    "name": "tween"},
    {
    
    "name": "promise"}
  ]
}

2.wingProperties.json
默认资源和默认主题，新加资源配置需在configs添加

{
    
    
	"resourcePlugin":{
    
    
		"configs":[{
    
    
			"configPath":"resource/default.res.json",
			"relativePath":"resource/"
		}]
	},
	"theme":"resource/default.thm.json"
}

3.index.html
项目入口，游戏场景宽高，适配策略，横竖屏

<div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
         data-entry-class="Main"//项目入口src/Main.ts
         data-orientation="auto"
         data-scale-mode="showAll"
         data-frame-rate="30"
         data-content-width="640"
         data-content-height="1136"
         data-multi-fingered="2"
         data-show-fps="false" data-show-log="false"
         data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
    </div>

4.manifest.json
游戏加载时，预先加载的引擎模块

{
    
    
	"initial": [
		"libs/modules/egret/egret.js",
		"libs/modules/egret/egret.web.js",
		"libs/modules/eui/eui.js",
		"libs/modules/assetsmanager/assetsmanager.js",
		"libs/modules/game/game.js",
		"libs/modules/tween/tween.js",
		"libs/modules/promise/promise.js"
	],
	"game": [
		"bin-debug/AssetAdapter.js",
		"bin-debug/LoadingUI.js",
		"bin-debug/Main.js",
		"bin-debug/Platform.js",
		"bin-debug/ThemeAdapter.js",
		"bin-debug/bag/Bag.js",
		"bin-debug/bag/BagItem.js"
	]
}

5…wing/tasks.json
编译和调试使用此配置

API使用

1.图集使用

方法一
let sheet:egret.SpriteSheet =RES.getRes("game_json");
let txt:egret.Texture = sheet.getTexture("logo_png");
let bmp:egret.Bitmap = new egret.Bitmap(txt);
this.stage.addChild(bmp);

方法二 
let img:egret.Image = new egret.Image();
img.source = "game_json.logo_png";

2.List使用

class BagItem extends eui.ItemRenderer{
    
    
	imgIcon:eui.Image;
	labName:eui.Label;

	public constructor() {
    
    
		super();
		this.skinName="BagItemSkin";
	}

	protected dataChanged():void{
    
    
		this.imgIcon.source = this.data.icon;
		this.labName.text = this.data.name;
	}
}
//使用
class BagUI extends eui.Component{
    
    
	lst:eui.List;
	public constructor() {
    
    
		super();
		this.skinName="BagSkin";
		RES.createGroup("bag",["bag_json"]);
		RES.loadGroup("bag");
	}

	protected createChildren(){
    
    
		super.createChildren();
		this.lst.itemRenderer = BagItem;
		this.lst.addEventListener(eui.ItemTapEvent.ITEM_TAP,this.selectItem,this);
		this.lst.dataProvider=new eui.ArrayCollection([{
    
    name:"1",icon:"img_1_png"},{
    
    name:"2",icon:"img_2_png"}]);
	}

	private selectItem(e:eui.ItemTapEvent):void{
    
    
		console.log(this.lst.selectedIndex,this.lst.selectedItem);
	}
}

3.egret生命周期

//失去焦点
egret.lifecycle.onPause
//获得焦点
egret.lifecycle.onResume

4.加载blob

//以json形式获取二进制图像数据流
let request = new egret.HttpRequest("games/resource/assets/head.jpg");
request.responseType = 'blob';
let url = location.protocol + "//" + location.hostname + "/tooth/getAvatar";
request.open(url,egret.HttpMethod.GET);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send();
request.addEventListener(egret.Event.COMPLETE,this.avaLoadHandler,this);
request.addEventListener(egret.IOErrorEvent.IO_ERROR,ToothUtil.onGetIOError,this);

private avaLoadHandler(evt: egret.Event): void {
    
    
    var request = <egret.HttpRequest>evt.currentTarget;
    var blob = request.response;
    var img_url = window.URL.createObjectURL(blob);
    console.log(img_url);
    var imgLoader: egret.ImageLoader = new egret.ImageLoader;
    imgLoader.once(egret.Event.COMPLETE,this.avatarHandler,this);
    imgLoader.load(img_url);
}

private avatarHandler(evt: egret.Event): void {
    
    
    var loader: egret.ImageLoader = evt.currentTarget;
    var bmd: egret.BitmapData = loader.data;
    var bmp: egret.Bitmap = new egret.Bitmap(bmd);
    bmp.width = 32;
    bmp.height = 32;
    console.log(this.avax + ',' + this.avay);
    bmp.x = this.avax;
    bmp.y = this.avay;
    this.avay += 20;
    this.table1.addChild(bmp);
}

tween动画

在这里插入代码片

egret编译发布
打开CMD,输入egret，可查看详细命令。egret.cmd位置有两个：全局位置和原始位置。
全局位置：C:\Users\Administrator\AppData\Roaming\npm，也就是npm全局模块下。
原始位置：C:\Program Files (x86)\Egret\EgretLauncher\resources\app\engine\win\bin，也就是EgretLauncher安装目录下，每次启动Launcher时，都会检测全局位置和原始位置是否一样，如果 不一样，会把原始位置的文件复制到全局位置。

如果使用egret-facebook等模块
C:\Users\admin\AppData\Roaming\Egret\engine\5.2.33\build

项目过大，编译速度过慢
1.在终端使用: egret run -a,保存代码时，会自动编译，但是速度依然很慢，并不是想象中只编译一个文件得速度。

2.编译时，egret会自动检测js代码的先后加载顺序，保存在manifest.json文件，若是项目js过多，检测自然时间会很长。
3.项目稳定后，不需频繁增删文件，可以使用此方法：参考这里
修改文件：项目根目录/scripts/config.json,屏蔽IncrementCompilePlugin，每次有代码增删时，需要清理一下。

常见问题
1.问题：编译无反映
解决：在终端试试 egret build -e

2.问题：Cannot find namespace ‘eui’
解决：代码要放在src下才可以

3.问题：FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
解决：打开C:\Program Files (x86)\Egret\EgretLauncher\resources\app\engine\win\bin\egret.cmd，安装node对应64位版本，64位申请内存大约1.5G，32位申请的内存大约800M 。如果修改后依然不行，可直接设置环境变量：NODE_OPTIONS 值为：–max-old-space-size=2056，可以次加大试试。

@SET NODE64=D:\Program Files\nodejs
@IF EXIST "%~dp0node_modules\egret\EgretEngine" (
  FOR /F "usebackq delims=" %%a in ("%~dp0node_modules\egret\EgretEngine") do @(set EGRET=%%a)
) ELSE (
  set EGRET=%~dp0node_modules
)

@IF EXIST "%NODE64%\node.exe" (
  "%NODE64%\node.exe" --no-deprecation --max-old-space-size=8192 "%EGRET%\selector.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node --no-deprecation --max-old-space-size=8192 "%EGRET%\selector.js" %*
)