[網頁遊戲開發]Morn簡介及使用教程

網頁遊戲開發利器，morn系列教程之Morn簡介及使用教程

網頁遊戲開發的一大部分工做是在和UI製做上，一個好的工具及框架能使開發事半功倍，Adobe自帶flash IDE和Flex各有不足。

Morn UI學習了Flash IDE使用的方便性（好比圖層功能，對齊，縮放，層次切換等等），同時吸收Flex組件化的特色，拋棄了Flex臃腫的結構，具備輕量級，高性能，可視化，易擴展等特性，知足了各類個性化開發需求，詳情能夠到http://www.mornui.com/瞭解

下面說一下Morn Builder(可視化編輯器)使用方式

使用可視化UI編輯器(Morn Builder)製做遊戲界面

提示：編輯器須要32位java環境，若是沒有，請去http://www.java.com/下載安裝完畢後，再執行下面教程

1.到網站http://blog.mornui.com/?page_id=17下載Morn UI編輯器及MornUILib組件庫源碼

2.解壓並打開builder下的Main.exe，點擊【建立新項目】，而後輸入項目名和項目存放的位置

3.肯定並建立好後，在左邊資源面板，點擊「添加資源」打開項目的資源目錄(在morn裏，圖片即組件，編輯器根據資源前綴識別成對應的組件，命名詳見《Morn資源命名規則》）

 

4.複製資源到剛纔打開的assets目錄，圖片要以文件夾的方式存放，編輯器會以文件夾爲單位打包爲對應的swf（本文最下面提供了組件資源下載，也能夠在官網demo裏面找到）

5.在編輯器內按快捷鍵F5刷新，就能看到資源組件樹了(若是提示java失敗，請先下載一個32位java環境www.java.com，而後再編輯器使用快捷鍵Ctrl+F5強制刷新資源)

6.在編輯器內，使用快捷鍵Ctrl+N新建一個頁面，起名叫Page1

7.拖拽左面資源區任意組件到視圖內，擺放拼裝成須要的界面。還能夠經過右面的屬性面板，設置各類參數以控制不一樣的顯示效果

很簡單吧，編輯器有不少功能，大部分功能都能在菜單和快捷工具欄中找到，並對應快捷鍵方便使用，有時間能夠詳細瞭解下

更多教程請參考http://blog.mornui.com/?cat=6

 

下面說一下如何

用代碼控制UI

Morn UI庫的使用

1.新建AS3項目到上面的項目目錄(我這裏是E:\test)（這裏建立as3項目用的是FlashDevlop，用FlashBuilder類同，注意編譯目錄改成bin，默認爲bin-debug）

 

2.解壓上面下載的MornUILib文件，複製MornUILib/src下的源碼到剛纔新建的AS3項目的src目錄下

 

3.在編輯器內，選中按鈕，而後在屬性面板var裏面輸入個名稱，好比btn

4.編輯器內用快捷鍵Ctrl+S保存，而後按快捷鍵F12發佈代碼。發佈成功後，Page1會對應生成Page1UI.as並默認發佈到項目src/game/ui下，所用資源自動打包爲swf，默認發佈到項目bin/assets下（路徑可配置，快捷鍵F9）

 

5.如今要使用這個頁面，那麼咱們新建一個類，繼承自這個Page1UI類，就能夠隨意控制它了(UI和邏輯分離)

6.在主文檔程序Main.as裏面，初始化Morn，加載資源，並實例化這個Page1頁面

 

7.編譯項目，至此就能正確的運行了

很是簡單吧，Morn UI還有更多功能呢，請參考後續教程

 

本文資源及源代碼下載：test

資源單獨下載：comp