Egret UI Editor官方版

Egret UI Editor简介

Egret UI Editor提供游戏界面设计的功能，可以帮助用户设计UI界面。它可以与EgretWing和EUI库结合使用。可以在软件中创建新的Exml项目编辑器，在软件中编辑皮肤，将资源直接复制到对应的编辑界面，设计游戏界面动画，调整游戏界面图片，对于需要设计2D游戏界面的朋友非常有帮助。你可以使用其他软件为你设计一个2D游戏。设计完成后，可以用这个Egret UI Editor软件编辑游戏界面。新版本增加了新建窗口的功能，支持同时打开多个项目，优化拖动后不会额外增加属来改变组件大小！

Egret UI Editor软件功能

可视化界面编辑

可以在游戏中进行可视化编辑、代码编辑和皮肤预览Exml皮肤。

集成三种功能的混合编辑器。

集成资源管理器

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

视觉动画编辑

通过设置关键帧，可以自动创建补间动画。

实现各种酷炫的界面动画效果。

Egret UI Editor软件特色

1.界面编辑器

这部分是Egret UI Editor的核心区域，可以编辑界面，制作动画，修改Exml源代码，预览界面最终效果。

2.层

可以拖动层来更改界面中元素层的层次关系。

3.资源库

通过资源库面板，可以将资源素材拖放到UI场景中。您可以通过在下面的搜索资源框中输入文件名来快速查找资源。

4.成分

通过调色板，您可以将默认控件和自定义组件拖放到用户界面场景中。

Egret UI Editor安装方法

1.打开EUIEditor-v1.12.1.exe开始安装并接受软件协议。

2.提示软件安装进度条，等待主程序安装。

3.Egret UI Editor已经安装在电脑中，可以直接打开使用。

Egret UI Editor使用说明

1.启动Egret UI Editor显示中文界面，如果可以使用软件，新建一个编辑项目。

2.视图菜单:资源管理器、图层、输出、资源库、组件、对齐、属

3.编辑菜单，可以撤销错误的编辑内容，剪切数据，复制数据。

4.如果可以用这个软件编辑游戏，可以下载体验。

5.提示快捷键界面，打开项目ctrl+o，新建文件夹shift+ctrl+n，新建皮肤ctrl+n。

Egret UI Editor教程

探险家

#简介

egret项目中使用的资源配置文件是一个json格式的文件。资源配置文件可以通过任何文本编辑器进行编辑，UI Editor提供了可视化的编辑方法。可视化编辑提供了更方便的操作、自动配置文件中的错误、批量操作等功能。

#功能介绍

Egret项目中的默认配置文件是resource/deflt.res.json您可以在EUI项目设置中添加更多的配置文件。

在浏览器中点击deflt.res.json，会弹出浏览器窗口。

界面左上角有两个面板切换页签:设计和源码。

设计:可视化修改配置文件。

源代码:通过代码直接修改json配置文件。

设计界面大致分为以下几个区域，对应上图中的图形:

1.资源树

2.资源

3:资源预览

4:小组

5.集团内的资源

1.资源树

这里，资源文件的内容以树的形式显示。在树的左上角，有一个折叠/展开树的功能按钮，还有一个搜索框(采用模糊匹配)。选择资源将在右侧区域和预览区域显示所选资源。

右键单击资源以在资源管理器中删除/查看它。如果是图片资源，可以编辑九格。

可以批量删除资源，按住ctrl/command/shift可以选择多个项目。

您可以删除文件夹。

删除资源后，它们将自动从相关组中删除。

您可以将图片和其他资源从本地文件系统拖动到资源树中，拖动的文件会自动添加到资源配置中。

如果拖动的资源文件不在当前项目资源目录中，它将被自动复制到当前项目资源目录的资产目录中。

2.资源

显示所选资源的详细信息:

名称:所选资源的名称。注意:它不是文件名，而是配置文件中的名称。不允许同名。

类型:所选资源的类型，包括以下类型

图像:图像资源

数据文件json: json格式

文本:文本文件

字体:位图字体文件

图纸:位图纹理文件

声音:声音文件

Bin:二进制文件

附加参数:9个细胞的切片

二级键:位图纹理表文件的子项。

3.预览区域

以下是各种资源的预览效果。图像类型显示为图片，纸张类型显示为整幅图片，位图字体显示为位图文字。

对于图像类型的资源，在预览区的左下角有一个9格编辑按钮，可以打开可视化编辑界面，通过拖拽的方式编辑9格切片。

4.资源组

这显示了资源文件中gup的分组。

单击“添加组”按钮添加新的资源组。

您可以在右键菜单中选择删除组。

5.组中资源的GIF

此处显示当前选定组中的资源。选择一个项目将在预览区域显示资源的详细信息，并在资源树中找到该资源。

可以从右键菜单中选择删除项目。

可以选择多个。

可以批量删除。

双击名称进行更改。

您可以将资源从资源树拖动到当前区域，并且会自动添加到当前组中。

资源冲突

如果资源文件中有重复的资源项，或者该资源对应的文件不存在，系统会自动检测并通过标记红色或黄色方框进行提醒。界面底部也会有提示文字。

button_down.png文件刚刚被我删除，这个资源对应的文件不存在，显示为。

checkbox_select_down.png在checkbox中的资源名称被我更改为checkbox_select_disabled_png，这与checkbox _ select _ disabled.png的资源名称冲突。资源的重复名称以红色显示。

表单文件pic.json中的子项有一个重复的名称，如所示。

其他的

单击左上角的保存按钮或使用快捷键ctrl+s保存修改后的配置文件。

使用EXML

在EUI中，EXML可以在运行时加载解析。它可以作为标准文本文件加载和解析，或者exml文本内容可以直接嵌入到代码中进行解析。在下一节中，我们将详细解释EXML的语法。在本节中，我们首先来看看如何在代码中使用EXML文件。以下是EXML文件内容的示例，描述了按钮的外观:

运行时，显示结果如下:

直接引用EXML文件

第一种方式也是最简单的方式，因为EXML的根节点是skin，也就是说这个文件描述了一个Skin。当EXML的根节点为Skin时，可以直接使用组件的skinName接受EXML文件的路径，这通常是最常见的使用场景。这里，我们假设前一个exml文件的路径是[项目根路径]/资源/皮肤/按钮皮肤. EXML。

建议将皮肤文件放在资源目录中。

动态加载EXML文件

上面介绍了EXML根节点是Skin的情况。如果描述的对象不是皮肤，那么我们必须采用更通用的加载和解析方法。您可以直接使用EXML.load()方法来加载和解析外部EXML文件。加载后，回调函数的参数将被传递到解析后的类定义中。您可以将新的类定义实例化，或者直接将其分配给组件的SkinName属(如果EXML的根节点是skin)。这里有一个简单的例子:

将EXML嵌入代码

EXML还提供了一种解析文本的方法。这个过程可以和ON文件的处理直接比较，因为几乎是一样的。您可以使用HttpRequest加载EXML文件的文本内容。运行时可以调用EXML.parse(exmlText)方法进行解析，解析后的类定义会立即返回。当然，您可以跳过异步加载，直接在代码中嵌入EXML文本内容:

注意上面的例子，可以使用模板文字嵌入多行字符串，从而避免使用& # 8220；n & # 8221+字符串连接的符号。您可以使用头尾符号(波浪线的关键)直接换行。此外，对于模板文字中包含的文本内容，嵌入表达式如${key}也可用于引用代码中的变量，以实现简洁的字符串拼接: