《開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項目的欄目，包括技術(shù)、學習、實用與各種有趣的內(nèi)容。本期推薦的是一個支持2D、3D的游戲與應(yīng)用開發(fā)的的小游戲引擎——LayaAir。

支持WebGL 1.0與2.0 自適應(yīng)。支持ActionScript3、TypeScript、JavaScript三種開發(fā)語言，適用2D、3D產(chǎn)品研發(fā)。性能媲美原生APP，一次開發(fā)HTML5、APP(安卓與iOS)、小游戲（微信小游戲、QQ小游戲、百度小游戲、支付寶小游戲、BiliBili小游戲、字節(jié)跳動小游戲、小米快游戲、OPPO小游戲、vivo小游戲、華為快游戲、等）各個平臺同時發(fā)布。

功能特性

LayaAir引擎主要包括 引擎庫 與 LayaAir ide 兩大核心部分。

LayaAir2.0引擎庫功能

• LayaAir2.0引擎不僅保持了1.0的原有功能，比如：精靈、矢量圖、文本、富文本、位圖字體、動畫、骨骼、音頻與視頻、濾鏡、事件、加載、緩動、時間、網(wǎng)絡(luò)、UI系統(tǒng)、物理系統(tǒng)、TiledMap、prtocol等API；
• 還新增內(nèi)置了box2D物理引擎、組件化支持，以及150多款3D功能，比如：新增的主要官方材質(zhì)包括PBRStandardMaterial、PBRSpecularMaterial以及UnlitMaterial材質(zhì)等。
• 紋理方面，增加多種紋理參數(shù)配置(mipmap、format、wrapModeU、wrapModeV、filterMode、anisoLevel)， 增加紋理上傳像素接口， GPU紋理壓縮。
• 動畫方面，新增Animator動畫融合功能crossFade，新增動畫多層混合播放，動畫更新機制調(diào)整為實時插值，大幅減少內(nèi)存和動畫流暢度表現(xiàn)，新增多種材質(zhì)屬性動畫
• 支持開發(fā)2D、3D產(chǎn)品研發(fā)，支持同時發(fā)布為Web（瀏覽器、webView）、Native APP（IOS、安卓）、小游戲（微信、手Q、百度、頭條、抖音、小米、OPPO、vivo、華為）、等多種版本。

LayaAir2.0 IDE功能

LayaAir2.0 IDE主要包括項目管理、代碼開發(fā)編輯器、可視化編輯器、第三方工具鏈支持工具等。其中主要功能包括：

• 代碼開發(fā)
• UI與場景編輯器
• 場景管理（2.0新增）
• 粒子編輯器
• 動畫編輯器
• 物理編輯器（2.0新增）
• 組件化支持（2.0新增）
• 3D支持（2.0新增）
• LayaCloud項目支持（2.0新增）
• 腳本擴展
• 預(yù)設(shè)
• APP打包
• JS混淆與壓縮
• 第三方工具鏈轉(zhuǎn)換工具（Unity3D、TiledMap、Spine、龍骨……）

Laya2.0 IDE 兼容LayaAir 1.x版本的寫法，在2d項目中，可以不需要太大的改動即可把原有項目升級到2.0引擎（升級前建議備份）

Laya2.0 IDE 采用掛載組件腳本與場景管理的方式進行開發(fā)，在ide中編輯場景與頁面組件，通過添加腳本的方式，使項目開發(fā)更利于程序，美術(shù)，策劃的協(xié)同工作，并且對初次接觸Laya的開發(fā)者，更易于上手，開發(fā)方式更友好。

開發(fā)語言

由于LayaAir引擎支持ActionScript3（AS3）、TypeScript（TS）、JavaScript（JS）三種語言開發(fā)，到底用哪種語言更好呢？常常困惑著剛接觸引擎的新手們。這里簡單介紹一下。

關(guān)于JS語言

需要大家注意的是JS語言雖然上手更為容易，但是作為一弱類型語言，開發(fā)與調(diào)試的難度，以及大型項目的管理與多人協(xié)作等方面，都不如TS與AS3這種可以在IDE中檢測類型和語法語言。當代碼越來越多的時候，JS一旦不小心寫錯，IDE中并不會有任何提示，只有在運行的時候才會發(fā)現(xiàn)問題，經(jīng)常有開發(fā)者為了查一個小小的失誤，花費大量的時間成本。所以雖然支持JS語言開發(fā)，但并不建議采用該語言作為中型或大型項目的開發(fā)。

