Egret 显示对象(DisplayObject)
核心的显示
显示容器(DisplayObjectContainer)
精灵(Splite)
带有矢量绘制功能的显示容器舞台(Stage)
Egret 的根容器,每个项目有且只有一个 Stage
- 矢量图(Shape)
- 绘制矩形、圆、直线
- 绘制圆弧、拱形、扇形
- 绘制不规则进度条
文本(TextField)
仅为简单文本,可使用 HtmlTextParser 转换 html 样式文本-
- 从硬盘读取纹理资源
- 位图加载纹理资源
- 展示位图
九宫格
可在 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
7let 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
2RES.loadConfig();
RES.loadGroup();
- 使用 URLLoader 类
1
2
3
4
5
6
7let 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 | // 设置数据源 eui.ArrayCollection |