-Egret UI Editor(可视化界面编辑器)下载- v1.12.1官方版-爱看下载站

Egret UI Editor是Egret Wing的升级版本，主要用于egret项目中exml皮肤文件的可视化编辑，可以对皮肤进行可视化编辑、代码编辑和皮肤预览，简单的拖拽动作就可以完成游戏素材的高效管理，并且可以创建补间动画实现各种酷炫的界面动画效果。

软件特色

1、可视化界面编辑

可以对游戏中的 Exml 皮肤进行可视化编辑、代码编辑和皮肤预览，集成三个功能于一体的混合编辑器。

2、集成资源管理器

通过可视化的拖拽操作，轻松高效地管理游戏素材，灵活定制分组加载规则，快速完成资源配置文件。

3、可视化动画编辑

通过设置关键帧，即可自动创建补间动画，实现各种酷炫的界面动画效果。

Egret UI Editor安装教程

1.解压下载的Egret UI Editor，双击EUIEditor-v1.12.1.exe，出现软件的许可协议界面，选择【我同意】，单击【下一步】开始安装

2.开始安装了，如图

3.安装完成，单击【完成】按钮退出安装向导

Egret UI Editor使用教程

基本布局

Egret UI Editor的布局直观简单，起包含一下几个主要部分：

1 编辑器：Exml 可视化编辑器的主要区域，您可以通过拖拽标题栏的方式将打开的编辑器组合成自己喜欢的布局。

2 资源管理器：显示您正在编辑的项目，所在的文件夹内的目录结构，这里对除 Exml 以外的文件做了过滤，所以您你能看到 Exml 文件和文件夹。另外，如果您在项目的项目的 egretProperties.json 中设置了 exmlRoot 属性的话，在您的资源管理器面板中，则只会显示 exmlRoot 目录内容。

3 图层：此面板展现的是您当前正在编辑的 Exml 皮肤内的节点树状结构，您可以在此面板里更加精准的控制皮肤的层级以及组织结构。

4 资源库：资源库内展现的是当前您项目的*.res.json内所指定的资源，您可以通过拖拽的方式，将资源作为UIImage的填充，直接创建在当前编辑器中。

5 组件：组件面板中包含 egret 引擎自带的所有控件，分为控件和容器两类，同时也包含用户通过继承 eui.Component 开发的自定义组件。(注意：自定义组件不支持在编辑器中进行渲染，它将会被转为继承的最近的默认组件进行渲染，Egret UI Editor仅支持默认组件的渲染。)

6 对齐：当您在编辑器中多选控件之后，即可使用对齐面板进行对齐相关的快捷操作。

7 属性：对当前编辑器中选中的组件进行属性修改，其中分为常用属性和所有属性两类，如果您有需要设置的属性(如自定义组件的自定义属性)在常用属性中无法找到的话，可以通过所有属性进行设置。

8 输出：输出面板中会对当前 Exml 皮肤文件的报错进行输出，起输出为引擎报错内容的输出，您可以通过刷新的方式来检查当前皮肤是否还有错误。输出面板的内容不会自动清空，需要您手动进行清除。

快速打开文件

您可以通过如下快捷键来唤起快速打开文件的面板

win: Ctrl + Shift + R

mac: Command + Shift + R

在此面板中，可通过在输入框内输入指定的字符来过滤您想快速打开的文件。同时您可以通过键盘的方向键直接切换所选的要打开的文件。

快捷键设置

您可以通过菜单 Egret UI Editor -> 首选项 -> 快捷键设置来唤起快捷键修改面板：

面板如下：

您可以直接通过输入的方式修改快捷键的设置，具体输入内容您可以参考默认快捷键来完成。

项目设置

您可以通过菜单 Egret UI Editor -> 首选项 -> EUI项目设置来唤起快捷键修改面板：

面板如下：

在此面板中您可以设置项目的主题文件以及资源文件。

可视化编辑器

简介

Egret UI Editor可视化编辑器，是针对 EUI 项目中的 Exml 皮肤进行可视化编辑的编辑器。

该编辑器可以通过可视化的方式更加方便快捷的对 EUI 中的 Exml 皮肤进行编辑，编辑方式包括但不限于托拉拽等。

前置条件

为了可以正常的使用 Egret UI Editor ，您的项目需要满足如下几个条件：

项目必须为 Egret EUI 项目

确保您的项目设置(见第五章)是正确的(即wingProperties.json文件)。

确保指定项目的 Egret 引擎版本您已经正确安装。

可视化编辑

如果您满足了上述前置条件，即可在 Egret UI Editor 中对 Exml 皮肤进行可视化编辑了。

上图所示的为编辑器内的主要部分，其中：

1 视图模式：视图模式分为设计和预览两部分。在设计视图下您可以通过托拉拽的方式来编辑当前的 Exml 皮肤。在预览视图下，您可以预览当前皮肤的即使效果。(预览视图的详情，我们会在后文中讲解)。

2 刷新：刷新按钮可以让编辑器这次刷新当前的 Exml 皮肤，如果当前的皮肤中存在错误，也会在刷新时通过输出面板展现出来。(其报错内容均为 Egret 引擎提供)。

3 拖拽控制：该按钮可以控制当前选中控件拖拽过程中的如下两种行为：

自动识别经过的容器并拖拽到容器内

仅在当前容器层进行平行移动，不会改变当前控件的层级关系。

4 吸附：该按钮可以控制拖拽过程，当前控件是否根据所在皮肤其他控件的中线或边线进行吸附对齐。

5 缩放：对当前可视化编辑的皮肤进行放大或缩小，该功能并不会对皮肤内容进行缩放，进对皮肤展现进行缩放。

6 状态栏：在具有状态的皮肤中，该状态栏可以控制该皮肤的各种状态，如：按钮的皮肤中包括 up, down, disabled 三种状态，您可以通过状态选择切换状态，并针对皮肤的每个状态分别进行编辑。

7 可视化编辑区：在该区域中，您可以通过托拉拽的方式自由调整皮肤内容。

预览视图

预览视图可以预览当前皮肤的效果，其会把当前皮肤中的所有控件在一个真实的 Egret 环境中跑起来。所以如果您的皮肤中有按钮等具有交互性质的控件时，其在预览视图中是可以进行鼠标交互的。

(注意：如果您当前皮肤中的控件均不具备交互，其在预览模式下也是无法交互的。如，button的皮肤是通过图片与文本组成的，这两个组成部分均不具备交互属性，所以在预览视图下按钮的皮肤是无法进行交互的。但，panel的皮肤中其中一个组成部分是按钮，按钮是具备交互属性的，所以在预览视图下，panel的按钮是可以进行点击的。)