Egret 基础知识笔记

Egret 显示对象(DisplayObject)

核心的显示

  • 显示容器(DisplayObjectContainer)

  • 矢量图(Shape)
    • 绘制矩形、圆、直线
    • 绘制圆弧、拱形、扇形
    • 绘制不规则进度条
  • 文本(TextField)
    仅为简单文本,可使用 HtmlTextParser 转换 html 样式文本

  • 位图(Bitmap)

    • 从硬盘读取纹理资源
    • 位图加载纹理资源
    • 展示位图
    • 九宫格
      可在 default.res.json 内直接选中资源设置

    • 填充模式(fillMode)

    • 纹理集
      • 合并纹理集
      • 加载纹理集中的特定纹理
    • 混合模式
    • 滤镜
  • 位图文本(BitmapText)
    • 如何制作字体文件(Texture merger 工具)
    • 如何创建位图文本

属性

  • 基本属性
    alpha:透明度
    width:宽度
    height:高度
    rotation:旋转角度
    scaleX:横向缩放
    scaleY:纵向缩放
    skewX:横向斜切
    skewY:纵向斜切
    visible:是否可见
    x:X轴坐标值
    y:Y轴坐标值
    anchorOffsetX:对象绝对锚点X
    anchorOffsetY:对象绝对锚点Y

  • 遮罩(Mask)
    遮罩的作用是指定一个显示对象的可见区域,所有显示对象都具备遮罩功能。

资源加载(RES)

  • 资源配置文件(*.res.json)
  • Wing 提供设计/源码模式编辑
  • 添加资源到资源配置文件
  • json 的字段意义
  • RES 工作过程
    加载资源配置文件(loadConfig()) => 加载资源组(loadGroup())=>从内存读取资源(RES.getRES()/RES.getRESAsync()/RES.getRESByUrl()),销毁资源(RES.destroyRES())
  • 利用 group 分场景加载资源

事件机制

事件

用户交互/网络请求。。。

事件监听器

响应事件的函数

添加事件监听器

DisplayObject.addEventListenner(事件名,事件监听器函数,指针);

移除事件监听器

DisplayObject.removeEventListenner(事件名,事件监听器函数,指针);

常用事件

事件流

先捕获再冒泡,addEventListenner 第四个参数 useCapture 决定是捕获还是冒泡时触发

事件对象

事件监听器的参数e

自定义事件

  • 派发
    DisplayObject.dispatchEvent(new Event(自定义事件名));
  • 响应
    DisplayObject.addEventListenner(自定义事件名,事件监听器函数,指针);

声音

分类

  • 背景音乐
  • 游戏音效

声音播放相关类

  • Sound
    声音类,主要是用加载并播放文件
  • SounChannel
    声音控制类,每个 Sound 均需要分配给一个 SoundChannel ,可对声音进行更精细的控制

解决方案

  • 使用 egret.Sound 和事件监听的方式加载播放(egret.Event.COMPLETE监听成功,egret.IOErrorEvent.IO_ERROR监听错误)
    1
    2
    3
    4
    5
    6
    7
    let s:egret.Sound = new egret.Sound();
    let bgMusic = s;
    s.load(SRC);
    s.addEventListener(egret.Event.COMPLETE,()=>{
    let channel:egret.SoundChannel = this.bgMusic.play();
    },this);
    s.addEventListener(egret.IOErrorEvent.IO_ERROR,()=>{},this);
  • 使用 RES 模块加载(加载时间可能会过长,不推荐)
    1
    2
    RES.loadConfig();
    RES.loadGroup();
  • 使用 URLLoader 类
    1
    2
    3
    4
    5
    6
    7
    let loader:egret.URLLoader = new egret.URLLoader();
    loader.addEventListener(egret.Event.COMPLETE,(event:egret.Event)=>{
    let sound:egret.Sound = loader.data;
    sound.play();
    },this);
    loader.dataFormat = egret.URLLoaderDataFormat.SOUND;
    loader.load(new egret.URLReqest(SRC));

EUI

EUI扩展库类图

默认项目基本加载过程

Skin(.EXML) + UIComponent(.JS),通过 eui.IThemeAdapter 加载default.thm.json 的配置进行关联,其中图片素材通过 eui.IAssetAdapter 关联,

控件

  • 文本
  • 图片
  • 按钮
  • 复选框
  • 单选框
  • 状态切换按钮
  • 滑动选择器
  • 进度条
  • 输入文本

容器

  • 简单容器
  • 层叠容器
  • 面板容器
  • 滚动控制容器

数据集合

  • 数据容器(结合数组集合和列表使用)
  • 数组集合
  • 列表
  • 选项卡
  • 自定义展示器

数据容器的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 设置数据源 eui.ArrayCollection
let arr:Array<any> = [];
for(let i = 0;i < 10;i++){
arr.push({name:`label:i`});
}
let euiArr:eui.ArrayCollection = new eui.ArrayCollection(arr);

// 创建数据容器
let dataGroup:eui.DataGroup = new eui.DataGroup();
dataGroup.dataProvider = euiArr;
// 展示方法1:设置展示类,必须继承自 eui.ItemRenderer,并在 dataChange 方法中渲染数据
dataGroup.itemRenderer = LabelRender;
// 展示方法2:设置数据展示皮肤,可在 EXML 文件中通过 {} 绑定 data 中的数据
dataGroup.itemRendererSkinName = SRC;
this.addChild(dataGroup);
// 展示方法3:在图形化界面中设置条目皮肤