egret wing是一個(gè)功能強(qiáng)大的Egret項(xiàng)目集成開發(fā)工具，使用Egret Wing可以快速構(gòu)建Egret項(xiàng)目的GUI，提升Egret項(xiàng)目的開發(fā)效率。它不僅可以通過可視化的方式創(chuàng)建、編輯和管理項(xiàng)目中的游戲用戶界面，同時(shí)可以進(jìn)行TypeScript代碼的編寫和斷點(diǎn)調(diào)試等。需要的朋友們可以下載試試吧！

egret wing功能介紹

Egret Wing是基于Adobe Air開發(fā)構(gòu)建的，它提供了構(gòu)建GUI的可視化操作和所必須的相關(guān)工具。 Egret Wing可以在Microsoft Windows和Apple Mac OS上運(yùn)行。

可使用Egret Wing構(gòu)建Egret項(xiàng)目

您可以構(gòu)建使用GUI擴(kuò)展框架的Egret項(xiàng)目。同時(shí)您也可以創(chuàng)建自定義的EXML皮膚，然后通過Egret Wing的組件面板輕松訪問這些組件。同時(shí)也可以快速設(shè)置自定義皮膚與組件之間的皮膚組件對(duì)應(yīng)關(guān)系。

用于加快Egret項(xiàng)目開發(fā)速度的功能

Egret Wing提供了在開發(fā)使用GUI擴(kuò)展框架時(shí)所需要的功能。您可以執(zhí)行以下操作：

運(yùn)行項(xiàng)目 — 使用Egret Wing運(yùn)行項(xiàng)目，會(huì)自動(dòng)為該項(xiàng)目在未占用端口上創(chuàng)建一個(gè)服務(wù)器，同時(shí)啟動(dòng)默認(rèn)瀏覽器或用戶設(shè)置的瀏覽器訪問該項(xiàng)目地址以運(yùn)行項(xiàng)目。

管理項(xiàng)目、文件夾、文件和資源 — 創(chuàng)建、修改和刪除項(xiàng)目和資源，以及項(xiàng)目使用的插件與主題等。

自定義Egret Wing工作區(qū) — 根據(jù)個(gè)人的開發(fā)需求自定義工作區(qū)。例如，可以自定安排界面，將指定的工具放置到特定的布局中。同時(shí)Egret Wing也為您內(nèi)置了部分工作區(qū)。

Egret Wing入門

工作區(qū) 指界面面板的布局。開發(fā)者可以按照自己的喜好修改默認(rèn)工作區(qū)的布局，同時(shí)也可以創(chuàng)建新的工作區(qū)。

文檔區(qū) 對(duì)Exml/ts等文件進(jìn)行編輯的區(qū)域。

視圖模式 文檔區(qū)中針對(duì)Exml的顯示方式。其中有“源代碼”、“設(shè)計(jì)”和“預(yù)覽”。

視圖模式—源代碼 指文檔區(qū)中對(duì)某一個(gè)Exml皮膚進(jìn)行文本查看的視圖模式。

視圖模式—設(shè)計(jì) 指文檔區(qū)中對(duì)某一個(gè)Exml皮膚進(jìn)行可視化操作和編輯的視圖模式。

視圖模式—預(yù)覽 指文檔區(qū)中對(duì)某一個(gè)Exml皮膚進(jìn)行預(yù)覽的視圖模式，在此模式下所有皮膚組件均有交互效果。

資源 指項(xiàng)目項(xiàng)目中的文件和文件夾。

項(xiàng)目 構(gòu)成Egret應(yīng)用程序的所有資源都包含在項(xiàng)目中。要在Egret Wing中構(gòu)建和編輯GUI，必須先構(gòu)建一個(gè)項(xiàng)目。

Egret Wing的面板

“包資源管理器”面板

“包資源管理器”面板包含當(dāng)前Egret Wing已經(jīng)載入的所有項(xiàng)目和資源。 在包資源管理器中工作時(shí)，可以設(shè)置某一項(xiàng)目的屬性配置，以及對(duì)任意資源進(jìn)行復(fù)制、刪除、重命名等操作。

“組件”面板

組件面板包含當(dāng)前項(xiàng)目中所有可以使用的組件列表，其種類為“控件”，“布局”，“自定義”。您可以通過拖拽的方式把在文檔區(qū)的設(shè)計(jì)視圖中創(chuàng)建組件。

“圖層”面板

該面板展示出當(dāng)前文檔區(qū)正在編輯的Exml皮膚文件中所有組件的層級(jí)結(jié)構(gòu)。您可以通過該面板快速選中在文檔區(qū)中與之對(duì)應(yīng)的組件。 您也可以通過該面板更直觀的調(diào)節(jié)文檔區(qū)中組件之間的層級(jí)結(jié)構(gòu)。

“控制臺(tái)”面板

控制臺(tái)面板會(huì)在解析/編譯/調(diào)試項(xiàng)目的時(shí)候顯示對(duì)應(yīng)的錯(cuò)誤信息。

“進(jìn)度”面板

進(jìn)度面板展示的是當(dāng)前正在執(zhí)行編譯,運(yùn)行等任務(wù)進(jìn)度的面板。同時(shí)可以控制關(guān)閉該項(xiàng)目運(yùn)行的服務(wù)器。

“資源庫”面板

資源庫面板中展示當(dāng)前項(xiàng)目中所有可以被加載的資源，資源庫中的資源依賴于項(xiàng)目使用的資源插件。 您也可以通過拖拽的方式將資源庫面板中的資源拖拽到文檔區(qū)的設(shè)計(jì)視圖模式中以創(chuàng)建該UIAsset。

“狀態(tài)”面板

通過“狀態(tài)”面板可以方便查看Exml皮膚在不同狀態(tài)下的呈現(xiàn)效果。同時(shí)可以切換到不同狀態(tài)對(duì)Exml皮膚進(jìn)行編輯。如：按鈕的normal, over, down, disabled四個(gè)狀態(tài)。

需要注意一點(diǎn)的是，“[所有狀態(tài)]”并非是Egret程序中可以看到的，是方便用戶使用Wing預(yù)覽狀態(tài)而設(shè)定，所以他并不會(huì)被編譯進(jìn)程序里。在Egret程序中可以看到的是除了“[所有狀態(tài)]”以外的狀態(tài)。所以您在編輯的時(shí)候注意當(dāng)前選中的狀態(tài)。

“屬性”面板

您可以通過“屬性”面板直接操作當(dāng)前被選中組件的屬性。

同時(shí)屬性面板還有另一個(gè)模式“所有屬性”。方便您編輯組件的所有屬性。

egret wing更新日志

【新增】一鍵發(fā)布h5項(xiàng)目到金山云端

【新增】快捷鍵ctrl/command ＋滾輪縮放UI設(shè)計(jì)視圖

【修復(fù)】修復(fù)代碼提示，鼠標(biāo)點(diǎn)擊選擇無效問題

【修復(fù)】修復(fù)某些情況文本內(nèi)容顯示不全

【修復(fù)】修復(fù)九宮格面板布局錯(cuò)誤

【修復(fù)】修復(fù)scroller內(nèi)部的group可以拖拽的bug

【優(yōu)化】優(yōu)化代碼提示排序問題