Egret Wing 白鹭可视化编辑工具 V4.15

Egret白鹭引擎官方版是一款功能强大的免费开源的HTML5游戏引擎。Egret白鹭引擎官方版使用方便，操作简单。使用Egret Engine可以快速开发基于HTML5的网页游戏，您不仅可以体验到开源免费游戏引擎产品，同时还能通过Egret相关产品搭建快速优雅的工作流。

Egret Wing功能介绍

1、智能编码辅助

为主流语言提供了智能代码补全,

即时错误信息反馈、查找引用、跳转到定义等功能,

帮助您更加快速的编码。

2、支持主流的语言和框架

默认集成了JavaScript,TypeScript,HTML,CSS,Node.js支持,

通过扩展能够方便支持更多的语言和框架,

如C#,Go,C++,AngularJS,React等等。

3、内置完整游戏开发工作流

集成可视化游戏开发环境,

覆盖了开发、调试、发布、打包整个开发流程,

更有资源管理,粒子编辑,云端发布等扩展,

让游戏开发体验更加顺畅。

Egret Wing软件特色

1、Debug功能：

一键调试：开发者只需要一个快捷键或者按钮即可启动调试功能，基本不需要任何的额外操作和配置，方便快捷的调试的 Egret 游戏和应用。在 WebStorm 当中，开发者需要进行一系列的相关配置才可以进行调试。

2、支持各种调试的功能：

①支持TypeScript 断点调试:开发者能够直接在 Egret Wing 4 中对 TypeScript代码上设置断点调试 TypeScript 代码，不需要任何配置。

②支持调试堆栈：当调试程序暂停或者进入断点时，调试面板能够显示当前的调用堆栈，通过点击堆栈信息可以跳转到堆栈对应的 TypeScript 代码上，查看代码调用堆栈信息。

③支持悬浮变量值提示：当启动调试功能时，鼠标悬停在变量或者表达式上能够迅速显示变量或者表达式的值。

④变量面板：通过树状结构展示当前断点处所有的实例和变量的值和属性。

⑤断点面板：断点面板能够统一管理和设置所有的断点信息。提供除去以及跳过断点的功能。

Egret Wing使用说明

基本概念

窗口布局

如上图，EgretWing窗口主要有下面几个部分组成：

菜单栏(Menu Bar) 可以通过菜单栏执行一些常用命令

左侧栏(Side Bar) 位于编辑器左侧，由多个子视图组成(文件，搜索，Git，调试)

编辑器(Editor) 编辑文件的主要区域

面板(Panel) 位于编辑器下方，也由多个子视图组成(输出，调试，错误，终端)

右侧栏(Utility Bar) 位于编辑器右侧，由多个子视图组成，子视图目前可以通过插件API扩展

状态栏(Status Bar) 最下方，显示当前打开项目和文件的一些信息

菜单栏可以通过切换菜单栏命令来设置是否显示

左侧栏，右侧栏，面板可以通过视图菜单中的相关命令来切换是否显示

还可以通过鼠标操作来打开和关闭，

工作空间

EgretWing可以通过打开一个文件或者文件夹进行代码编写。EgretWing也可以同时打开多个窗口，每个窗口对应一个文件或者文件。当一个窗口打开的是一个文件夹时，这个文件夹被称为当前工作空间。

可以使用菜单栏中的 文件—新建窗口 命令(Ctrl+Shift+N)打开一个新窗口。

新建项目(Alt+Shift+P)在项目创建成功后也会自动打开新窗口。

一般来说，每个工作空间就对应一个项目。在工作空间目录下有一个特殊的文件夹 .wing。这个文件夹存放当前工作空间的一些设置和配置文件。常见的几个配置文件如 task.json , launch.json , settings.json，这几个文件的作用下面会具体说明。

EgretWing和WebStorm都是基于文件夹来表示工作空间，这个工作空间就是文件系统中的一个目录。而Eclipse的工作空间则是由多个项目构成，每个项目对应一个目录，而工作空间是这些目录的集合。几乎所有的IDE都会有一个特殊的文件夹存放工作空间的配置。如 WebStorm的 .idea 文件夹， Eclipse的 .metadata 文件夹。EgretWing中的 .wing 文件夹也是类似，只不过里面的文件一般都是json文件，有时候我们也会手动修改这些配置设置工作空间的行为。

自定义

用户设置和工作空间设置

EgretWing提供了包括 编辑器设置，文件设置，窗口设置 等近200个设置项来满足各种用户习惯。常用的设置如：

可以通过菜单栏，文件—首选项菜单打开用户设置或者工作空间设置

设置分为用户设置和工作空间设置。用户设置是全局的，在任何地方都可以生效，用户设置会覆盖默认设置。用户设置保存在用户缓存目录的 settings.json 中。

工作空间设置是针对某个文件夹的，只对当前工作空间有效，工作空间设置会覆盖用户设置。工作空间设置保存在当前工作空间下的 .wing/settings.json 中。

所以最终的优先级是 工作空间设置 > 用户设置 > 默认设置。

通过修改 settings.json 文件改变当前的设置。例如我习惯的用户配置就是这样写的

