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:在图形化界面中设置条目皮肤