Egret入门

发表于 | 分类于 ， | |

写在前面

Egret, 白鹭, H5 引擎, 二维, 使用 TS 开发, BSD 开源.

功能:

  • Egret 继承了 Flash 的优点，同时更加针对游戏开发，主要包括如下功能：
  • 显示列表：清晰、稳健、高效的视觉抽象结构
  • 精灵：一种轻量级显示容器
  • 事件机制：提供了一套生成和处理事件消息的标准方法
  • 纹理集合：将大量图片汇集为一张纹理图进行处理
  • 矢量绘图：封装了方便简单的矢量绘图功能
  • 网络加载：封装了常用的网络通讯协议
  • 位图字体：可通过位图字体方式显示文本
  • 性能监控：可在游戏中快速开启性能监控面板
  • 反射：对 TypeScript 增加了反射机制，方便模块化开发
  • XML 处理：提供标准的 XML 格式解析生成功能
  • 骨骼动画：支持业内最优骨骼动画解决方案 DragonBones
  • 资源加载：提供了整套资源加载方案，优化网络加载功能
  • GUI：提供大量组件，可快速开发游戏中的 UI 控件

安装部署:

下载地址: http://www.egret.com/downloads

安装后内部 Tools 丰富, 含有附加 Resource, 可以直接检测版本更新

命令行使用 egret –help 检测是否安装成功

注意: 需要先更新引擎, 再在项目执行

egret update {project_name}
egret build {project_name} -e

完成项目中引擎的更新

命令行简介

按需:

egret info
egret upgrade {your_project}
egret create_manifest [project_name] -all

每天常用:

egret create [project_name] [--type core|gui] [--runtime html5|native]
egret build [project_name] [-e] [--runtime html5|native] [-quick/-q]
egret startserver [project_name] [--port 3000] [-ip] [-serveronly]

项目完成:

egret publish [project_name] -compile [--runtime html5|native] [--version v0.0.1]
egret create_app [app_name] -f [h5_game_path] -t [template_path]

项目结构

HelloWorld  // 游戏项目
    |-- src // 游戏代码目录,源代码均存放在此目录中，其文件后缀名为`.ts`。
    |-- resources // 游戏资源目录,存放着游戏使用的资源，包括图片文件，音频文件以及资源配置文件等。
    |-- launcher // 游戏入口,所有的可运行查看游戏效果的网页文件均存放在这个文件夹中。
            |-- index.html //启动文件
    |-- libs //egret引擎库文件
    |-- bin-debug // 编译后的代码目录,存放当前debug模式的代码，这个文件夹中绝大部分代码为`.js`文件。
    |-- egretProperties.json //Egret项目编译参数

配置文件 egretProperties.json

document_class 标识代码的入口类名。
modules 项目所使用的第三方库。
    name  名称
    path  第三方模块需要提供路径
release: "../release" 版本位置
native: native模式需要的参数
    path_ignore: [], 忽略列表, 支持*号
    android_path: "../AndroidProj"
    ios_path: "../IOSProj"
egret_version: 当前引擎版本, 自动生成

扩展知识

默认文档类, src/Main.ts, 在配置文件中指定的 document_class

class Main extends egret.DisplayObjectContainer{
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(evt:egret.Event) {
        egret.Profiler.getInstance().run();
        console.log("Print Hello World On Console");

        RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
        RES.loadConfig("resource/resource.json", "resource/");
    }
    private onConfigComplete(evt:egret.Evnet) {
        RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);

        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
        RES.addEventListener(RES.ResourceEvent.GROUPLOADERROR, this.onResourceLoadError, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);

        RES.loadGroup("heroes");
    }
    private onResourceLoadComplete(evt:egret.Event) {
        var bg:egret.Bitmap = new egret.Bitmap(RES.getRes("bgImage"));
        this.addChild(bg);
    }
}
  1. draw：这里参数描述了当前画面渲染时候 drawcall 的次数
  2. cost：包含四个参数，这四个参数分别为，EnterFrame 阶段的开销，引擎 updateTransform 开销，引擎 draw 开销和 HTML5 中 canvas.draw 的开销。
  3. FPS：当前画面的帧频。

快速上手

