专栏首页LayaboxLayaAir引擎入门教程:一篇学会用AS3语言开发HTML5(FlashDevelop开发环境)

LayaAir引擎入门教程:一篇学会用AS3语言开发HTML5(FlashDevelop开发环境)

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

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

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

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

第一节 开发前的准备

1.1代码编辑器的准备

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

1.2 LayaAirIDE下载

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

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

http://ldc.layabox.com/

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浏览器打开运行,因此,建议安装此浏览器进行项目调试。

第二节 配置FlashDevelop编译环境

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

步骤一:打开FlashDevelop,通过“Ctrl+F10”快捷键调出编辑宏面板。

步骤二:首先点击“添加”增加一条宏命令,然后选中刚刚增加的宏命令,在“Label”栏修改宏命令的菜单名称为“LayaJsCompiler”,以及在“Shortcut”栏设置宏菜单快捷键为“Alt+F5”(快捷键设置仅作参考,不要和别的快捷键冲突)

步骤三:在“Entries”栏的右侧位置点击“...”操作区域,打开“字符串集合编辑器”窗口,输入宏指令:

SaveAllModified
RunProcessCaptured|D:\LayaBox\LayaAir\laya.js.exe;"$(ProjectPath)";iflash=false;

(Tips:”D:\LayaBox\LayaAir\laya.js.exe“应为laya.js.exe的实际所在路径)

步骤四:点击”确定“完成宏指令配置后,已经完成宏命令“LayaJsCompiler”全部配置,并即时生效,直接点击“关闭”按钮即可。

第三节 新建FlashDevelop项目

步骤一:打开FlashDevelop,在“项目”菜单栏点击“新建项目”。

步骤二:选择”AS3 Project“类型,输入项目名称,选择项目存放位置后,点击“确定”完成新建项目的操作。

第四节 配置项目

4.1 引用引擎库

步骤一:在项目面板点击“项目属性”按钮,打开项目属性配置窗口。

步骤二:点击“添加类路径”选择LayaAir引擎所在目录,然后点击“确定”完成LayaAir引擎库的引用。

4.2 配置playerglobal.swc

步骤一:在新建的项目studyLayaAirAS3下添加一个libs文件夹。

步骤二:将下载解压后的LayaAir引擎根目录下“playerglobal.swc”通过鼠标点中拖拽的方式,拖到刚创建的libs文件夹下,并添加到库。

第五节 显示文字“Hello Layabox”

5.1 新建类文件HelloLayabox

步骤一:右键“src目录”添加一个新类。(提示:添加的类文件必须在src目录下,或者通过“添加类路径”引用进来,否则是无法被编译的)

步骤二:将类名称设置为HelloLayabox

5.2 在H5页面上显示“Hello Layabox”

步骤一:将HelloLayabox设为文档类

步骤二:将一个“Hello Layabox”的文本添加到舞台,代码如下:

package {
    import laya.display.Text;
    /** @author Charley */
    public class HelloLayabox 
    {         
        public function HelloLayabox() 
        {
            //创建舞台,默认背景色是黑色的
            Laya.init(600, 300);
            var txt:Text         = new Text();
                         
             //设置文本内容
            txt.text         = "Hello Layabox";
 
            //设置文本颜色为白色,默认颜色为黑色
            txt.color        = '#ffffff';
            
             //将文本内容添加到舞台 
            Laya.stage.addChild(txt);       
        }
           
    }
 }

步骤三:完成代码编写后,使用之前定义的编译快捷键(Alt+F5),把AS3代码编译成HTML5。

编译完成后,编译器自动启动chrome查看显示结果。

步骤四:如上图所示,“Hello Layabox”已经显示出来了,但是比较简陋,下面我们就让“Hello Layabox”变的更好看些,代码如下:

package {
    import laya.display.Text;
    /**        
    * @author Charley     
    */
    public class HelloLayabox 
    {         
        public function HelloLayabox() 
        {
            //创建舞台
            Laya.init(600, 300);//舞台默认背景色是黑色的
            var txt:Text   = new 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);
              
        }          
    }
 }

运行结果如下图所示:

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

在线API文档地址:

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

在线DEMO文档地址:

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

第六节 WebGL开启

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

默认Canvas模式渲染的写法为

Laya.init(600, 500);

WebGL模式渲染的AS3写法为

Laya.init(600, 500,WebGL);

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

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

写在最后

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

本文分享自微信公众号 - Layabox(layabox),作者:关註请点我☞

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-05-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 免费引擎开启收费模式,大家怎么看?

    Layabox引擎团队在1月19号推出了LayaAir 2.0引擎正式版的同时还推出了引擎的会员专属功能收费。有少数开发者对于免费引擎开始推出收费功能不太理解或...

    Layabox Charley
  • 谢成鸿:HTML5引擎将向全行业引擎领域发展

    由游戏日报、游品会联合长沙师范学院共同举办的“2015游戏行业未来峰会”于近日在湖南长沙成功举办。本届峰会的主题为“嬗变·未来”,聚焦游戏行业热点问题。在会上...

    Layabox Charley
  • LayaAir 2.0 正式版发布了,重要特性全面介绍

    自9月15日首次发布LayaAir 2.0 引擎测试版以来,历时4个多月,推出了4个2.0 beta版本,其中修复BUG若干,2D引擎与IDE优化与新增功能37...

    Layabox Charley
  • 电脑小白如何查看电脑配置?

    对于长期在网络中驰骋的人来说,看配置这种事根本都不算是问题。可是还是会有许多小白不明白电脑配置应该如何查看,性能如何辨别,所以有了这篇常识文章。

    简单并不简单
  • 剑指offer之面试题2:实现Singleton模式

    在上述代码中,Singleton1的静态属性Instance中,只有在instance为null的时候才创建一个实例以避免重复创建。

    Vincent-yuan
  • 2018-9-29-如何查看windows软件激活状态

    在windows和office激活异同这边文章里我们发现了windows和office的激活都依赖于一个叫WMI的东西。那么什么是WMI呢?、

    黄腾霄
  • Java & PhantomJs 实现html输出图片

    Java & PhantomJs 实现html输出图片 借助phantomJs来实现将html网页输出为图片 I. 背景 如何在小程序里面生成一张图,分享到朋...

    一灰灰blog
  • 轻松搭建--融云Android聊天工具

    融云支持客户端的二次开发,Android和ios两个版本,安卓是Java开发的,所以我就尝试构建一把。ios端的项目构建也在尝试中。前两天安卓客户端打包成功,基...

    不安分的猿人
  • JMeter定时器06

    前言 在默认情况下,jmeter发送每个请求之间是没有延时的,如果采用默认方式,如果线程数足够大,瞬间就会将服务器压死。再则在实际的业务过程中,请求之间是有一定...

    苦叶子
  • Power Pivot智能日期运用——非空函数(1)

    返回结果: 100。此写法类似于Min函数,只不过min返回的是标量,firstnonblank返回的是单行单列的表。

    逍遥之

扫码关注云+社区

领取腾讯云代金券