每个字段表示的功能可以通过默认配置中的字段说明找到具体的含义。

快捷键设置

EgretWing提供了近300个快捷键设置项自定义命令的快捷键。可以通过菜单栏，文件---首选项 菜单打开 快捷键 选项。快捷键设置界面将打开两个编辑器，默认快捷键设置在左侧，编辑右侧编辑器中的 keybindings.json 文件自定义快捷键。一般在左侧找到要修改的快捷键命令，然后复制左侧的项到右侧，修改key字段就行。例如：

在EgretWing3中有很多命令的快捷键与EgretWing2.5的默认快捷键不一样，可以使用 插件菜单中的 IDE迁移向导 — 导入其他IDE设置，选择EgretWing2.5自动修改 keybindings.json 文件导入EgretWing2.5的快捷键。

任务配置

设置当前工作空间下 .wing/tasks.json 可以自定义任务。常见的任务如 构建，清理，发布。这些任务通过一般是执行命令行程序来实现的。

如果当前工作空间下的 .wing 文件夹没有 tasks.json 。可以通过命令面板中的 Tasks: Configure Task Runner 命令选择一个任务模板。

对于一般的Egret项目，在创建项目的时候已经自动生成了与Egret命令行匹配的任务： 构建(Ctrl+Shift+B)，清理，发布。tasks.json 如下：

启动配置

当需要运行或者调试当前项目时，需要设置启动配置。与任务配置类似，启动配置保存在当前工作空间下的 .wing/launch.json中。

默认可以使用快捷键F5，启动或者调试当前项目。也可以切换左侧栏到调试选项卡在下拉框中选择一个启动配置，然后点击运行。

如果当前工作空间下不存在 launch.json 使用F5会出现选择启动配置模板的选择框。

对于一般的Egret项目，在创建项目的时候已经自动生成了与Egret项目匹配的启动配置： 包含使用内置播放器调试，使用Chrome调试，附加到Chrome进程等配置，轻松调试和启动Egret项目 。tasks.json 如下：

常用面板

命令面板

命令面板能方便的查找和执行命令，使用快捷键 F1 或者 Ctrl+Shift+P 呼出面板。

面板每一项都是一个命令，如果该命令有快捷键在右侧会显示对应的快捷键。

文件操作

左侧栏的文件选项卡中，包含了当前工作空间的文件列表树。使用右键菜单能显示可以执行的命令。

全局搜索

右侧栏的搜索选项卡中能对当前工作空间中的所有文件和内容进行搜索，并且支持正则表达式以及模式匹配和过滤等高级设置选项。

GIT

EgretWing内置Git管理工具， 在右侧栏的GIT选项卡中能直接提交，拉取，推送代码到Git仓库。

在状态栏左侧也能显示远程仓库与本地仓库的同步状态。

单击更改的文件列表，在编辑器能打开比较编辑器查看改变的具体细节。

调试和调试控制台

如果配置了 launch.json 可以通过快捷键F5 或者 调试面板启动调试。在调试模式下，调试选项卡中的变量，监视，调用堆栈，断点折叠菜单都是可用的。

面板中的调试面板中显示程序运行中的输出和报错信息，在下方的输入框中也能输入表达式并动态执行得到计算结果。这个面板与Chrome开发者工具中的Console面板功能类似。

输出

输出面板显示一些提示消息，显示当前运行状态。输出面板有多个频道(Channel)区分不同输出的来源。

例如Tasks频道会输出项目编译过程中相关的信息，GIT频道输出Git执行过程中的信息，Project频道输出项目创建相关的信息等。

终端

EgretWing内置了一个终端命令行执行窗口，能方便的直接在EgretWing内部使用命令行。

点击右侧的 + 图标能新建一个命令行窗口，右侧的列表显示当前所有打开的命令行窗口。

代码编辑

多编辑器

EgretWing允许最多同时打开三个编辑器，并排在编辑器显示。

如果已经打开了一个编辑器，有多种方式在编辑器的右侧打开一个新的编辑器：

在文件选项卡的中按住Ctrl键(Mac下为Cmd键)，并点击要打开的文件

在当前激活的编辑器中使用快捷键 Ctrl+ 将把当前编辑器一分为二

在文件夹选项卡的右键菜单上选择 在新编辑器中打开

智能提示

EgretWing支持多种语言的自动补全功能，如: JavaScript, JSON, HTML, CSS, Less, Sass, C# and TypeScript。

参数提示

在 JavaScript，TypeScript中，输入方法的参数时能看到当前输入参数的类型和注释说明。如果是重载方法，可以通过 上箭头 和 下箭头 快捷键选择需要参数。

悬浮提示

当鼠标移动到文字上时，如果该字符是一个变量或者下面例子中的css选择器，将出现一个悬浮提示框。

跳转到定义

如果语言支持,可以按下快捷键F12跳转到光标所在位置的变量或者方法的定义。

也可以按下 Ctrl 键鼠标移动到变量或者方法上，将显示方法定义细节。

你还可以使用 Ctrl+Click 调整到定义，或者使用 Ctrl+Alt+Click 在新编辑器中打开定义。如果打开了一个新编辑器窗口，你能够使用 Ctrl+Alt+Left 返回到之前的编辑器。

