在网上看到这样一篇文章，称5分钟可以学会用AS3开发html5游戏，你认为可能吗，网页游戏有那么容易开发吗，有那么容易学会吗？今天IT培训网小编就来给大家详细介绍下！

什么是AS3？

AS3全称是ActionScript 3.0 ，它是一种强大的面向对象编程语言，它标志着 Flash Player Runtime 演化过程中的一个重要阶段。设计 ActionScript 3.0 的意图是创建一种适合快速地构建效果丰富的互联网应用程序的语言，这种应用程序已经成为 Web 体验的重要部分。

为什么选择用AS3开发HTML5？有什么优略势？

一直以来，很多as3开发者都有一个疑虑，是否能使用AS3开发JS。其实这个疑虑是多余的，经过一段时间的使用，通过LayaAir编译器，用AS3开发html5应用和开发AS3应用程序没什么区别，写法和工具链都没变，非常得心应手。使用LayaAir编译器编译出来的JS和AS3是能一一对应上的。

那么如何用AS3开发html5游戏呢？

我用AS3开发过很多游戏，也算是一个老用户了，不仅实现了自己的游戏梦，也有很大的成就感，

作为一个AS3的老用户，曾经用它开发很多游戏，实现了自己的游戏梦，有着无比的成就感。在Adobe放弃Flash，整个市场偏向HTML5后，一度很迷茫，这么好的语言难道就要放弃吗。LayaAir的出现，让我看到了希望。

LayaAir是一套HTML5渲染引擎，底层利用WebGL，Canvas渲染，同时支持ActionScript3，TypeScript，Javascript三种语言开发，可以直接跑在微信，微博，QQ，手机浏览器，PC甚至电视上，是真正的跨平台，一套代码，可以同时发布成三端（手游APP，HTML5，Flash），设备覆盖率有着无比的优势。

引擎功能也比较全面，2D，3D，VR，UI，物理都有支持，游戏中需要用到的工具和类库也一应俱全，并且以渲染性能高著称，真的是为了游戏开发而设计的引擎。官网也有各种应用Demo

下面是我用LayaAir的AS3语言开发的示例

package {

import laya.display.Sprite;

public class Main {

public function Main() {

//初始化引擎

Laya.init(1136, 640);

var sp:Sprite = new Sprite();

sp.graphics.drawRect(0, 0, 100, 100, "#ff0000");

sp.pos(100, 100);

Laya.stage.addChild(sp);

}

}

}

编译为JS后，代码如下：

//class Main

var Main=(function(){

function Main(){

Laya.init(1136,640);

var sp=new Sprite();

sp.graphics.drawRect(0,0,100,100,"#ff0000");

sp.pos(100,100);

Laya.stage.addChild(sp);

}

__class(Main,'Main');

return Main;

})()

相比而言，除了类的写法不同，其他代码都是一样的，代码都是一一对应的。用AS3语言开发相比直接用JS，甚至TS，还有很多优势：

1. AS3是强类型语言，代码提示非常方便

2. 支持面向对象编程，比JS甚至TS使用面向对象更方便

3. 支持编译，在运行之前发现错误并提前解决，而不是运行时解决

4. 支持工具强大，FlashDevelop FlashBuilder工具成熟

下面说一下从AS3到LayaAir有哪些相同和不同。

相同点：LayaAir用到了AS3的基础语法，比如基础的String，Number等类型，函数，类，接口，继承，这些面向对象的写法都可以随意使用，类库不用flash开头的类库，用LayaAir自己封装好的类库即可（可以引入LayaAir提供的playerglobal.swc，屏蔽掉flash类库代码提示），写起来和平时写AS3应用没有太多区别，体验一致，这点很赞呀。很多AS3的逻辑处理，可以不用更改直接能用。

不同点：一些不同点是AS3和JS的差异造成的，一些是对Flash API的简化，  LayaAir的Api设计以简化，易用，高性能为准则，很多不同也是基于这个原因导致的。

1. AS3中的int类型，编译到JS后，使用的是Number，因为js只有Number，平时不会遇到什么问题，但是碰到自动强转的逻辑，这块需要用parseInt()函数处理下。

2. AS3中Array对象有个sortOn方法进行排序，由于JS没有，所以也不支持，可以用sort方法代替

3. 事件写法不同，LayaAir从性能及易用性上，对事件进行了简化，增强，参照node.js的风格，比如sp.on(“click”, this, onSpClick); ，这里就是给sp对象增加了一个click事件监听，比addEventListener少写了不少代码（js不能压缩，所以这样写能减少代码大小）

移除一个事件

sp.off(Event.CLICK, this, onSpClick);

移除一个对象所有类型为click的事件(AS3没有)

sp.offAll(Event.CLICK);

移除一个对象身上的所有事件(AS3没有)

sp.offAll();

监听某个事件一次，监听被触发后会自动移除(AS3没有)

