[網頁遊戲開發]進一步瞭解Morn UI及工做流

Morn UI工做流

Morn Builder不只僅是對Flash IDE的改進，傳統的開發協做是以fla爲基礎，因爲fla是二進制文件，在以svn等版本控制軟件協做下，合併過程當中會出現各類各樣的問題

而Morn UI界面是以文本方式爲基礎的，因此可以輕鬆經過svn進行管理協做，並增長了更爲有效的分工，提升美術，策劃及程序的工做效率

Morn UI遊戲開發流程圖：

因爲有可視化編輯器支持，UI製做人員既能夠是美術，又能夠是策劃或程序擔當

 

進一步瞭解Morn UI

1.瞭解組件

Morn UI有26個經常使用組件和9個管理類，組件功能單一，同時提供詳細的API文檔，很容易學習和掌握。Morn UI高效的封裝了遊戲開發中經常使用的組件，使用後僅給項目代碼增長30多K的大小，很是輕量。

Morn UI組件學習了Flex組件的生命週期，基於位圖及延遲渲染，實現了組件的高性能。內置加載管理器，時間管理器，資源管理器，日誌管理器，拖拽管理器，渲染管理器，鼠標提示管理器，多語言管理器等高效封裝的管理類，有效組織UI代碼和邏輯。

組件結構以下：

2.組件的生命週期

Morn UI組件內部生命週期以下：

構造函數 → preinitialize(預初始化) → createChildren(建立子對象) → initialize(初始化) → 屬性計算 → callLater → 最終渲染

其中preinitialize能夠作修改屬性默認值等操做，createChildren用來建立子對象，initialize時此子對象已被建立，能夠對子對象進行修改

callLater能夠用來延遲計算渲染，最後是提交渲染，合理利用這個生命週期，就能減小組件邏輯計算及渲染，提升性能。

3.什麼是Clip和FrameClip，他們有什麼區別

Clip是位圖切片，能夠做爲位圖動畫進行播放，還能夠做爲圖標集合，用來控制第幾個幀的圖標，很是好用

FrameClip和Clip類同，但FrameClip是矢量圖切片，是對MovieClip動畫的擴展，做爲Morn UI惟一的矢量圖組件，設計的目的是用來作UI特效，畢竟矢量圖動畫相比位圖動畫要小不少，用它作UI動畫效果是最合適不過了

Clip和FrameClip能夠在編輯器內進行預覽，只要選中組件，按回車鍵控制播放

4.Box，Container，Panel，View，Dialog這些容器有什麼區別

以上組件中，Box，Container，Panel，View，Dialog都是容器組件，可是他們功能各有不一樣

Box是基礎容器類，封裝了不少容器操做方法

Container繼承自Box，實現了相對定位的功能器，如left,right,top,bottom等屬性，還增長了centerX，centerY等劇中對齊等屬性

Panel繼承自Container，除了擁有相對功能外，還實現了遮罩效果和滾動條

View是視圖類，繼承自Container，View實現了界面基於xml的結構解析功能

Dialog是對話框，繼承自View，在view基礎上增長了show，popup，close等窗口彈出功能，同時增長了拖拽，模式窗口等功能

5.怎麼自定義頁面基類

View和Dialog是編輯器全部頁面的基類，假如你不想直接用這兩個類做爲頁面基類，你能夠自定義頁面基類，增長本身的邏輯，實現個性化需求(詳細參考《自定義頁面基類》)

6.怎麼設置拖動對話框

Dialog默認是不可拖動的，如下兩種方式能夠設置拖動區域，從而實現拖動功能：

1)在編輯器內拖動一個image，命名爲drag，便可實現拖動區域設置(實際運行中image不可見)
2)或者經過代碼視圖直接設置拖拽區域屬性(dragArea)便可使窗體拖動(格式:x:Number=0, y:Number=0, width:Number=0, height:Number=0)

7.怎麼自定義Tab，Radiogroup，List等組件的顯示

Tab，Radiogroup，List也是容器，繼承自Box，這三個組件既支持參數設置的方式實現，又支持自定義的方式實現更爲靈活的組件視圖

方式以下：

在頁面內擺放幾個按鈕，每一個按鈕的位置顏色等屬性能夠隨意設置，而後把按鈕的name屬性分別命名爲item0，tiem1，item2…，選中這些按鈕，Ctrl+B轉換爲Tab，這樣就完成了自定義的Tab，RadioGroup，List類同

更詳細參考《自定義Tab，Radiogroup，List》

8.怎麼設置組件9宮格拉伸