快速大纲

使用快捷键 Ctrl+Shift+O 能够打开快速大纲面板(在之前的EgretWing2.5版本中这个快捷键是Ctrl+O)显示当前文件中定义的所有类，方法和变量。

查找引用

可以通过执行查找所有引用(快捷键Shift+F12)命令找到当前变量或者方法被引用的所有位置。

重命名变量

一些语言(如TypeScript)支持全局重命名变量。使用快捷键F2输入变量的新名称并按下Enter，项目中所有使用该变量的位置将被重命名。

错误和警告

当文件出现语法错误或者警告时，将提示错误，使用快捷键 Ctrl+Shift+M 查看所有的错误

也可以在错误面板中查看出现的错误

多选

EgretWing支持多个光标，可以快速编辑相似的文本。 可以使用 Alt+Click 快捷键添加多个光标，每一个光标都是独立的。 也可以使用 Ctrl+Alt+Down 或者 Ctrl+Alt+Up 在下面或者上面插入光标。

按住 Shift+Alt 移动光标可以选择多行文本。

代码折叠

你可以使用在行号右边的折叠图标来折叠代码。

也可以使用快捷键折叠和展开代码：

折叠 (Ctrl+Shift+[)

展开 (Ctrl+Shift+])

折叠所有 (Ctrl+K Ctrl+O)

展开 (Ctrl+K Ctrl+J)

常用快捷键

在EgretWing3中编辑器中有很多实用功能的快捷键：

切换到上一个编辑器 (Ctrl+Tab)

切换到上一个编辑位置 (Alt+Left)

格式化代码 (Shift+Alt+F)，EgretWing2.5下为Ctrl+I

删除当前行 (Ctrl+Shift+k)，EgretWing2.5下为Ctrl+D

Egret 2D 项目向导

项目创建

点击导航栏“文件”->“新建项目”，弹出“新建项目”面板,选择TypeScript项目类型：“Standard”、“Plugin”、“Egret”。可选使用EgretEngine版本，设置项目名称、项目路径。

1区域：选择项目类型：standard、Plugin、Egret。

2区域：选择Egret项目时可以选择Egret Engine 的版本号（本机安装的Engret Engine,Egret Engine安装详见—）。

3区域：当前需要创建项目的模板，例如：创建Egret EUI项目 ，wing会把编辑EUI的库、模板给加载进来，便于用户操作等。

4区域：项目名字,如图显示wing；项目路径，/Users/un_egret/Documents，点击浏览按钮选择项目存放位置。

点击‘下一步’按钮 。

1区域：设置舞台的宽度、高度、舞台背景色。

2区域：设置屏幕的放缩模式。

3区域：设置旋转模式。

点击完成按钮。

1区域：代码树

2区域：项目输出日志信息

项目菜单

构建

点击“窗口”->”切换输出面板“。

点击“项目”->”编译“，在输入面板显示输出日志。

在bin-debug生成*.js.map ,例：Main.js Main.js.map；

清理

清理项目，清理bin-debug中所有文件，然后生成js

调试F5

点击项目->调试

1区域：变量

2区域：观察表达式

3区域：调用栈

4区域：调试操作，继续、单步跳过、单步跳入、单步跳出、重启、结束

name 配置名称; 显示在启动配置的下拉列表。Wing 内置播放器调试 、使用本机 Chrome 调试、附加到 Chrome 进程。

type EgretWing配置类型，chrome、node、extensionHost。

request 配置的Request类型。 有效值为 "launch" 或者 "attach"。

file debug 入口文件,在浏览器打开的html文件。

runtimeExecutable 可执行文件的绝对路径。默认值是 PATH 上的运行时可执行文件。改成您的 Chrome 安装路径 例如 C:Program Files (x86)GoogleChromeApplicationchrome.exe 或 /Applications/Google Chrome.app/Contents/MacOS/Google Chrome。

useBuildInServer 当为true, EgretWing 将启动一个内建的web server。

sourceMaps 是否使用 JavaScript 源映射(如果存在)。

webRoot Web服务的根目录。

preLaunchTask 执行任务之前运行的任务。

port web服务器指定的端口号。

Egret Support 插件菜单

初始化 egret 项目

配置 Egret 项目需要的编译和调试参数

启动Egret项目

启动项目 等于在命令窗口输入egret startserver

编译引擎

编译当前项目引用的引擎，适用于自己修改了引擎代码

发布Egret项目

目录结构介绍

点击添加

- 如下图9： 

1区域：eui的编辑模式 ，源码，设计，预览 三种模式。

2区域：设置的预览、源码编辑、设计区域。

3区域：

EXML的编辑面板简介

- 资源库：在default.res.json中配置的资源。

状态：自定义状态，例如：TestButtonSkin.exml 中有三个状态up、down、disabled，可以单独设置TestButtonSkin单独某个状态的皮肤。

组件：系统控件(Button、CheckBox、CheckBox等组件)、布局组件(Group、Panel、Scroller、ViewStack)、自定义组件。

图层：TestButtonSkin包含图层。

属性：包含常用、样式、大小和位置、布局。