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

支持WebGL 1.0與2.0 自適應(yīng)。支持ActionScript3、TypeScript、JavaScript三種開(kāi)發(fā)語(yǔ)言，適用2D、3D產(chǎn)品研發(fā)。性能媲美原生APP，一次開(kāi)發(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)畫
• 支持開(kāi)發(fā)2D、3D產(chǎn)品研發(fā)，支持同時(shí)發(fā)布為Web（瀏覽器、webView）、Native APP（IOS、安卓）、小游戲（微信、手Q、百度、頭條、抖音、小米、OPPO、vivo、華為）、等多種版本。

LayaAir2.0 IDE功能

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

• 代碼開(kāi)發(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)行開(kāi)發(fā)，在ide中編輯場(chǎng)景與頁(yè)面組件，通過(guò)添加腳本的方式，使項(xiàng)目開(kāi)發(fā)更利于程序，美術(shù)，策劃的協(xié)同工作，并且對(duì)初次接觸Laya的開(kāi)發(fā)者，更易于上手，開(kāi)發(fā)方式更友好。

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

關(guān)于JS語(yǔ)言

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

關(guān)于TS語(yǔ)言

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

關(guān)于AS語(yǔ)言

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

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 "http://www.toutiao.com/a7089044528674128391/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;

—END—

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

開(kāi)源地址：
https://gitee.com/layabox/LayaAir