flash頁游前端開發UI優化問題?

12-28

本人從事flash頁游前端開發三年，總共經過兩個項目，在UI開發中遇到兩個問題：
1，如何多人同時開發UI，一個MMORPG遊戲，通常需要四個（左右）前端。
2，如何優化UI載入，通常第一次進入遊戲，那UI都卡成狗了（參見神曲）。
而我根據我的經驗，想到如下辦法，解決如上兩個問題。
1，首先，我不喜歡用MORNUI這類拼UI軟體，原因兩個：1）這種軟體雖然類似於CS，但是操作功能完全不能和CS比，非常難用；2）導出的類時不時的出問題，找原因找半天，並且操作複雜，我改一個資源通常需要做三個操作才能最終生效，忙的時候忘了就又找原因找半天。
而我提出的解決辦法是：我看了關於swf格式的各種資料，認為每個人可以在CS里把每個需要寫代碼的窗口拼成一個成品，通過解析swf轉化為可以直接寫功能的as文件，比如說：我拼了一個背包模塊，然後連接類名，命名為bag_window，用自己的工具解析名字後，自動生成一個包含bag_window的sprite的BagWindow的繼承Window的類。如果有按鈕事件，在工具中可以選擇，要click還是down事件，這麼做的目的就是要把mc完全轉化為代碼控制。
2，管理資源，我的想法是單獨一個fla管理所有不包括特效的資源，並且把每個資源都用統一的格式命名，用工具以這個文件生成的swf為基礎，統計每個模塊需要的資源量，然後在項目里生成一個統計的結果來做對象池，第一次打開界面時去繪製這個UI所需的資源，這裡暫時沒有考慮特效，如果考慮的話就是用字典的弱引用去管理了。

我的疑問在於：
1.我的想法有不可行的地方嗎？
2.誰能提出針對某個具體的點提出更好的解決方案，我這樣思考下來覺得是沒有太大問題，可是總感覺應該還有什麼東西沒有考慮進去吧，懇請各位高手指點一下！

PS：
我是女程序員哦！~

PSD2SWF (kramerzhang/PSD2SWF · GitHub)
爬過多年的坑之後，我將這個流程自詡為頁游UI的終極解決之道。

2，如何優化UI載入，通常第一次進入遊戲，那UI都卡成狗了（參見神曲）。

載入UI資源引起卡頓的問題，全世界我所見範圍之內只有我這個方案解決了這個問題。

我不喜歡用MORNUI這類拼UI軟體

這裡可以引申為自定義的UI編輯器，開發和維護自定義的編輯器有成本，並且往往體驗做不好，結果是開發團隊不喜歡使用。在PSD2SWF流程中其實使用Photoshop作為UI編輯器，沒有開發，維護成本，體驗美術非常熟悉，開發也只需使用幾個操作。

其他一些關鍵點：
1.資源管理：公共資源是通過統計使用次數來決定，開發過程中是透明的，開發人員不需要關注哪個資源是否公用。
2.多語言版本：現在的一般做法是一套資源兼容所有的語言，做過的人知道這其中坑有多深。一種語言一套資源現有的流程又無法管理。PSD2SWF流程中可以很方便的為每一種語言指定一套PSD，使多語言版本開發不再是坑。

更多細節：PSD2SWF/Doc at master · kramerzhang/PSD2SWF · GitHub

@曾嶸說的使用Flash IDE做UI編輯器，在PSD2SWF之前，我也是一直這麼用的，我遇到的問題是美術同事使用PS設計UI界面，美術或開發同事需要再在Flash IDE中重現一次（包含很多切圖，對坐標，調顏色等活），這個工作在實際開發中美術和開發同事都不是那麼願意做。PSD2SWF流程中，都在美術同事使用PS設計UI界面的時候一次性搞定了。還有頁游開發過程中典型的UI風格全換的情景，在PSD2SWF流程中可以由美術同事單獨、快速的搞定，完全不需要開發參與。

這個流程的缺點是涉及幾個軟體，安裝、配置看上去略嚇人，整個流程中各種較強的規則比較多，門檻有一點。

######8.30增加實例(沒加密喲)######

http://web.4399.com/fkdzd

在 Flash 頁游 UI 上，我認為 Flash IDE 是最好的 UI 編輯器。

這是在我不做頁游之後才想通的。

曾經折騰了一個 Sprite Sheet Editor 編輯器，然後再寫了一堆工具和解析庫去處理以及加、解密。然後再寫一套 AS3 UI 庫去使用資源，再寫一個UI 編輯器交給美術用，還要不斷維護它們以適配策劃和美術的需求或者結合預載入升級程序神馬的。

後來想，我這 TMD 不是折騰么……

既然是 Flash 頁游，SWF 格式多好用啊。你看：

