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

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

功能介紹

1、資源管理器

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

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

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

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

5、組件
通過(guò)組件面板，可以將默認(rèn)的控件和自定義組件，拖拽到UI場(chǎng)景中去

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

使用方法

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

2、用Egret UI Editor打開項(xiàng)目

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

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

這個(gè)時(shí)候你可能急著去運(yùn)行項(xiàng)目了，發(fā)現(xiàn)沒(méi)什么luan用，不報(bào)錯(cuò)也不展示
因?yàn)槟銢](méi)在main.ts引用使用這個(gè)場(chǎng)景
this.addChild(new StartScene());
方法二
創(chuàng)建引用場(chǎng)景類
eui-demo/src/StartScene.ts
具體代碼

這個(gè)時(shí)候你可能急著去運(yùn)行項(xiàng)目了，發(fā)現(xiàn)沒(méi)什么luan用，不報(bào)錯(cuò)也不展示
因?yàn)槟銢](méi)在main.ts引用使用這個(gè)場(chǎng)景
this.addChild(new StartScene());
然后運(yùn)行還是不顯示，因?yàn)闆](méi)有綁定場(chǎng)景
綁定方法為修改resource/default.thm.json 配置文件

6、運(yùn)行項(xiàng)目
命令：egret run -a
來(lái)吧，展示（可以用 Egret Inspector 工具進(jìn)行調(diào)試）

7、可能問(wèn)題
當(dāng)創(chuàng)建場(chǎng)景時(shí)沒(méi)有創(chuàng)建在resource/eui_skins/這個(gè)目錄下，而是創(chuàng)建在了resource/這個(gè)目錄下，創(chuàng)建為resource/my_skins/MySceneSkin.exml，這個(gè)時(shí)候我們?cè)贓gret UI Editor軟件中無(wú)法看到我們創(chuàng)建的場(chǎng)景
解決方法（配置 egretProperties.json 文件）

這個(gè)時(shí)候我們就能看見場(chǎng)景了

后邊的步驟就都一樣了

軟件特色

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