關(guān)于TS語言

TS語言是LayaAir引擎官方推薦的開發(fā)語言，也是自2.2引擎開始，LayaAir引擎源碼所使用的語言。在官方的2.0引擎視頻教學中，也會僅采用TS語言進行教學。

關(guān)于AS語言

AS語言是LayaAir 2.2版本之前的引擎源碼語言，AS3語言曾經(jīng)是頁游時代的霸主，但自從Adobe正式宣布放棄Flash之后，也代表著該語言也將步入無人維護的境地。那一些新的語言特性自然難以支持，毫無疑問，繼續(xù)使用該語言將會拖引擎的后腿。所以，LayaAir引擎源碼語言進行了變更，但2.X版引擎，AS語言版本仍會保持兼容及維護。但未來3.x一定會放棄該語言的支持。所以建議開發(fā)者在創(chuàng)建新項目的時候不要使用AS語言。

代碼示例

場景加載

ActionScript

package LayaAir3D_Scene3D { import common.CameraMoveScript; import laya.d3.core.Camera; import laya.d3.core.scene.Scene3D; import laya.d3.math.Vector3; import laya.d3.math.Vector4; import laya.display.Stage; import laya.utils.Handler; import laya.utils.Stat; public class SceneLoad1 { public function SceneLoad1() { //初始化引擎 Laya3D.init(0, 0); Stat.show(); Laya.stage.scaleMode = Stage.SCALE_FULL; Laya.stage.screenMode = Stage.SCREEN_NONE; //加載場景 Scene3D.load("res/threeDimen/scene/LayaScene_dudeScene/Conventional/dudeScene.ls", Handler.create(this, function(scene:Scene3D):void { Laya.stage.addChild(scene) as Scene3D; //獲取場景中的相機 var camera:Camera = scene.getChildByName("Camera") as Camera; //移動攝像機位置 camera.transform.position = new Vector3(0, 0.81, -1.85); //旋轉(zhuǎn)攝像機角度 camera.transform.rotate(new Vector3(0, 0, 0), true, false); //設(shè)置攝像機視野范圍（角度） camera.fieldOfView = 60; //設(shè)置背景顏色 camera.clearColor = new Vector4(0, 0, 0.6, 1); //加入攝像機移動控制腳本 camera.addComponent(CameraMoveScript); //設(shè)置燈光環(huán)境色 //scene.ambientColor = new Vector3(2.5, 0, 0); })); } }}

JavaScript

class SceneLoad1{ constructor(){ Laya3D.init(0, 0); Laya.Stat.show(); Laya.stage.scaleMode = Laya.Stage.SCALE_FULL; Laya.stage.screenMode = Laya.Stage.SCREEN_NONE; Laya.Scene3D.load("res/threeDimen/scene/LayaScene_dudeScene/Conventional/dudeScene.ls", Laya.Handler.create(this, this.sceneLoadFinished)); } sceneLoadFinished(scene){ Laya.stage.addChild(scene); let camera = scene.getChildByName("Camera"); camera.addComponent(CameraMoveScript); }}//激活啟動類new SceneLoad1();

TypeScript

import CameraMoveScript from "./common/CameraMoveScript"class SceneLoad1 { constructor() { Laya3D.init(0, 0); Laya.Stat.show(); Laya.stage.scaleMode = Laya.Stage.SCALE_FULL; Laya.stage.screenMode = Laya.Stage.SCREEN_NONE; Laya.Scene3D.load("res/threeDimen/scene/LayaScene_dudeScene/Conventional/dudeScene.ls", Laya.Handler.create(null, function(scene:Laya.Scene3D):void { Laya.stage.addChild(scene) as Laya.Scene3D; var camera:Laya.Camera = scene.getChildByName("Camera") as Laya.Camera; camera.addComponent(CameraMoveScript); })); }}new SceneLoad1;

引擎示例

環(huán)境反射

光照貼圖

方向光

網(wǎng)格加載

基礎(chǔ)碰撞器

玻璃折射

模型示例

—END—

開源協(xié)議：https://gitee.com/layabox/LayaAir/blob/master/LICENSE.md

開源地址：https://gitee.com/layabox/LayaAir