支持矢量格式；
對內置點陣圖的優化；
不用為了那點流量限制鼓搗用 JPEG+遮罩代替 PNG啦！（將圖像的透明區域轉換為Alpha通道原理）；
支持完整地嵌入代碼（甚至類和域 [轉]Flash/Flex Builder Flash Professional 載入資源文件方法考）；
MovieClip 直接當按鈕用；
MovieClip 直接當組件用；
MovieClip 直接當類用；
MovieClip 直接當對象用；
MovieClip 直接當肥皂用（……好像有什麼奇怪的東西混進來了）；
分成多個還是單個文件完全隨心；
良好的庫管理；
最好的 UI IDE 操作體驗（唯一，真的沒有之一）；
要擴展啥 IDE 功能批量操作啥的，直接 JSFL 妥妥的；
容易加密（現成的混淆工具一堆）；
容易解密（美術丟了 FLA 文件不怕啊）；
上面一對好傻 X……

總之，對於一個如此熟悉 Flash IDE 的程序員來說，我當年不用 Flash IDE 做頁游 UI 真是太 2B 了。

希望你能考慮下。

美女有男朋友嗎？
1 ， UI部分的製作，可以自己來開發對應的工具，工具開發出來後可以讓美術開製作UI，工具可以直接導出成.as的文件，這樣你只需要關心你拿到的.as文件就可以了。
關於我說的工具， UI工具包括幾部分 1&> 工具規則的制定，層次劃分、外部動畫引入
2&> 資源劃分和管理，一般可以使用九宮格拉伸的資源，也就是體積小，並且可以共用的資源放到一起，這個資源包一般都比較小。另外的資源包括ui專用的圖片，例如寵物或坐騎之類的背景等，這塊的資源單獨處理。
3&> 命名規則，美術（程序）在製作UI時裡面必然會有組件那麼，給他們指定一套規則，編碼時更加規範。
按照這種方式來進行處理，我認為不會浪費很多人的人力，甚至資源劃分好後不需要程序來參與ui的製作。
2，關於UI部分的載入， UI部分的載入主要包括幾部分，第一：公共資源的載入，這部分基本都是可以九宮格拉伸的，如果不可以那麼表明美術指定方案時有一定問題，因為公共的東西一般都是按鈕、UI背景、Title、底框等第二： UI相關的代碼部分，因為使用工具進行製作可以實現UI和邏輯的分離，那麼代碼部分就可以打包到Main.swf中去第三： UI獨特的外部資源，這部分資源實際上可以單獨放到伺服器上來單獨載入。當玩家打開UI時雖然看不到完整的資源，但是不影響玩家的操作等等。

3，關於載入的優化，這部分有很多方式可以來做，需要根據具體情況來定。。例如根據玩家的新手期來決定將一些引導資源或者最先接觸的資源放到Main.swf中去，這樣犧牲些前期時間來換取玩家的第一映像，再有可以開一個暗線載入，也就是玩家在引導的過程中暗線載入新手玩家前幾級的資源，這樣如果玩家網速在200k左右基本可以讓玩家不需要等待資源。。同樣道理可以在分析用戶的流逝，玩家的數據來決定該如何做。做法有很多需要根據項目來決定。。。。
4 還有你說的資源處理的方式，沒有看太明白，我感覺沒有必要統計吧， UI部分根據具體情況來決定，如果資源過多，可以按照我說的方式，將UI部分的單獨圖片放到外不去，或者也可以將每個UI所需要的資源打包成swf，也可以單獨圖片的方式存在。。

首先先回答一下題主的問題把。

題主說的遇到的問題還是非常實際的。相信做過AS3頁游開發的朋友肯定都遇到過。題主說的想法不是不可行。而這個問題是要根據情況找到一個最優化的解決方案。

首先，我不喜歡用MORNUI這類拼UI軟體

MornUI最早出現的時候看了一下，其實思路就是自己基於Flash的Sprite封裝了一套UI庫。然後又完善了一套編輯器用來生成界面顯示結構。但問題和樓主說的一樣。確實不如商業級軟體的易用性好，而且時不常的遇到某個小BUG。導致用起來會卡住。（沒實際在項目里用過，只是猜測）。但相信不是什麼大問題。只是這東西不是你們項目自己編寫的。如果遇到問題。你們是不能快速定位的。而項目Deadline時間緊。就可能沒那麼大經歷再去修改了。

而我提出的解決辦法是：我看了關於swf格式的各種資料……

你提出的方法是可行的。但有點難度，直接解析swf需要了解下swf文件格式。可能要花點時間熟悉下。具體資料可以搜索下avm2overview.pdf這個文檔。如果不想花時間，不如直接在fla中用jsfl來生成你想要的。類似 @張俊欽的PSD2SWF那樣。

管理資源，我的想法是單獨一個fla管理所有不包括特效的資源……

