HTML5是一种热门的跨平台开发技术，随着引擎技术的发展，如今LayaAir引擎的产品性能已达到原生APP的水准，甚至可以直接用于开发APP、HTML5、Flash的多端版本产品。认真学习完本篇教程，可以帮您打开全平台开发之门。

 

　　LayaAir支持ActionScript3、TypeScript、JavaScript三种语言，因此入门教程也分为三个版本，本篇文章是面向ActionScript3程序员的版本。

 

　　另外，本篇LayaAir引擎入门教程是面向已拥有一定开发基础的程序员，如果对本篇文章中涉及的开发语言尚不熟悉的开发者，请先行学习掌握相关的语言基础后再阅读本文。

 

　　特别强调一下，通过与一些早期参与测试的开发者反馈交流，发现一个很重要的问题，那就是很多有经验的程序员自以为对Flash开发模式很熟悉了，跳过教程中的步骤，直接照着DEMO代码写，出现了报错走不通的情况。而严格遵寻教程中指引，一步一步操作的开发者，并未出现问题。因此，建议无论是新手还是老手，一定要在第一次使用LayaAir引擎开发时，严格遵照本篇教程的步骤操作，直到正确完成第一个DEMO。

 

　　1.1代码编辑器的准备

 

　　对于AS3程序员来说，最常用的就是Flash Builder和FlashDevelop。如果以上两种编辑器都没有安装，请任选以上两种编辑器工具之一，并下载安装。本文以Flash Builder编辑器为代码开发环境进行介绍。

 

　　1.2 LayaAirIDE下载

 

　　一个强大的可视化编辑工具，可以大幅提升开发效率，也可以交由美术和策划直接使用，减轻代码开发压力。LayaAirIDE正是一款可视化集成开发工具，当前已集成代码编辑器，UI、粒子、动画等常用可视化编辑工具，还支持DragonBones骨骼编辑器、tileMapEditor地图编辑器等第三方工具。在系统方面，LayaAirIDE支持windows7或以上的windows系统，以及MAC系统。

 

　　LayaAir最新版本的官方下载链接：

 

　　1.3 LayaAir Engine下载

 

　　LayaAir Engine分为AS3\TS\JS三个版本，本篇仅介绍AS3版本。

 

　　下载解压后，我们可以看到AS3版本的目录结构如下图所示：

 

　　“LayaAirSamples”目录内为FlashDevelop工程的引擎基础库示例代码。

 

　　“LayaUISample”目录内为LayaAirIDE的UI使用示例代码。

 

　　“libs”引擎代码目录，LayaAir引擎代码处于该目录的src子目录中。

 

　　“laya.js.exe”为AS3代码编译器，用于将AS3代码编译为JS代码。

 

　　“playerglobal.swc”用于替换AS3原生编译器SDK，去除原生API语法提示。

 

　　“入门教程.doc”是新手必读文档，保障引擎开发环境的正确配置。

 

　　1.4 安装Google Chrome浏览器

 

　　使用Laya.js.exe进行代码编译后，默认调用Chrome浏览器打开运行，因此，建议安装此浏览器进行项目调试。

 

　　要想使用AS3作为HTML5的开发语言，需要通过laya.js.exe编译器将AS3代码编译为JS代码才可以运行。下面将针对Flash Builder的编译环境配置进行说明。

 

　　步骤一：打开Flash Builder，找到“外部工具 配置”并打开该配置窗口。

 

　　步骤二：在配置窗口内，右键选中“程序”，点击“新建”，打开新建配置窗口。

 

　　步骤三：首先修改外部程序名称为“LayaCompiler”。然后点击“浏览文件系统”找到“laya.js.exe”或者直接复制”laya.js.exe”的路径粘贴到“位置”输入栏。最后在“自变量”栏里输入"${project_loc}\.actionScriptProperties;iflash=false"，最后点击”应用“即可完成本次配置。

 

　　步骤一： 打开Flash Builder，在菜单栏里点“文件”，然后选中“新建”点击 “?ActionScript项目”，进入创建项目的窗口。

 

　　步骤二： 在“项目名”输入栏里输入项目名称，然后在“文件夹”输入栏里输入项目存储目录或者是点击“浏览”选择存储的目录。最后点击“下一步”进入引擎编译与引擎库配置的“构建路径”窗口。

 

　　步骤三： 在构建路径的配置窗口里，点击“添加SWC”，按下图步骤的操作，将引擎包里的“playerglobal.swc”添加进来。然后删除系统自带的编译SDK，仅保留“playerglobal.swc”即可。最后点击“源路径”配置引擎库。

 

　　步骤四：在“源路径”面板点击“添加文件夹”，输入“引擎库所在目录”或点击“浏览”选择“引擎库所在目录”，然后点击确定和完成，即完成了引擎库的导入。

 

　　步骤一：菜单栏 “文件” 中选中 “新建”，单击“ActionScript类”，打开新建类文件的窗口。

 

　　步骤二：在名称栏输入HelloLayabox，点击 “完成”新建一个ActionScript类

 

　　步骤三：将HelloLayabox.as设置为默认应用程序后，然后将一个“Hello Layabox”的文本添加到舞台，代码如下：

 

　　步骤四：完成代码编写后，使用之前配置的编译器，开始编译，编译完成后会自动启动chrome运行代码。

 

　　运行结果如下图所示：

 

　　步骤五：“Hello Layabox”虽然显示出来了，但是太简陋了，下面我们就让“Hello Layabox”变的好看一些，代码如下：

 

　　运行结果如下图所示：

 

　　至此，如果您能跟随本篇入门教程，完成上图的显示，恭喜您入门成功，我们已经完成了第一个采用AS3语言开发的HTML5程序，也说明了LayaAir的开发环境配置无误。更多LayaAir引擎开发的API使用方法，请前往官网Layabox开发者中心查看在线API与在线DEMO。

 

　　在线API文档地址：

 

　　在线DEMO文档地址：

 

　　LayaAir引擎默认采用Canvas模式渲染，如果想要启动WebGL模式，需要在初始化舞台的时候的进行设置，例如：

 

　　默认Canvas模式渲染的写法为

 

　　WebGL模式渲染的AS3写法为

 

　　开启WebGL模式后，在支持WebGL的环境下，会优先采用WebGL 3D模式渲染，在不支持WebGL的环境下，会自动切换为Canvas 2D渲染模式。

 

　　启用WebGL模式的LayaAir引擎，在FPS性能方面可以媲美APP，也超出Canvas模式很多，但编译出的JS文件体积也会变大，所以开发者可以依据项目自身情况自行取舍WebGL模式是否开启。

 

　　在本篇文章中仅对引擎部分进行了入门级指引，请大家保持对Layabox开发者中心的关注，我们更多教程会逐步的丰富起来，及时更新到开发者中心。感谢大家的信赖，在开发过程中如有任何问题，请及时通过问答社区反馈给我们，我们将尽最大的努力快速处理和解决。