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

時間 2019-12-20

標籤 layaair 引擎開發 html5 html 最簡單教程面向開發者欄目 HTML5 简体版

原文原文鏈接

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

1、總結

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

切記：開發遊戲仍是得用遊戲引擎來開發，其實很簡單，引擎不少東西都幫你作了

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

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

序

HTML5是一種熱門的跨平臺開發技術，隨着引擎技術的發展，現在LayaAir引擎的產品性能已達到原生APP的水準，甚至能夠直接用於開發APP、HTML五、Flash的多端版本產品。認真學習完本篇教程，能夠幫您打開全平臺開發之門。程序員

LayaAir支持ActionScript三、TypeScript、JavaScript三種語言，所以入門教程也分爲三個版本，本篇文章是面向JavaScript程序員的版本。windows

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

若是您是第一次使用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);