基本用的思路都是這樣的。其實就是將資源打包。打包為swf的好處是，壓縮方便，對於點陣圖swf可以進行有損壓縮，並且PNG圖片也可以。

如何優化UI載入，通常第一次進入遊戲，那UI都卡成狗了（參見神曲）。

關於神曲第一次進遊戲UI卡成狗的問題。這個可能跟載入有沒有優化關係不太大。可能是與載入之後做了什麼事情有關。據我看神曲的配置數據都是xml格式的。而且相當大。用as3的XML類解析這麼大數據量的xml是會造成卡的現象的。

----------------------------------------------------------------------------------------------------------------

做頁游前端開發做了4年多。我說下我的看法：

我不太贊同使用Flash CS IDE的方式作為UI的工作流解決方案。作為編輯器是非常不錯，但用這個作為編輯器代價是很高的。

原因是FLA文件在團隊開發中，如果產生了版本衝突的問題是沒有什麼好的解決辦法的。無非就是滿項目組問。提交了什麼。然後倆人一起商量下，如何合併，把兩個版本的fla同時打開，人肉比對。然後手工合併。再提交。這樣的方式在開發初期沒問題。但後期一旦忙起來。兩個人同時改一個fla了。或者美術替換UI資源。總之肯定會有兩個人同時修改一個fla的時候就很麻煩了。還有用fla之後，對於UI中的共有資源保存起來很麻煩的。需要用到運行時共享庫。這個具體如何麻煩。如果有需要咱們可以具體討論。

如果你的項目是純矢量資源（很多social game都是這樣。但目前頁游還都是以點陣圖為主。），那用fla就相對好一些。要不是這樣，不如項目一開始就積累一個自己的解決方案，比如自己寫編輯器這樣，並且是基於文本的方式存儲界面工程。從頭到位都在自己項目可控的範圍內。做任何事情都可以。比如擴展，修改。批處理自動化什麼的。

所以我不太贊同 @曾嶸的方法。這裡也希望能和曾嶸同學探討下

對於MMORPG頁游使用點陣圖的方式，我之前的做法就是使用編輯器。生成自己需要的文本格式來保存界面布局，樣式等。但在以前沒出現MornUI的時候。我用了一個取巧的辦法。就是利用FlashBuilder4.6以前版本Flex工程的編輯模式。利用那個編輯器會自動生成mxml代碼。然後我寫了一個程序，根據mxml來生成as代碼。這個屬於在早年自認能力不足，自己無法寫出成熟的編輯器工具。利用商業工具可以避免不必要的BUG。並且時間緊的情況下的辦法。這樣做的好處有很多。全部文件基於文本。產生衝突的情況下很容易解決。並且編寫一些自動化批處理的工具也非常方便。

我在項目中不太喜歡完全依靠命名規則來制定開發方法。因為命名規則需要的是研發人員的投入來實現的。出現差錯那就是溝通成本的增大。如果萬不得已，不會用這種方法。能用工具解決的事情就用工具解決。

看了下這個問題回答的基本都是很有經驗的頁游開發人員了。很多同學也都是在圈子裡常見的人。也希望大家能多探討。畢竟頁游已經不如以前了。之前很少能看到咱們AS3開發人員系統的討論工作方法的地方。

我完全贊成 @曾嶸的觀點，flash遊戲開發的工作流就是flashCS做UI導出來使用的，各種方便，如果你造的輪子比CS好，那就用自己造的，造不出來還是建議用CS做 UI，真的是各種姿勢都舒服，目前的項目是對18個平台的遊戲做產品更新，各個平台的UI差異，直接拷貝一份母版本的FLA在cs修改，很高效。但是有一個弊端就是會有冗餘的資源被載入進入，目前已經在優化。
題主說到卡的問題，其實很大部分是遊戲資源載入策略的問題，按需載入是最基本的，其次不麻煩的UI用graphics去繪製吧，加點顏色也差不多，那些產品汪能看出來？！
最後留兩個問題給題主
1.妹子在深圳7road？
2.妹子有男朋友沒？

首先同意@曾嶸的回答，我在他的基礎上回答上添加點內容。

1.關於UI框架
如果沒時間沒基礎的話，Flex還是最好的東西，雖然還是有bug，對新手來說，盡量避免關注UI的事情，而集中在業務邏輯的角度上是最好的。如果你想在手游上也要用到UI框架，那就必須自己寫啦，不然效率不高。

如果沒時間有基礎的話，也可以參考下開源的UI
這點在曾嶸的網站上有歸類
http://zengrong.net/flashassistant

在有時間有能力的情況下，可以直接在AS的基礎上直接寫一套UI代碼，不用要求自己多牛，只要能滿足項目的需求就好，而且打包的時候可以選擇，減少體積。而且我覺得自己寫的好處基本就沒有多餘沒有用的代碼，把效率發揮到極致。

