《開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項(xiàng)目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是一個(gè)支持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é)跳動(dòng)小游戲、小米快游戲、OPPO小游戲、vivo小游戲、華為快游戲、等）各個(gè)平臺(tái)同時(shí)發(fā)布。

功能特性

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

LayaAir2.0引擎庫(kù)功能

• LayaAir2.0引擎不僅保持了1.0的原有功能，比如：精靈、矢量圖、文本、富文本、位圖字體、動(dòng)畫、骨骼、音頻與視頻、濾鏡、事件、加載、緩動(dòng)、時(shí)間、網(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紋理壓縮。
• 動(dòng)畫方面，新增Animator動(dòng)畫融合功能crossFade，新增動(dòng)畫多層混合播放，動(dòng)畫更新機(jī)制調(diào)整為實(shí)時(shí)插值，大幅減少內(nèi)存和動(dòng)畫流暢度表現(xiàn)，新增多種材質(zhì)屬性動(dòng)畫
• 支持開發(fā)2D、3D產(chǎn)品研發(fā)，支持同時(shí)發(fā)布為Web（瀏覽器、webView）、Native APP（IOS、安卓）、小游戲（微信、手Q、百度、頭條、抖音、小米、OPPO、vivo、華為）、等多種版本。

LayaAir2.0 IDE功能

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

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

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

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

開發(fā)語言

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

關(guān)于JS語言

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

關(guān)于TS語言

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

關(guān)于AS語言

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

代碼示例

場(chǎng)景加載

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; //加載場(chǎng)景 Scene3D.load("res/threeDimen/scene/LayaScene_dudeScene/Conventional/dudeScene.ls", Handler.create(this, function(scene:Scene3D):void { Laya.stage.addChild(scene) as Scene3D; //獲取場(chǎng)景中的相機(jī) var camera:Camera = scene.getChildByName("Camera") as Camera; //移動(dòng)攝像機(jī)位置 camera.transform.position = new Vector3(0, 0.81, -1.85); //旋轉(zhuǎn)攝像機(jī)角度 camera.transform.rotate(new Vector3(0, 0, 0), true, false); //設(shè)置攝像機(jī)視野范圍（角度） camera.fieldOfView = 60; //設(shè)置背景顏色 camera.clearColor = new Vector4(0, 0, 0.6, 1); //加入攝像機(jī)移動(dòng)控制腳本 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); }}//激活啟動(dòng)類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