egret ui editor是白鷺科技開發(fā)的一款開源的2D可視化界面編輯器，是 Egret Wing 的升級(jí)版本，通過該軟件的編輯界面和 VSCode 開發(fā)程序的工作流方式完成游戲項(xiàng)目開發(fā)。該軟件的獨(dú)特之處就是有兩個(gè)編輯器，一個(gè) Exml 可視化編輯器，是針對(duì) EUI 項(xiàng)目中的 Exml皮膚進(jìn)行代碼編輯、可視化編輯、皮膚預(yù)覽三個(gè)功能于一體的混合編輯器。另一個(gè)是EXML動(dòng)畫編輯器，通過設(shè)置關(guān)鍵幀，可以實(shí)現(xiàn)動(dòng)畫效果。除此之外軟件還集成資源管理器，通過可視化的拖拽操作，輕松高效地管理游戲素材，靈活定制分組加載規(guī)則，快速完成資源配置文件。大大提高了用戶的工作效率，全面的優(yōu)化了用戶體驗(yàn)。

ps：今天小編介紹的是egret ui editor官方版，一款開源的游戲代碼編輯器，下方有詳細(xì)的下載、安裝教程，有需要的朋友歡迎來(lái)本站下載體驗(yàn)哦。

軟件安裝教程

1、從本站下載Egret Launcher；

2、打開 Egret Launcher 的工具面板，如下圖所示，點(diǎn)擊安裝 Egret UI Editor

3、啟動(dòng) Egret UI Editor

點(diǎn)擊安裝好的應(yīng)用程序即可啟動(dòng)工具。除此之外，您也可以通過命令行的方式打開。

軟件功能

Egret 項(xiàng)目中默認(rèn)的配置文件為resource/default.res.json，您可以在EUI 項(xiàng)目設(shè)置中添加更多的配置文件 。

在資源管理器中點(diǎn)擊default.res.json，會(huì)彈出資源管理器的窗口。

界面的左上角有設(shè)計(jì)和源碼 2個(gè)面板切換標(biāo)簽。

設(shè)計(jì)：通過可視化的方式修改配置文件

源碼：直接通過代碼的方式修改json配置文件

設(shè)計(jì)界面大致分為以下幾個(gè)區(qū)，與上圖數(shù)字對(duì)應(yīng)：

1、資源樹

這里以樹的形式展示了資源文件的內(nèi)容。樹的左上角有折疊/展開樹的功能按鈕，和搜索框（采用了模糊匹配）。 選中一項(xiàng)資源會(huì)在右側(cè)的信息區(qū)和預(yù)覽區(qū)顯示所選資源。

右鍵點(diǎn)擊資源，可以刪除/在資源管理器中查看。如果是圖片資源，可以編輯九宮格。 

可以批量刪除資源，同時(shí)按住 ctrl/command/shift 鍵即可選擇多項(xiàng)。

可以刪除文件夾。

刪除資源的同時(shí)會(huì)從相關(guān)的組里自動(dòng)刪除。

可以從本地文件系統(tǒng)中拖入圖片等資源到資源樹中，拖入的文件自動(dòng)添加到資源配置中。

如果拖入的資源文件不在當(dāng)前項(xiàng)目資源目錄下，則會(huì)自動(dòng)拷貝到當(dāng)前項(xiàng)目資源目錄的 assets 目錄下。

2、資源信息

顯示了所選資源的詳細(xì)內(nèi)容：

名稱：所選資源的名稱，注意：不是文件名，而是在配置文件中的名稱，不允許有同名出現(xiàn)。

類型：所選資源的類型，有以下幾種類型

image:圖片資源

json: json 格式的數(shù)據(jù)文件

text：文本文件

font：位圖字體文件

sheet：位圖紋理文件

sound：聲音文件

bin:二進(jìn)制文件

附加參數(shù)：9宮格的切片信息

二級(jí)key：位圖紋理 sheet 文件的 subkeys

3、預(yù)覽區(qū)

這里是各種資源的預(yù)覽效果，image 類型展示為圖片，sheet 類型展示為整張圖，位圖字體展示為位圖字。

對(duì)于image類型的資源，預(yù)覽區(qū)左下角有一個(gè)9宮格編輯按鈕，可以打開可視化編輯界面，通過拖拽的方式編輯9宮格

4、資源組

這里顯示的是資源文件中g(shù)roups分組情況。

點(diǎn)添加組按鈕可以添加新的資源組。

右鍵菜單里可以選擇刪除組。

5、組內(nèi)資源

這里顯示了當(dāng)前所選組里的資源。選擇一項(xiàng)將會(huì)在信息區(qū)預(yù)覽區(qū)顯示該資源詳細(xì)內(nèi)容，并在資源樹里定位到該資源。

右鍵菜單里可以選擇刪除項(xiàng)。

可以多選。

可以批量刪除。

雙擊名字可以改名。

可以從資源樹拖拽資源到當(dāng)前區(qū)，將自動(dòng)添加到當(dāng)前組。

資源沖突

如果資源文件中有重名的資源項(xiàng)，或者資源對(duì)應(yīng)的文件不存在等錯(cuò)誤，則會(huì)自動(dòng)檢測(cè)出來(lái)，并通過標(biāo)記紅框或黃框的形式提醒。在界面底部也會(huì)有提示性文字。

button_down.png文件剛被我刪掉，該項(xiàng)資源對(duì)應(yīng)的文件不存在，顯示為黃色。

checkbox里checkbox_select_down.png的資源名被我改為了checkbox_select_disabled_png，與checkbox_select_disabled.png的資源名產(chǎn)生了沖突，資源重名顯示為紅色。

表單文件pic.json里的subkey則有一項(xiàng)重名，顯示為黃色。

軟件特色

1、可視化界面編輯

可以對(duì)游戲中的 Exml 皮膚進(jìn)行

可視化編輯、代碼編輯和皮膚預(yù)覽，

集成三個(gè)功能于一體的混合編輯器。

2、集成資源管理器

通過可視化的拖拽操作，輕松高效地管理游戲素材，靈活定制分組加載規(guī)則，快速完成資源配置文件。

3、可視化動(dòng)畫編輯

通過設(shè)置關(guān)鍵幀，即可自動(dòng)創(chuàng)建補(bǔ)間動(dòng)畫，

實(shí)現(xiàn)各種酷炫的界面動(dòng)畫效果。

更新日志egret ui editor v1.12.1 更新日志

[新增] 添加新建窗口功能，支持同時(shí)打開多個(gè)項(xiàng)目

[優(yōu)化] 資源庫(kù)中圖片顯示分辨率

[優(yōu)化] 拖拽改變組件大小后不會(huì)再添加多余的屬性

[優(yōu)化] 新建皮膚，名稱不再額外添加 Skin 后綴

[優(yōu)化] MacOS 支持拖動(dòng)項(xiàng)目文件夾到 Dock 圖標(biāo)打開項(xiàng)目

[修復(fù)] 文件保存后 * 號(hào)提示未消失的問題

[修復(fù)] 修改組件 enabled 屬性無(wú)效的問題

[修復(fù)] 組件顏色屬性顯示錯(cuò)誤的問題

[修復(fù)] 縮放下拖動(dòng)控件不跟隨鼠標(biāo)的問題

[修復(fù)] 自定義 List 無(wú)法設(shè)置布局的問題

[修復(fù)] 刪除 List 數(shù)據(jù)后 exml 未刪除 ArrayCollection 的問題

[修復(fù)] 預(yù)覽模式下點(diǎn)擊 TextInput 會(huì)導(dǎo)致UI異常的問題