文章目录
- EUI 高级制作
- 1. EUI 简介：
- 2. 新建 EUI 项目：
- 3. 可视化编辑器（EXML文件）：
- 4. 资源库面板：
- 5. 组件面板：
- 6. 创建自己的 EUI 界面：
- 7. 创建 EUI 项目，并且绑定按钮事件：
- 7. 布局：
- 1）屏幕适配：
- 2）布局类：
- 8. 控件：
- 1）文本:
- 2）图片：
- 3）按钮：
- 9. 容器：
- 1）简单容器：
- 2）滚动容器：
- 10. 场景切换：
- 1）准备：
- 2）两个场景分别是：
- 3）游戏场景管理者 SceneManager.ts:
- 4）对两个场景分别操作：
EUI 高级制作
1. EUI 简介：
- EUI 是一个基于 Egret 核心显示列表的 UI 扩展库，它封装了大量的 UI 常用组件，可以实现快速的开发需要。
- 官方网址：egret EUI 简介
- EUI 扩展类库图：
2. 新建 EUI 项目：
- 游戏项目旋转 EUI 项目即可；
3. 可视化编辑器（EXML文件）：
- Egret Wing 里面提供了 EXML 可视化编辑器，可以针对 EUI 项目中 EXML 皮肤进行拖拽等可视化操作，皮肤预览，实现了所见即所得的开发效果。
4. 资源库面板：
- 资源库面板中展示了当前项目中所有可以被加载的资源，我们可以通过拖拽的方式将资源面板中的资源拖拽到文档中的设计视图。
5. 组件面板：
组件面板包含当前项目所有可以使用的组件列表，其中包含“控件”、“布局”、“自定义”三种类型。我们可以通过拖拽的方式在文档区的“设计”视图中创建组件。
6. 创建自己的 EUI 界面：
- 新建组件 选择【新建 EUI 组件】：
- 打开 GameBegin.exml 然后通过一个 Button 控件到“设计”视图中：
- 在 Main.ts 中加载自定义的场景：
protected createGameScene(): void { this.addChild(new GameBegin()); }7. 创建 EUI 项目，并且绑定按钮事件：
- 创建 EUI 项目；
- 清空 createGameScene 方法内的代码；
- 创建一个 GameBegin 组件：
- 拖放一个按钮（Button）控件；
- 如果使用图片作为按钮，要删除按钮的标签内容（按钮内的文字）；
- 在 GameBegin.ts 中拿到 GameBegin.exml中的按钮（首先要给你想要拿到的按钮设置 id）；
- 在 GameBrgin.ts 中 定义这个 beginBtn：
- 可以直接手写代码；
- 也可以复制粘贴。
- 给 beginBtn 这个按钮绑定事件：
// 给 beginBtn 绑定事件
this.beginBtn.addEventListener(
egret.TouchEvent.TOUCH_TAP,
this.tapHandler,
this);
protected childrenCreated():void {
super.childrenCreated();
this.init();
}
// 初始化操作
private init() {
// 给 beginBtn 绑定事件
this.beginBtn.addEventListener(egret.TouchEvent.TOUCH_TAP,
this.tapHandler,
this);
}
// 响应函数
private tapHandler(e: egret.TouchEvent) {
alert("点击成功！！");
}7. 布局：
1）屏幕适配：
- 移动设备上存在各种分辨率，如何能够使用一套代码写出适应各种分辨率的 UI 界面，显得尤其重要；
- 完美的屏幕适配分为两个步骤：
- 舞台尺寸（Stage.stageWidth, Stage.stageHeight）与设备屏幕的适配关系；
- 内部 UI 界面与舞台尺寸的适配关系。
- 通常所说的屏幕适配大多数做到了第一点，都是通过 ‘ sacleMode ’来决定舞台尺寸；
- EUI 通过引入自适应流式布局（简称自动布局），能够解决第二步骤的屏幕适配问题；
- 上图定义布局规则，无论舞台尺寸如何变化，最终的效果。都会自动适应。这样可以有效的解决 移动开发中各种屏幕分辨率适配的问题；
2）布局类：
- 基本布局；
- 水平布局：HorizontalLoyout；
- 垂直布局：VerticalLayout；
- 网格布局：TileLayout。
8. 控件：
1）文本:
- 文本控件对应的类是 eui.Liable。
- eui.Lable 是继承自 egret.TextField；
- 手动创建文本控件，并添加到 group 组容器中
// 手动创建 EUI 控件
var Label: eui.Label = new eui.Label();
Label.text = '我手动创建的文本';
// 把手动创建的 eui 控件添加到 group 控件里去
this.mygroup.addChild(Label);2）图片：
- 图片控件对应的类是 eui.Image；
- eui.Image 继承自 egret.Bitmap;
注意：图片控件拖到文档区域时，可以适当调整一下大小
- 九宫格（重要）：
- 目的是为了图片形变过程中的拉伸变形；
- 九宫图原理如图：
- A 图为原图，B 图为 A 图拉伸后的图，原图划分为 A1-A9 的九个区域，当原图拉伸的时候，B1 是直接从 A1 直接拷贝而来，不拉伸。而 B2 这是由 A2 进行拉伸处理产生的。同样，A3/A7A9 直接变成 B3/B7/B9；
3）按钮：
- 按钮控件对应的类是 eui.Button ；
- eui.Button 继承自 eui.Compinent；
- 按钮的皮肤通常有 up / down / disabled 三种状态；
- 按钮可以设置禁用，禁用的按钮会进入 disabled 视图状态，且不再响应交互。
this.myBtn.enabled = false; // 设置按钮不可用9. 容器：
1）简单容器：
- 在 EUI 提供的容器中，Group 是轻量级的，它本身不可以设置皮肤，也不具备外观。它的呈现只取决于内部的现实对象；
- Group 操作内部对象的方法和 Sprite 基本一致，只是增加了两个方法：getElementAt() 和 numElements()；
- 注意：
- 调用 removeChildern() 方法可以删除所有的内部现实对象；
- 如果内容超出了容器的尺寸，默认是全部显示的，可以设置 scrollEnabled = true 来隐藏超出部分。
2）滚动容器：
- 滚动控制容器 eui.Scroller；
- eui.Scroller 继承自 egret.scrollView；
10. 场景切换：
1）准备：
- 需要准备两个场景：
- 开始页面；
- 游戏中页面。
- 需要一个场景管理者；
- 需要在两个场景中设置不同的显示内容；
- 两个场景可以来回切换。
2）两个场景分别是：
- GameBegin.ts（开始场景）：
- beginBtn
- GamePlay.ts（游戏场景）：
- backBtn
- 创建新项目，在 src 和 resource 文件夹下创建 control 和 scene 文件夹。
3）游戏场景管理者 SceneManager.ts:
- 在 scene 文件夹右键 -> 新建模板文件 -> 新建 TypeScript 类；
4）对两个场景分别操作：
- SceneManager.ts
/**
*管理两个场景的管理类
*/
class SceneManager extends egret.DisplayObjectContainer{
// 游戏开始场景的实例
public gameBegin: GameBegin;
// 游戏中的场景的实例
public gamePlay: GamePlay;
private static shared: SceneManager;
public static Shared(): SceneManager {
if(SceneManager.shared == null) {
SceneManager.shared = new SceneManager();
}
return SceneManager.shared;
}
public constructor() {
super();
this.gameBegin = new GameBegin();
this.gamePlay = new GamePlay();
// 默认显示开始场景
this.addChild(this.gameBegin);
}
public change(scene) {
// 点击开始按钮 scene 是 'begin'
// 点击返回按钮， scene 是 'back'
this.removeChildren();
if(scene == 'begin') {
this.addChild(this.gamePlay);
}else if(scene == 'back') {
this.addChild(this.gameBegin);
}
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