全部位圖組件均有gridSize屬性，實現了9宮格支持拉伸

gridSize是一個字符串數字，數值和Flex默認的不太同樣，格式是（左邊距,上邊距,右邊距,下邊距），這樣使用起來更方便，例以下圖（圖片被放大以方便查看）

 

gridSize應該設置爲gridSize=「3,26,3,5」

9.什麼是組件賦值操做，如何對UI賦值

Morn賦值功能，是把原來對UI獲取，設置等操做的封裝，將開發者的焦點集中到對數據操做上，大大簡化了UI開發的複雜性，必定要靈活應用

賦值是對組件屬性修改的簡化操做，相似Flex裏面的數據綁定。賦值是經過dataSource屬性設置的
例如頁面內有一個name屬性爲「labe1」的文本，和一個name屬性爲」btn2″的按鈕

簡單賦值:this.dataSource={{「labe1″:」設置文本的text屬性」},{「btn2″:」按鈕名稱」}};
經過上述操做，就改變了label的text屬性和button的label屬性

複雜賦值能夠更改組件的任意屬性，好比：

this.dataSource={{「labe1″:{text:」設置text」,size:12}},{「btn2″:{label:」按鈕名稱」,alpha:0.5}}};

List的賦值請參考後續教程

進一步瞭解編輯器

Morn UI編輯器實現了不少方便性的功能，好比圖層，對齊功能，放大縮小，右鍵拖動，多項目支持，界面預覽，代碼模式，插件，屬性設置，資源管理等等，大部分功能都可在菜單內找到。

1.圖層的應用

Morn UI學習Flash IDE的圖層功能，圖層是在可視化設計時，用來控制多個顯示對象的利器，經過圖層能夠控制組件之間的先後關係，還能夠批量控制組件的顯示隱藏，是否鎖定等等。

同圖層之間能夠經過快捷鍵切換順序，不一樣圖層之間也能夠切換，快捷鍵請參考編輯器菜單

2.內嵌模式和加載模式

內嵌模式和加載模式都是針對UI界面的XML而言的，內嵌模式是將UI視圖XML結構內嵌在UI類裏面，加載模式是把全部界面XML壓縮打包爲二進制數據，使用時再加載解析

內嵌模式的優勢：清晰明瞭，方便調試，無需加載

加載模式的優勢：和主程序分離，美術修改UI後，而無需編譯主程序便可看到效果，還能夠單獨對UI二進制包進行加密，防止別人窺視

加載模式使用：在編輯器內F9設置內，選中加載模式，而後在項目代碼中增長下面代碼，設置二進制文件路徑(默認文件名爲ui.swf，可修改)

Config.uiPath = 「ui.swf」;

3.設置組件默認屬性設置及資源壓縮比例

在資源樹內，雙擊資源，能夠打開組件默認屬性設置和資源壓縮比例設置

組件默認屬性設置：設置後，再拖動這個組件，會默認把這個設置應用到視圖上，而無需再次設置

資源壓縮比例設置：能夠設置資源的是否壓縮以及壓縮的比例

4.多語言

編輯器內置多語言插件，會自動提取界面語言包，輕鬆實現遊戲國際化

5.自定義資源，代碼的發佈目錄

快捷鍵F9打開項目設置，裏面能夠修改不少個性化設置

擴展Morn UI

1.自定義UI組件

自定義組件須要如下三個步驟：

1)書寫組件類，實現IComponent接口（或者直接繼承Component類），若是是容器，實現IBox接口(或者直接繼承Box類)

2)調用View下的registerComponent方法註冊組件

3)生成swc庫，放置到編輯器swcs目錄，同時增長組件配置文件，格式參考MornUILib.xml（詳細請參考《擴展Morn UI組件》）

2.使用控件，自定義控件

Morn支持自定義控件(又稱界面嵌套)，實現界面的封裝和複用，只需拖動一個界面到另一個界面內部，便可實現控件複用，還可經過修改此控件的runtime屬性來設置控件的邏輯類（詳細請參考《界面嵌套的使用》）

3.擴展編輯器，開發編輯器插件

Morn UI編輯器支持插件擴展，以實現自定義功能，實現插件很是簡單，只要繼承至編輯器擴展基類PluginBase，而後編譯成swf放到編輯器下的plugins目錄便可，代碼能夠參考PluginDemo語言包插件實例源碼，詳細流程請參考教程《擴展Morn編輯器，開發編輯器插件》

Morn UI是一個既靈活有強大的開發工具，擁有它，能大大提升工做效率和效果

更多請關注後續教程