LayaAir五分钟教会你：如何用AS3开发HTML5游戏

jekeyhui99

作为一个AS3的老用户，曾经用它开发很多游戏，实现了自己的游戏梦，有着无比的成就感。在Adobe放弃Flash，整个市场偏向HTML5后，一度很迷茫，这么好的语言难道就要放弃吗。LayaAir的出现，让我看到了希望。 LayaAir 是一套HTML5渲染引擎，底层利用WebGL，Canvas渲染，同时支持ActionScript3，TypeScript，Javascript三 种语言开发，可以直接跑在微信，微博，QQ，手机浏览器，PC甚至电视上，是真正的跨平台，一套代码，可以同时发布成三端（手游 APP，HTML5，Flash），设备覆盖率有着无比的优势。 引擎功能也比较全面，2D，3D，VR，UI，物理都有支持，游戏中需要用到的工具和类库也一应俱全，并且以渲染性能高著称，真的是为了游戏开发而设计的引擎。官网也有各种应用Demo, http://layaair.ldc.layabox.com/demo/?Sprite_Container 为什么选择用AS3开发HTML5？有什么优略势？一 直以来，很多as3开发者都有一个疑虑，是否能使用AS3开发JS。其实这个疑虑是多余的，经过一段时间的使用，通过LayaAir编译器，用AS3开发 html5应用和开发AS3应用程序没什么区别，写法和工具链都没变，非常得心应手。使用LayaAir编译器编译出来的JS和AS3是能一一对应上的。 下面是我用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系统会自动计算宽高，所以一般无需自行设置宽高 更多关于鼠标事件的介绍，可以参考官网教程：     http://ldc.layabox.com/index.php ... p;catid=7&id=58 4. this,在as3监听事件是不需要传入this的，但是js执行函数必须有执行域，所以需要传递this域进行，就是函数执行的环境，这也是js为什么比as3快的原因之一。 5. LayaAir去掉了Flash内的DisplayObject，DisplayContainer，Bitmap，Shape等类，只保留了 Sprite类，对API进行了简化，只要学会一个Sprite就够了，使用时也不用抉择到底用哪个好，并且Sprite即可当显示对象，又可当容器使 用，性能非常快。 6. 在LayaAir内，出于性能考虑，Sprite精灵默认没有自动设置宽高（默认都是0），可以通过设置width和height属性设置，或者通过 size()函数设置，宽高只用来作为碰撞的依据，不再对显示大小进行影响。还可以设置sp.autoSize=true，让系统帮你自动计算宽高，但这 样会消耗一定的性能，在LayaAir的UI系统内，会自动维护宽高，所以无需设置。 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. 关于性能方面注意事项，可以参考下面文章 http://ldc.layabox.com/index.php ... catid=33&id=131 15. LayaAir提供一个可视化的IDE工具，方便快速开发游戏，关于IDE相关教程，可以参看官网的视频教程。 16. 先从官方示例入手，能更快的了解LayaAir有哪些功能，如何使用 http://layaair.ldc.layabox.com/demo/?Sprite_Container 17. 引擎API网址: http://layaair.ldc.layabox.com/api/ 18. QQ交流群：104144216 官方社区：http://ask.layabox.com/ 总结：如果你是一名AS3开发者，用LayaAir引擎开发将是非常轻松的，很多写法逻辑算法经验都可以复用，开发环境也可以使用自己之前的熟悉的环境。用熟悉的语言开发HTML5应用，感觉爽多了。