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

一、總結

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

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

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

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

序

HTML5是一種熱門的跨平台開發技術，隨着引擎技術的發展，如今LayaAir引擎的產品性能已達到原生APP的水准，甚至可以直接用於開發APP、HTML5、Flash的多端版本產品。認真學習完本篇教程，可以幫您打開全平台開發之門。

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

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

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

第一節開發前的准備

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

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

http://ldc.layabox.com/

LayaAirIDE下載解壓后的目錄結構，如下圖所示：

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

第二節創建項目

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

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

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

第三節顯示文字“Hello Layabox”

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

步驟二：按建步驟一的方式，還在bin目錄下，創建一個HelloLayabox.html的文件，點擊打開該文件編寫如下圖的HTML代碼。這里包括了引擎庫與程序代碼的引用。（Tips:如果項目代碼里涉及中文，需要在HTML里設置好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，修改后，該頁就會成為調試運行(按F5)的入口主頁。

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

//創建舞台，默認背景色是黑色的 Laya.init(600, 300); var txt = new Laya.Text(); //設置文本內容 txt.text = "Hello Layabox"; //設置文本顏色為白色，默認顏色為黑色 txt.color = "#ffffff"; //將文本內容添加到舞台 Laya.stage.addChild(txt);

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

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

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