當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

LayaAir引擎开发HTML5最简单教程(面向JS开发者)

發(fā)布時間：2024/6/21 综合教程 41 生活家

生活随笔收集整理的這篇文章主要介紹了 LayaAir引擎开发HTML5最简单教程(面向JS开发者) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

LayaAir引擎開發(fā)HTML5最簡單教程(面向JS開發(fā)者)

一、總結(jié)

一句話總結(jié)：開發(fā)游戲還是得用游戲引擎來開發(fā)，其實很簡單啦

切記：開發(fā)游戲還是得用游戲引擎來開發(fā)，其實很簡單，引擎很多東西都幫你做了

二、入門教程:一篇學會LayaAir引擎開發(fā)HTML5(面向JS開發(fā)者)（轉(zhuǎn)）

轉(zhuǎn)自：入門教程:一篇學會LayaAir引擎開發(fā)HTML5(面向JS開發(fā)者) - 知乎
https://zhuanlan.zhihu.com/p/20902118

序

HTML5是一種熱門的跨平臺開發(fā)技術(shù)，隨著引擎技術(shù)的發(fā)展，如今LayaAir引擎的產(chǎn)品性能已達到原生APP的水準，甚至可以直接用于開發(fā)APP、HTML5、Flash的多端版本產(chǎn)品。認真學習完本篇教程，可以幫您打開全平臺開發(fā)之門。

LayaAir支持ActionScript3、TypeScript、JavaScript三種語言，因此入門教程也分為三個版本，本篇文章是面向JavaScript程序員的版本。

另外，本篇LayaAir引擎入門教程是面向已擁有一定開發(fā)基礎(chǔ)的程序員，如果對本篇文章中涉及的開發(fā)語言尚不熟悉的開發(fā)者，請先行學習掌握相關(guān)的語言基礎(chǔ)后再閱讀本文。

如果您是第一次使用LayaAir引擎開發(fā)，請嚴格遵照本篇教程的步驟操作，直到正確完成第一個DEMO。

第一節(jié) 開發(fā)前的準備

一個強大的可視化編輯工具，可以大幅提升開發(fā)效率，也可以交由美術(shù)和策劃直接使用，減輕代碼開發(fā)壓力。LayaAirIDE正是一款可視化集成開發(fā)工具，當前已集成代碼編輯器，UI、粒子、動畫等常用可視化編輯工具，還支持DragonBones骨骼編輯器、tileMapEditor地圖編輯器等第三方工具。在系統(tǒng)方面，LayaAirIDE支持windows7或以上的windows系統(tǒng)，以及MAC系統(tǒng)。

LayaAir引擎與IDE最新版本的官方入口URL地址：

http://ldc.layabox.com/

LayaAirIDE下載解壓后的目錄結(jié)構(gòu)，如下圖所示：

由于LayaAir目前是綠色免安裝版本，在下載解壓后，建議先將主程序LayaAir.exe右鍵發(fā)送到桌面快捷方式。

第二節(jié) 創(chuàng)建項目

步驟一：打開LayaAirIDE，如果是首次打開，直接點擊“新建項目”開始創(chuàng)建新項目。

步驟二：在“新建項目”的窗口里，第一行是項目名稱,第二行是項目所在路徑，第三行是項目類型，分別為ActionScript、JavaScript、TypeScript項目，這里我們需要選擇 “JavaScript項目”。

步驟三：點擊確定后。我們可以看到LayaAirIDE的代碼工作環(huán)境，項目創(chuàng)建的時候，自動生成了一個UI示例項目，包括了一個簡單的DEMO。如下圖所示：

第三節(jié) 顯示文字“Hello Layabox”

步驟一：選中bin右鍵單擊，然后左鍵點擊“新建文件”，在bin目錄下建立一個HelloLayabox.js的文件。