自己公司有我自己寫的，這套系統成功應用過9RIA天地會的RunningPanda和自己公司的兩個頁游項目。

2.關於UI布局
其實這東西用MonsterDebugger就解決啦
http://demonsterdebugger.com/

這東西簡直就是神器，又能debug，又能調整UI位置和大小
怎麼用？你直接用代碼寫好層級，然後選中相關父子層級，調整其位置和大小，返回到代碼中修改就可以了。
特別是代碼上若是寫的坐標有時候就是差1-2個像素時候最好用

3.關於語言包
這個是資源打包問題
文件名或者類名命名成一樣，載入的時候按需載入就可以

4.關於工具
其實整套東西可以弄成一個完整的工作流工具，包括多語言，這東西成熟的公司很多。我就看到過開發龍將的團隊使用的工具，他們就用得很好。
但是！什麼東西是最好的呢？
適合自己的才是最好的！
我自己也曾經準備把公司的這些想整個在一起，做成一個工具，什麼編輯器啦。但是公司有很多其他東西要我做，也需要我去關心，優先順序比這高的多，我的優先目標是完成好的項目，因為寫出這個編輯器的效率性價比相對已經存在的成熟的工作流來說不是那麼高。
最重要的是下面用的人覺得很開心啊！

最開始做遊戲用的就是Flash IDE做的UI,,,,版本衝突這個問題的確太過於蛋疼。

後來自己參考著Keith Peters的一套UI代碼自己寫了一套框架出來類似mornUI那種xml格式解析的
然後自己寫了一個編輯器T_T可惜不好用然後團隊在長達1年多的時間做UI都是一半時間用我的編輯器一半時間在寫XML來實現功能。。。。汗
素材打包成swf 用的是jsfl。

後來發現了mornUI 現在2.5的版本相對也是比較穩定的了使用起來還是很不錯的可能部分控制項需要自己優化整體的感覺還是不錯的但是想把mornUI給美術使用還是不太靠譜我們都是美術出示例圖然後程序自己拼
至於遊戲初始化載入卡。我們遊戲UI素材進遊戲載入是控制在2M的二級界面素材是打開的時候載入這樣就減少了初始載入速度的。 xml、text等格式的東西都是弄成2進位載入的。所有我們遊戲初始化進遊戲的速度還是很快的。

我們一直用的是mornUI，從沒出過問題。

第一次進遊戲卡是正常的，大量的資源載入和對象創建，並不是因為UI造成的。

UI用的公共皮膚是進遊戲前預載入好了的，UI自己用的資源如果很大就用非同步載入，很小才用mornui打包為swf，這個swf需要打開UI前先載入好，而大的資源並不需要載入完。

我覺得你的思路有個工作流的問題這個看團隊吧像我們的團隊還做不到讓美術人員在類似CS這樣的工具裡面命名這件事畢竟程序有程序的命名習慣美術人員一般不太懂更不用說加down還是click了
我們自己的流程要經過3個人：美術出PSD，策劃（或者專職的UI人員）拼UI（切圖、拉控制項、設置皮膚），程序拿來加ID然後使用。
雖然mxml很臃腫但是我覺得用XML做UI描述文件這種思路是非常科學的版本控制也十分容易
因為是個文本可以很容易的在SVN裡面進行對比查找修改了什麼內容

一個東西要通用、可變、功能強大，則必然複雜。

這是一個取捨的問題。

從事頁游開發也有3年時間了，經歷了3個項目。但深感慚愧，還是沒有完全看懂你的想法。所以這裡就只是針對自己的體會簡單聊下。
mornui雖然有一些bug，但個人覺得它還是市面上最好用的ui編輯器之一。功能不多但都很實用，目前還么有碰到導出類的問題，單單修改美術資源的話，只需要重新打包這一步就可以完成。我目前的遊戲項目就是用mornui開發的。也許是對flash cs不熟悉，也曾經使用它來做ui，但在自定義功能組件和項目管理上發現有許多的不方便，便放棄了。沒有完全明白你說的bag_window做法，如果有興趣，可以深入討論。
管理資源這塊也沒有看懂你的想法，除開神曲，也有很多ui不卡的遊戲啊，呵呵~更多的還是取捨的問題啦，一次性把資源載入完程序處理方便玩家等待是假久，按需即時載入又導致玩家遊戲過程中不那麼流暢，預載入的話這個就更考研程序的功力啦。
話說，現在做頁游的越來越少啊~~

我覺得遊戲UI的話，FlexLite應該是個不錯的選擇，FlexLite是一個為遊戲而生的輕量級UI框架，基於FLEX4 Spark架構高度精簡優化而來，旨在為遊戲開發提供一個更加高效的UI工作流。配套可視化編輯器FlexLite Studio。更多介紹戳這裡=》FlexLite遊戲UI解決方案