[網頁遊戲開發]使用編輯器製做界面

Morn UI一個顯著優點就是Morn Builder(可視化編輯器)，實現界面設計的所見即所得，《Morn簡介及使用教程》文章中已經介紹了編輯器的簡單使用方法，今天給你們介紹一下Morn UI每一個組件的屬性及在編輯器的簡單使用方法。

打開編輯器，在E:\MornCompTest下建立了新UI項目命名爲MornCompTest

複製基礎組件到資源目錄，而後F5刷新編輯器，便可看到資源組件樹

而後Ctrl+N新建頁面命名爲ButtonTest，而後咱們拖動左邊的button到視圖中，結果以下圖：

編輯器分爲菜單工具欄區，界面列表區，資源組件區，設計試圖區，組件屬性區，圖層區等6個區域

基礎屬性

在組件屬性區，每一個組件都有本身的屬性，每一個組件都有一些公用屬性，好比：

 

name是組件實例的名字，x，y，width，height分別是組件座標和寬高，var是組件實例的全局引用名，若是定義了這個，就能夠在代碼很方便的找到它。除了這些，morn ui全部組件還有下面基礎屬性

 

屬性這麼多，美術同窗要問怎麼記呢？其實無需記憶，編輯器內鼠標放在屬性文字上，會自動提示屬性的名稱和格式，很方便吧

下面咱們一一介紹下各個組件的使用方法和屬性含義

基礎可視化組件

1.Label組件

 

Label是文本，設置text能夠顯示其內容，設置isHtml=true後，會顯示html內容

autoSize屬性若是設置爲left，就是自適應文本，寬度會隨着文本長短的變化而變化

label還能夠設置skin，做爲文本的背景圖片，同時支持sizeGrid，用來9宮格拉伸背景(詳細格式請參考《深刻了解Morn UI》)

stroke是文字描邊，格式爲（顏色，透明度，水平模糊量，垂直模糊量，強度，質量）好比紅色描邊能夠定義爲(0xff0000,1,5,5,2,1)

leading是段落之間的間距

2.TextInput組件

 

TextInput是輸入框，繼承自Label，除了具備Label的屬性外，額外多了上面三個屬性，瞭解便可

3.TextArea組件

 

TextArea是文本域，繼承自TextInput，除了具備TextInput的屬性外，額外多一個scrollBarSkin屬性，能夠用來設置滾動條皮膚

4.Button組件

Button是按鈕組件，經過skin能夠設置按鈕皮膚，sizeGrid定義了按鈕9宮格拉伸

labelColors是按鈕文本在各類狀態的顏色值，分別爲（正常狀態，鼠標通過狀態，鼠標點擊狀態，禁用狀態），好比(0x32556b, 0x32556b, 0x32556b, 0xC0C0C0)

toggle設定了是不是回彈按鈕，其餘一些屬性和label類同

5.LinkButton，CheckBox，RadioButton組件

LinkButton是下劃線按鈕，CheckBox是多選按鈕，RadioButton是單選按鈕，三者均繼承自Button，屬性也和Button同樣

6.Image組件

 

Image是圖形組件，具備url屬性，設置url既能夠是鏈接類，也能夠是一個路徑，支持異步加載，同時也能夠設置9宮格拉伸

7.Clip組件

Clip是位圖切片，Clip相似flash的movieclip(動畫剪輯)，和Image類同，url既能夠是資源鏈接類，還能夠是一個路徑動態加載

clip須要設置clipX屬性和clipY屬性，分別是圖片行個數和列個數，支持多行多列，還能夠設置clipWidth和clipHeight，這個是單個圖標的寬高，程序會根據這個寬高算出clipX和clipY，好比上面圖片行個數爲10，列個數爲1

Clip便可用來作icon，經過frame屬性切換當前顯示第幾幀，又可做爲位圖動畫，設置interval播放間隔進行播放，在編輯器選中clip，而後按回車鍵能夠預覽動畫

frame就是當前切片顯示的索引，從0開始

8.FrameClip組件

 

FrameClip是矢量圖動畫組件，和clip相似，不一樣的是FrameClip是Morn UI惟一基於矢量圖的組件

它的skin對象爲Movieclip的鏈接類，能夠設置動畫間隔並進行播放

FrameClip組件的主要用途是UI特效，畢竟矢量圖動畫特效比位圖動畫要小不少，而且效果也好。

9.ProgressBar組件

ProgressBar是進度條組件，value範圍是0到1，能夠設置9宮格拉伸

10.Slider 滑動條

 

Slider是滑動條，能夠經過滑動設置獲得value值，min，max屬性控制最大及最小值，tick設定了滑動單位值，allowBackClick定義是否容許點擊背景滑動

11.HSlider，VSlider組件

HSlider是水平滑動條，VSlider是垂直滑動條，屬性和Slider類同

12.ScrollBar組件 

ScrollBar是滾動條組件，其中scrollSize定義了每次滾動的數量

13.ComboBox組件

ComboBox是下拉框組件，labels屬性能夠設置下拉框列表值，好比label=「列表1,列表2」，用逗號隔開