步驟二：按建步驟一的方式，還在bin目錄下，創(chuàng)建一個HelloLayabox.html的文件，點擊打開該文件編寫如下圖的HTML代碼。這里包括了引擎庫與程序代碼的引用。（Tips:如果項目代碼里涉及中文，需要在HTML里設(shè)置好utf-8編碼）

圖中代碼如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>helloLayabox</title>
</head>
<body>
	<script src="libs/laya.core.js"></script>
	<script src="HelloLayabox.js"></script>
</body>
</html>

步驟三：打開項目文件“StudyLayaAirJS.laya”，將原來的默認顯示頁修改為bin/HelloLayabox.html，修改后，該頁就會成為調(diào)試運行(按F5)的入口主頁。

步驟四：準備工作完成后，就可以編碼了，我們打開bin目錄下的HelloLayabox.js，開始編寫如下代碼：

//創(chuàng)建舞臺，默認背景色是黑色的
Laya.init(600, 300);

var txt = new Laya.Text();

//設(shè)置文本內(nèi)容
txt.text = "Hello Layabox";
 
//設(shè)置文本顏色為白色，默認顏色為黑色
txt.color = "#ffffff";
 
//將文本內(nèi)容添加到舞臺 
Laya.stage.addChild(txt);

步驟五：編碼完成后，按F5調(diào)試，在彈出的頁面里，我們可以看到代碼的運行結(jié)果，如下圖所示：

步驟六：顯示成功后，我們繼續(xù)編寫代碼，讓文字顯的美觀一些。繼續(xù)完善代碼如下：

//創(chuàng)建舞臺，默認背景色是黑色的
Laya.init(600, 300);

var txt = new Laya.Text();

//設(shè)置文本內(nèi)容
txt.text = "Hello Layabox";
 
//設(shè)置文本顏色
txt.color = "#FF0000";
//設(shè)置文本字體大小，單位是像素
txt.fontSize    = 66;
 
//設(shè)置字體描邊
txt.stroke = 5;//描邊為5像素
txt.strokeColor = "#FFFFFF";
 
//設(shè)置為粗體
txt.bold = true;
 
//設(shè)置文本的顯示起點位置X,Y
txt.pos(60,100);
 
//設(shè)置舞臺背景色
Laya.stage.bgColor  = '#23238E';
 
//將文本內(nèi)容添加到舞臺 
Laya.stage.addChild(txt);

編寫完成后，按F5調(diào)試，運行結(jié)果如下圖所示：

至此，如果您能跟隨本篇入門教程，完成上圖的顯示，恭喜您入門成功，我們已經(jīng)完成了第一個采用JavaScript語言開發(fā)的LayaAir引擎HTML5程序。更多LayaAir引擎開發(fā)的API使用方法，請前往官網(wǎng)Layabox開發(fā)者中心查看在線API與在線DEMO。

在線API文檔地址：

http://layaair.ldc.layabox.com/api/

在線DEMO文檔地址：

http://layaair.ldc.layabox.com/demo/

第四節(jié) WebGL開啟

LayaAir引擎默認采用Canvas模式渲染，如果想要啟動WebGL模式，需要在初始化舞臺的時候的進行設(shè)置，例如：

默認Canvas模式渲染的寫法為

Laya.init(600, 500);

WebGL模式渲染的JavaScript寫法為

Laya.init(600, 500,Laya.WebGL);

開啟WebGL模式后，在支持WebGL的環(huán)境下，會優(yōu)先采用WebGL 3D模式渲染，在不支持WebGL的環(huán)境下，會自動切換為Canvas 2D渲染模式。

啟用WebGL模式的LayaAir引擎，在FPS性能方面可以媲美APP，也超出Canvas模式很多，但編譯出的JS文件體積也會變大，所以開發(fā)者可以依據(jù)項目自身情況自行取舍WebGL模式是否開啟。

寫在最后

LayaAir引擎的問答社區(qū)：

http://ask.layabox.com/

總結(jié)

以上是生活随笔為你收集整理的LayaAir引擎开发HTML5最简单教程(面向JS开发者)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。