sp.once(Event.CLICK, this, onSpClick);

事件监听携带自定义数据，并返回

sp.on(Event.CLICK, this, onSpClick,["parm1",2,"parm3"]);

//自定义数据以参数的形式，放到前面，默认事件返回在后面

private function onSpClick(parm1:String, parm2:Number, parm3:String,e:Event) {

trace(parm1,parm2,parm3,e);

}

是否监听过某种事件

sp.hasListener(Event.CLICK);

派发一个事件

p.event(Event.CLICK, "参数");

自定义事件示例（无需实例自定的Event类，直接传递数据）

//监听一个自定义事件

sp.on(“myevent”,this,onMyEvent)

private function onMyEvent(parm:String){

trace(parm);

}

//派发一个自定义事件

sp.event(“myevent”,”this is a parm”);

另外特别需要注意的一点是，默认精灵是没有宽高的（出于性能考虑），可以通过sp.size(100,100)设置宽高，或者设置sp.autoSize=true，否则是点击不了的，但 Laya自带的UI系统会自动计算宽高，所以一般无需自行设置宽高

更多关于鼠标事件的介绍，可以参考官网教程。

4. 在LayaAir内，出于性能考虑，Sprite精灵默认没有自动设置宽高（默认都是0），可以通过设置width和height属性设置，或者通过size()函数设置，宽高只用来作为碰撞的依据，不再对显示大小进行影响。还可以设置sp.autoSize=true，让系统帮你自动计算宽高，但这样会消耗一定的性能，在LayaAir的UI系统内，会自动维护宽高，所以无需设置。

5. this,在as3监听事件是不需要传入this的，但是js执行函数必须有执行域，所以需要传递this域进行，就是函数执行的环境，这也是js为什么比as3快的原因之一。

6. LayaAir去掉了Flash内的DisplayObject，DisplayContainer，Bitmap，Shape等类，只保留了Sprite类，对API进行了简化，只要学会一个Sprite就够了，使用时也不用抉择到底用哪个好，并且Sprite即可当显示对象，又可当容器使用，性能非常快。

7. LayaAir内，width，height和scaleX，scaleY不再有关联，即设置width不会影响scaleX，其实可以把宽高立即为碰撞体大小，只是用来做碰撞依据的。

8. TextField，TextFormat被Text类代替，API也进行简化，通过HTMLDivElement类，能实现HTML富文本。

9. BitmapData被Texture代替

10. XML和XMLList被JS原生的DomXML代替，尽量减少xml使用，性能真的不怎么样

11. Flash的时间轴动画，可以通过LayaAirIDE提供的工具转换之后，在引擎内播放

12. LayaAir内置了Tween，Timer，Loader，Sound管理类，做游戏更加方便

13. 引擎模块分为以下几个部分：

a) laya.core是核心包，封装了显示对象渲染，事件，时间管理，时间轴动画，缓动，消息交互，socket，本地存储，鼠标触摸，声音，加载，颜色滤镜，位图字体等

b) laya.webgl封装了webgl渲染管线，如果使用webgl渲染，可以在初始化时调用Laya.init(1000,800,WebGL)进行开启，如果设备不支持WebGL，会改用Canvas模式绘制

c) laya.ani是动画模块，包含了swf动画，骨骼动画等

d) laya.filter包含更多webgl滤镜，比如外发光，阴影，模糊以及更多

e) laya.html封装了html动态排版功能

f) laya.ui.提供了制作UI的30多种常见UI组件

g) laya.tilemap提供tileMap解析支持

14. 关于性能方面注意事项，可以参考如下：

LayaAir 作为 HTML5 引擎，能够在各种平台上运行，包括个人计算机、移动设备和平板电脑。 在移动设备硬件性能弱于 PC 的背景下，我们对性能的需求显得更加重要。 LayaAir 引擎设计之初，就以性能为第一目标，在引擎内做了大量的性能优化。 本文档通过代码示例和使用案例，为部署应用程序的开发人员概括介绍了最佳做法。

主题包括：

代码执行基本原理

基准测试

内存优化

图形渲染性能

减少CPU使用量

其他优化策略

如果开发者不能发挥好引擎的优势，游戏最终的性能体验或将无从谈起。因此，在制作游戏过程中，掌握游戏以及引擎的优化技巧还是非常有必要的。

15. LayaAir提供一个可视化的IDE工具，方便快速开发游戏，关于IDE相关教程，可以参看官网的视频教程。

以上就是关于用AS3开发html5游戏的方式，你学会了吗，作为一名AS5开发者用LayaAir引擎开发将是非常轻松的，很多写法逻辑算法经验都可以复用，开发环境也可以使用自己之前的熟悉的环境。用熟悉的语言开发HTML5应用，感觉爽多了。

如果你有学习上的问题不能解决，请及时联系IT培训网在线老师，我们会第一时间解决疑难问题，助你在游戏开发的路上越走越好！