visibleNum是下拉框列表一次顯示的最大數量，若是label數超過這個數量，就會出現滾動條，經過scrollBarSkin能夠設置滾動條皮膚

 

容器組件

1.Box組件

Box是容器組件，容器在界面上不能被直觀看到，也不能經過拖動組件樹建立，而是經過轉換方式把某些內容轉換爲容器

好比界面中同時選中兩個按鈕，經過快捷鍵Ctrl+B轉換爲容器，那麼兩個按鈕就被包含在Box內，做爲一個總體來控制

 

選中一個容器，經過快捷鍵Ctrl+U，能夠去除這個容器，和上面作相反的工做

2.Container組件

 

Container是相對定位容器，繼承自Box，增長了left，right，top，bottom等相對定位屬性，同時增長了centerX，centerY等居中對齊屬性

也能夠經過Ctrl+B轉換而來

3.Panel面板

Panel繼承Container，除了具備相對屬性外，增長了滾動條和遮罩效果，不管裏面的圖片有多大，panel只會顯示特定區域，經過滾動能夠看到其餘區域

4.Tab組件

Tab是切換標籤按鈕組，能夠設置labels屬性設置標籤，好比labels=「標籤1,標籤2」，多個用逗號隔開

direction定義了tab的佈局方向，是水平仍是垂直

假如Tab裏面的按鈕擺放不規則，顏色都不同，想個性化，那麼就須要自定義Tab佈局，請參考教程《自定義Tab，Radiogroup，List》

5.RadioGroup組件

RadioGroup是單選按鈕組，和Tab相似，能夠設置labels=「單選1,單選2」進行設置，也能夠經過direction屬性選擇佈局的方向

RadioGroup也支持自定義佈局，請參考教程《自定義Tab，Radiogroup，List》

6.List組件

 

建立List：

添加一個label並選中，Ctrl+B轉換爲Box，設置Box的name屬性爲render，再選中Box經過Ctrl+B轉換爲List，設置List的行數，列數和間隔屬性便可(分別爲repeatX,repeatY,spaceX,spaceY)。

爲list添加滾動條：
雙擊list，進入list內部，拖動一個滾動條到list內，修改name屬性爲scrollBar，便可自動識別，詳細可參看Demo示例

最終結構以下：

<List x="214" y="274" repeatX="1" repeatY="5" spaceX="0" spaceY="5" var="list">
<Box x="0" y="0" name="render">
<Label text="label" x="27" y="4" name="label"/>
</Box>
<VScrollBar skin="png.comp.vscroll" x="89" y="3" width="15" height="150" name="scrollBar"/>
</List>

List和Tab同樣，能夠個性化自定義，請參考教程《自定義Tab，Radiogroup，List》

List是列表組件，繼承自Box，repeatX，repeatY分別是列表項x，y方向每頁最多顯示的數量，spaceX和spaceY是列表項之間的間隔值，scrollSize是每次滾動的個數

List是比較經常使用的組件之一，同時也是最複雜，最靈活的組件，List還有不少高級用法，請參考教程《List高級使用教程》

7.ViewStack組件

ViewStack是視圖導航器組件，做爲一個容器，用來存儲多個視圖，經過selectedIndex進行切換顯示

使用方式：選擇要包含進ViewStack的對象，分別命名爲item0，item1，item2…，而後全選，Ctrl+B轉換爲ViewStack容器

最終結構以下：

<ViewStack x="364" y="328">
<Label text="view1111" name="item0" x="0" y="0"/>
<LinkButton label="view222" x="47" y="0" name="item1"/>
</ViewStack>

8.頁面嵌套

 

頁面嵌套相似Flex的自定義控件，能夠把一個界面嵌套到另一個界面內，只需選中一個界面，拖動到另外界面內部便可

這樣作能夠實現自定義的顯示組件，同時達到多界面複用的效果，還可經過修改此控件的runtime屬性來設置嵌套界面的邏輯類

瞭解更多頁面嵌套內容，能夠參考教程《頁面嵌套的使用》

視圖組件

1.View組件

View是視圖類，一個界面就是一個視圖，視圖類實現了界面結構的解析，這裏具備很大的靈活性

在建立界面的時候，會讓你選擇用哪一種視圖類，你甚至能夠自定義本身的視圖類，封裝本身的邏輯，而後在編輯器讓界面都繼承自此自定義視圖類，這就是Morn UI自定義靈活性的又一表現，詳情請參考教程《自定義頁面基類》

2.Dialog組件

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

所有組件集合以下圖：

遊戲開發所用的組件，Morn UI都精煉的提供了，這麼多功能，僅僅給你的代碼增長30多K的大小，真正的輕量級

而且每一個組件都是通過深思熟慮，同時保證簡單好學好用，又要高性能，而且可視化佈局，還考慮到自定義擴展等特性

這一切組件，所有開源，你能夠任意改動和擴展，開發適合本身的需求東西，Morn UI的一個重要特性就是靈活性，易擴展

全部這些，均免費，甚至能夠商業應用，若是你再猶豫，我和個人小朋友就要驚呆了