舞台 this.stage
图形(圆,矩形等)绘制
var shape:egret.Shape = new Shape();
shape.beginFill(0xff0000);
shape.drawRect(0,0,this.stage.stageWidth,this.stage.stageHeight);
shape.drawCircle(30,this.stage.stageWidth/2,this.stage.stageHeight/2);
shape.endFill();
this.addChild(shape); // super.addChild(shape);
适配模式: egret_loader.js 中 NO_SCALE, SHOW_ALL(占满屏幕)
var scaleMode = egret.StageScaleMode.SHOW_ALL;
文本框:
var tx:egret.TextField = new egret.TextField;
tx.text = "I'm Jack, I will use Egret create a fantasy mobile game!";
tx.size = 32;
tx.x = 20;
tx.y = 20;
tx.width = this.stage.stageWidth - 40;
super.addChild( tx );
响应事件:
tx.touchEnabled = true;
tx.addEventListener( egret.TouchEvent.TOUCH_TAP, function( evt:egret.TouchEvent ):void{
    tx.textColor = 0x00ff00;
}, this );

// touchHandler 为自定义方法
tx.addEventListener( egret.TouchEvent.TOUCH_TAP, this.touchHandler, this );
private touchHandler(evt:egret.Event) {
    var tx = evt.currentTarget;
    tx.textColor = 0x00ff00;
}
资源加载

name: 资源唯一标识
type: image text json
url: 通常我们约定配置类型的资源(json,xml..)置于 config 子目录下；其他类型置(img,mp3…)于 assets 子目录下

name: 群组唯一标识
keys: resources 里面的 name,使用逗号间隔

{"resources": [
        {"name":"bgImage","type":"image","url":"assets/bg.jpg"},
        {"name":"egretIcon","type":"image","url":"assets/egret_icon.png"},
        {"name":"description","type":"json","url":"config/description.json"}
],
"groups": [
        {"name":"preload","keys":"bgImage,egretIcon"}
]}

资源使用需要在事件 egret.Event.ADDED_TO_STAGE 触发之后, 以保证资源以及读取到内存之中.

加载配置文件: RES.loadConfig(“resource/resource.json”, “resource/“);

加载资源组: RES.loadGroup(“preload”);

读取资源: RES.getRes(“bgImage”);

深度控制: 先添加的在后面显示

深度是连续唯一的链表?数组?方式存储的, 会根据已有空格子自动进行排序

获取深度 super.getChildIndex( bg )

修改深度 super.setChildIndex( batman, 3 );

Tween 动画效果

锚点 (默认左上角)

像素设置: anchorOffsetX 和 anchorOffsetY

百分比设置: anchorX 和 anchorY

宽高 (像素值) x 和 y

移动位置
egret.Tween.get( batman )
.to( { x:superman.x }, 300, egret.Ease.circIn )
.to( { y:superman.y }, 300, egret.Ease.circIn );

设置透明度
egret.Tween.get( captain )
.to( { alpha:.3 }, 300, egret.Ease.circIn )
.to( { alpha:1 }, 300, egret.Ease.circIn );

声音
var sound:egret.Sound = RES.getRes( "bonus.mp3" );
sound.play();
sound.pause();
sound.stop();
网络
HTTP
var urlloader = new egret.URLLoader();
var urlreq:egret.URLRequest = new egret.URLRequest();
urlloader.addEventListener(egret.Event.COMPLETE, function (event:egret.Event):void {
    console.log(urlloader.data, event.target.data);
}, this);
urlreq.url = "http://192.168.1.136:3001/getTime";
urlreq.method = egret.URLRequestMethod.GET;
urlloader.load(urlreq);

Note: Http 网络测试需要打包成 Android, 否则提示跨域请求~

WebSocket

egretProperties.json 的 modules 中增加 {“name”: “socket”}, 编译 egret build -e

创建对象:

private webSocket:egret.WebSocket;
private createGameScene():void {
    this.webSocket = new egret.WebSocket();
    this.webSocket.addEventListener(egret.ProgressEvent.SOCKET_DATA, this.onReceiveMessage, this);
    this.webSocket.addEventListener(egret.Event.CONNECT, this.onSocketOpen, this);
    this.webSocket.connect("echo.websocket.org", 80);
}
private onSocketOpen(evt:egret.Event):void {
    var cmd = "Hello Egret WebSocket";
    console.log("The connection is successful, send data: " + cmd);
    this.webSocket.writeUTF(cmd);
}
private onReceiveMessage(evt:egret.Event):void {
    var msg = this.webSocket.readUTF();
    console.log("Receive data:" + msg);
}

Note: 使用 NodeJS 的 WebSocket 时 var connection=request.accept(“”, request.origin);, 第一参数要为””.

Donate - Support to make this site better.
捐助 - 支持我让我做得更好.