Egret UI Editor(2D游戲開發(fā)代碼編輯器)

Egret UI Editor是一款開源的2D游戲開發(fā)代碼編輯器，軟件能夠幫助用戶輕松完成2D游戲開發(fā)的各種工作，讓游戲開發(fā)更加簡單便捷，軟件界面簡潔功能按鍵清晰明了，滿足用戶的各種2D游戲開發(fā)功能需求，有效的提高了游戲的開發(fā)效率。Egret UI Editor主要功能是針對 Egret 項目中的 Exml 皮膚文件進行可視化編輯，編輯方式包括但不限于托拉拽等，用于開發(fā)HTML5游戲時對UI進行編輯，可視化的操作可以讓你更直觀的看到UI修改出來的效果，更方便的進行調(diào)整；Egret UI Editor為用戶提供了可視化界面編輯，可以對游戲中的Exml皮膚進行可視化編輯、代碼編輯和皮膚預覽，還支持通過可視化的拖拽操作，輕松高效地管理游戲素材，靈活定制分組加載規(guī)則，快速完成資源配置文件，有興趣的小伙伴快來下載體驗吧！

功能介紹

1、資源管理器

資源管理器面板可以用來瀏覽和管理項目中的 EXML 皮膚文件
打開、創(chuàng)建、刪除文件或文件夾，或者重命名
通過拖動來移動文件或文件夾
可以使用右鍵菜單來查看所有的操作
注：您可以通過快捷鍵 Ctrl+P 呼出打開文件的快捷面板

2、界面編輯器
這部分是Egret UI Editor免費版的核心區(qū)域，在此區(qū)域可以編輯界面，制作動畫，修改Exml源碼，以及預覽界面最終效果

3、圖層
圖層面板可以通過拖拽來改變界面中元素圖層的上下層級關(guān)系

4、資源庫
通過資源庫面板 ，可以將資源素材拖拽到UI場景中去，通過下方的搜索資源框，輸入文件名，可以快速查找資源

5、組件
通過組件面板，可以將默認的控件和自定義組件，拖拽到UI場景中去

6、屬性控制
最右側(cè)是屬性控制面板，可以調(diào)節(jié)對應元素的各個屬性

使用方法

1、創(chuàng)建EUI項目

2、用Egret UI Editor打開項目

3、創(chuàng)建場景
將場景創(chuàng)建在resource/eui_skins/目錄下
創(chuàng)建場景resource/eui_skins/myskins/StartSceneSkin.exml
配置場景顯示內(nèi)容（場景、控件、約束、尺寸位置）

4、命令運行項目egret run -a
發(fā)現(xiàn)項目無法顯示場景,需要在代碼中引用場景
5、引用場景（皮膚）
方法一
創(chuàng)建引用場景類
eui-demo/src/StartScene.ts
具體代碼

這個時候你可能急著去運行項目了，發(fā)現(xiàn)沒什么luan用，不報錯也不展示
因為你沒在main.ts引用使用這個場景
this.addChild(new StartScene());
方法二
創(chuàng)建引用場景類
eui-demo/src/StartScene.ts
具體代碼

這個時候你可能急著去運行項目了，發(fā)現(xiàn)沒什么luan用，不報錯也不展示
因為你沒在main.ts引用使用這個場景
this.addChild(new StartScene());
然后運行還是不顯示，因為沒有綁定場景
綁定方法為修改resource/default.thm.json 配置文件

6、運行項目
命令：egret run -a
來吧，展示（可以用 Egret Inspector 工具進行調(diào)試）

7、可能問題
當創(chuàng)建場景時沒有創(chuàng)建在resource/eui_skins/這個目錄下，而是創(chuàng)建在了resource/這個目錄下，創(chuàng)建為resource/my_skins/MySceneSkin.exml，這個時候我們在Egret UI Editor軟件中無法看到我們創(chuàng)建的場景
解決方法（配置 egretProperties.json 文件）

這個時候我們就能看見場景了

后邊的步驟就都一樣了

軟件特色

1、可視化界面編輯
Egret UI Editor免費版可以對游戲中的 Exml 皮膚進行可視化編輯、代碼編輯和皮膚預覽，集成三個功能于一體的混合編輯器
2、集成資源管理器
通過可視化的拖拽操作，輕松高效地管理游戲素材，靈活定制分組加載規(guī)則，快速完成資源配置文件
4、可視化動畫編輯
通過設置關(guān)鍵幀，即可自動創(chuàng)建補間動畫，實現(xiàn)各種酷炫的界面動畫效果