淺談白鷺Egret

 

          最近在做一個移動項目，技術選型的時候接觸到了白鷺，簡單了解了之后覺得挺合適的，最終就選擇了這個引擎。

為什么會選擇白鷺引擎呢？ 我看上他主要有一下幾點：

 

1、egret的類結構以及繼承關系跟as3的一模一樣，很容易上手。

2、egret盡量保持每個類的屬性方法跟as3的一樣，這樣子的話as3里的寫法在egret里面同樣使用。

3、egret已經有一套完整的工具，可以方便的開發html5應用，也可以方便的發布手機原生應用。

4、白鷺公司的積極努力，使得每隔一小段時間都會有新版本出現。而且版本之間兼容性十分良好，還提供了一鍵升級。

5、如果你是as3開發者，看到egret你會心動，如果你是flex開發者，看到egret你會覺得看到了轉行移動的希望。

 

所以，作為一個曾經的as3開發者，用egret來開發移動端是再合適不過了。

egret同時支持用TypeScript和JavaScript開發，作為更喜歡面向對象的我們自然就選擇TypeScript了。

 

egret里面目前有下面這么多庫：

egret core 是核心庫用於顯示圖片、文字、濾鏡、事件、播放聲音等。

egret 3d 是他的3d引擎，如果是3d項目就要用到這個庫了。

game 比較簡單只有幾個類MovieClip、ScrollView、URLLoader、URLRequest等。

eui 是一套界面庫，用於設計界面。相當與flex了。拖拖擺擺就可以成界面了，非常方便。

socket 就是WebSocket庫，長連接網絡通信要用到的，游戲開發必備。

tween 是他的緩動庫，不過我一般是用TweenLite、TweenMax的js版。用起來方便，跟在flash里面一樣。

res 加載管理資源的，可以加載合圖和單張小圖。

dragonBones 骨骼動畫

gui 我沒有用到，據說是過時了的eui，現在已經用eui代替gui了。

tiledmap 解析tiled地圖用的。

other 里面沒什么，存了幾個數學常量和幾個類型定義。

 

詳細的開發文檔，官網已經介紹了，很詳細，可以參考 http://edn.egret.com/cn/docs/

這里主要講下寫項目的過程。

 

首先，你要下載Egret Engine

安裝完成后，打開EgretEngine，在里面下載用到的幾個工具 Egret Wing 3、Texture Merger、Egret IOS Support、Egret Android Support等。

 

然后，打開Egret Wing 3

新建一個Egret EUI 項目

按F5可以啟動項目。

 

寫項目最重要的是要建立好代碼結構，組織好項目代碼。

我在src文件夾下面建立了如下幾個文件夾

views 是放界面的。所有的ui都在這里，

         commons，是通用的組建，例如Alert，自己寫的列表等。

         games，是游戲場景里的ui

         halls，是大廳里的ui

         popups，是彈出窗口

         renderers，是列表中用到的renderer

 

utils 是放工具類，比如對ui操作的UIUtil、對string操作的StringUtil 等等。

servers 是游戲中用到的幾個服務了。自己封裝好http服務，tcp服務，放到這里面，對外通信通過發送事件即可。

scenes 游戲中用到的幾個場景，比如負責加載的LoadingScene、大廳界面HallScene、游戲界面GameScene、可能有不同的游           戲界面可可以寫成多個不通的GameScene。

models 游戲中的數據庫。存放游戲里面的數據，包括servers里面的幾個服務發送過來的數據，程序本身的數據，以及對數據的           簡單邏輯處理。程序中用到的數據都要通過它來訪問。

managers 顧名思義，管理器存放的地方，比如切換Scene用到的SceneManager，管理彈出窗口的PopupManager，自己封裝的便於使用的EventManager、對聲音操作的SoundManager、以及可能到本地化的LocalizeManager等。

events 自定義事件，將自定義Event放到這里方便管理。

controllers 控制器，是ui和數據的結合點，邏輯處理的地方。主要是和scenes對應，一個Scene可以對應多個controller，controller的作用是對Scene的功能進行分類，使得邏輯更加清晰。Scene有不同的功能，可以分別建不同的controller。

 

寫代碼都是要放到src里面，這點跟flashbuilder一樣。

編譯的時候egret會把我們寫的每一個代碼文件，分別編譯成對應的js文件和js.map文件(map文件是加斷點調試用的)，然后放在 index.html的<!--game_files_start-->和<!--game_files_end-->中間

 

在index.html里面，egret會先加載egret自己的類庫，然后加載我們自定義的庫，之后加載我們寫的代碼，最后啟動引擎

egret.runEgret({renderMode:"webgl", audioType:0});

egret將代碼都加載到同一個環境里。這就是為什么我們寫代碼的時候不用像as3那樣需要通過import將代碼引入了。這也是它比較方便的地方，你在這個文件里寫的代碼，在另外一個文件里可以直接訪問。

 

和src並列的還有一個resource文件夾

這個文件夾是存放程序里用到的資源用的，包括並不限於圖片，音樂，文本文件等。

resource里面最重要的是default.res.json文件，RES.getRes用到的key來自這個文件。

resource里面的default.thm.json文件是存放exml文件的，這個文件egret會自動修改，不需要我們手動修改。

 

程序的入口是Main.ts文件，這個可以修改，不過一般不用修改，默認就可以了。