LayaAir五分鐘教會你：如何用AS3開發HTML5遊戲

作為一個as3的老使用者，曾經用它開發很多遊戲，實作了自己的遊戲夢，有着無比的成就感。在adobe放棄flash，整個市場偏向html5後，一度很迷茫，這麼好的語言難道就要放棄嗎。layaair的出現，讓我看到了希望。

layaair是一套html5渲染引擎，底層利用webgl，canvas渲染，同時支援actionscript3，typescript，javascript三種語言開發，可以直接跑在微信，微網誌，qq，手機浏覽器，pc甚至電視上，是真正的跨平台，一套代碼，可以同時釋出成三端（手遊app，html5，flash），裝置覆寫率有着無比的優勢。

為什麼選擇用as3開發html5？有什麼優略勢？

一直以來，很多as3開發者都有一個疑慮，是否能使用as3開發js。其實這個疑慮是多餘的，經過一段時間的使用，通過layaair編譯器，用as3開發html5應用和開發as3應用程式沒什麼差別，寫法和工具鍊都沒變，非常得心應手。使用layaair編譯器編譯出來的js和as3是能一一對應上的。

下面是我用layaair的as3語言開發的示例

編譯為js後，代碼如下：

相比而言，除了類的寫法不同，其他代碼都是一樣的，代碼都是一一對應的。用as3語言開發相比直接用js，甚至ts，還有很多優勢：

as3是強類型語言，代碼提示非常友善

支援面向對象程式設計，比js甚至ts使用面向對象更友善

支援編譯，在運作之前發現錯誤并提前解決，而不是運作時解決

支援工具強大，flashdevelop flashbuilder工具成熟

下面說一下從as3到layaair有哪些相同和不同。

相同點：layaair用到了as3的基礎文法，比如基礎的string，number等類型，函數，類，接口，繼承，這些面向對象的寫法都可以随意使用，類庫不用flash開頭的類庫，用layaair自己封裝好的類庫即可（可以引入layaair提供的playerglobal.swc，屏蔽掉flash類庫代碼提示），寫起來和平時寫as3應用沒有太多差別，體驗一緻，這點很贊呀。很多as3的邏輯處理，可以不用更改直接能用。

不同點：一些不同點是as3和js的差異造成的，一些是對flash api的簡化， layaair的api設計以簡化，易用，高性能為準則，很多不同也是基于這個原因導緻的。

as3中的int類型，編譯到js後，使用的是number，因為js隻有number，平時不會遇到什麼問題，但是碰到自動強轉的邏輯，這塊需要用parseint()函數處理下。

as3中array對象有個sorton方法進行排序，由于js沒有，是以也不支援，可以用sort方法代替

事件寫法不同，layaair從性能及易用性上，對事件進行了簡化，增強，參照node.js的風格，比如sp.on(“click”, this, onspclick); ，這裡就是給sp對象增加了一個click事件監聽，比addeventlistener少寫了不少代碼（js不能壓縮，是以這樣寫能減少代碼大小）

移除一個事件

移除一個對象所有類型為click的事件(as3沒有)

移除一個對象身上的所有事件(as3沒有)

監聽某個事件一次，監聽被觸發後會自動移除(as3沒有)

事件監聽攜帶自定義資料，并傳回

是否監聽過某種事件

派發一個事件

自定義事件示例（無需執行個體自定的event類，直接傳遞資料）

另外特别需要注意的一點是，預設精靈是沒有寬高的（出于性能考慮），可以通過sp.size(100,100)設定寬高，或者設定sp.autosize=true，否則是點選不了的，但 laya自帶的ui系統會自動計算寬高，是以一般無需自行設定寬高

this,在as3監聽事件是不需要傳入this的，但是js執行函數必須有執行域，是以需要傳遞this域進行，就是函數執行的環境，這也是js為什麼比as3快的原因之一。

layaair去掉了flash内的displayobject，displaycontainer，bitmap，shape等類，隻保留了sprite類，對api進行了簡化，隻要學會一個sprite就夠了，使用時也不用抉擇到底用哪個好，并且sprite即可當顯示對象，又可當容器使用，性能非常快。

在layaair内，出于性能考慮，sprite精靈預設沒有自動設定寬高（預設都是0），可以通過設定width和height屬性設定，或者通過size()函數設定，寬高隻用來作為碰撞的依據，不再對顯示大小進行影響。還可以設定sp.autosize=true，讓系統幫你自動計算寬高，但這樣會消耗一定的性能，在layaair的ui系統内，會自動維護寬高，是以無需設定。

layaair内，width，height和scalex，scaley不再有關聯，即設定width不會影響scalex，其實可以把寬高立即為碰撞體大小，隻是用來做碰撞依據的。

textfield，textformat被text類代替，api也進行簡化，通過htmldivelement類，能實作html富文本。

bitmapdata被texture代替

xml和xmllist被js原生的domxml代替，盡量減少xml使用，性能真的不怎麼樣

flash的時間軸動畫，可以通過layaairide提供的工具轉換之後，在引擎内播放

layaair内置了tween，timer，loader，sound管理類，做遊戲更加友善

引擎子產品分為以下幾個部分：

a) laya.core是核心包，封裝了顯示對象渲染，事件，時間管理，時間軸動畫，緩動，消息互動，socket，本地存儲，滑鼠觸摸，聲音，加載，顔色濾鏡，位圖字型等

b) laya.webgl封裝了webgl渲染管線，如果使用webgl渲染，可以在初始化時調用laya.init(1000,800,webgl)進行開啟，如果裝置不支援webgl，會改用canvas模式繪制

c) laya.ani是動畫子產品，包含了swf動畫，骨骼動畫等

d) laya.filter包含更多webgl濾鏡，比如外發光，陰影，模糊以及更多

e) laya.html封裝了html動态排版功能

f) laya.ui.提供了制作ui的30多種常見ui元件

g) laya.tilemap提供tilemap解析支援