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

作为一个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?m=content&c=index&a=show&catid=7&id=58

  1. this,在as3监听事件是不需要传入this的,但是js执行函数必须有执行域,所以需要传递this域进行,就是函数执行的环境,这也是js为什么比as3快的原因之一。
  2. LayaAir去掉了Flash内的DisplayObject,DisplayContainer,Bitmap,Shape等类,只保留了Sprite类,对API进行了简化,只要学会一个Sprite就够了,使用时也不用抉择到底用哪个好,并且Sprite即可当显示对象,又可当容器使用,性能非常快。
  3. 在LayaAir内,出于性能考虑,Sprite精灵默认没有自动设置宽高(默认都是0),可以通过设置width和height属性设置,或者通过size()函数设置,宽高只用来作为碰撞的依据,不再对显示大小进行影响。还可以设置sp.autoSize=true,让系统帮你自动计算宽高,但这样会消耗一定的性能,在LayaAir的UI系统内,会自动维护宽高,所以无需设置。
  4. LayaAir内,width,height和scaleX,scaleY不再有关联,即设置width不会影响scaleX,其实可以把宽高立即为碰撞体大小,只是用来做碰撞依据的。
  5. TextField,TextFormat被Text类代替,API也进行简化,通过HTMLDivElement类,能实现HTML富文本。
  6. BitmapData被Texture代替
  7. XML和XMLList被JS原生的DomXML代替,尽量减少xml使用,性能真的不怎么样
  8. Flash的时间轴动画,可以通过LayaAirIDE提供的工具转换之后,在引擎内播放
  9. LayaAir内置了Tween,Timer,Loader,Sound管理类,做游戏更加方便
  10. 引擎模块分为以下几个部分:

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解析支持

文章转载自 开源中国社区 [http://www.oschina.net]

时间: 2024-07-28 16:06:39

LayaAir五分钟教会你:如何用AS3开发HTML5游戏的相关文章

五分钟诉山寨商抄袭旗下游戏法院已正式立案

IT时报 刘超 <开心农场>是五分钟公司数年前推出的一款SNS游戏,在众多社交网站上风靡长达两年时间,也被"山寨"了不下十次.近期,五分钟公司又推出了一款社交游戏<小小战争>,也很快被其他公司"山寨". 不过这一次五分钟公司不再保持沉默,"我们要维权了",五分钟CEO郜韶飞表示,中国社交游戏侵权第一案由此诞生. 法院已正式立案 据悉,<小小战争>是今年8月份上线的,这款游戏是以部落发展.战争和好友互动为主导的社

五分钟徐城称与腾讯合作不影响其他合作伙伴

10月14日下午消息,SNS应用开心农场研发公司五分钟COO徐城今日表示,开心农场与腾讯采用的是特殊合作方式,不会影响到已经与开心农场合作的伙伴.另外五分钟也并无任何计划出售公司或者开心农场游戏. 日前有报道称"腾讯一次性购买开心农场游戏",并被媒体解读为"收购".对此徐城强调和腾讯是一种特殊的合作方式,并不是收购或出售.他同时表示五分钟目前无任何出售公司或者开心农场游戏的计划. 由于涉及到合作保密协议,徐城并未透露与腾讯采取的是何种"特殊"合作

社交游戏侵权第一案:五分钟状告恺英网络

<开心农场>是五分钟公司数年前推出的一款SNS游戏,在众多社交网站上风靡长达两年时间,也被"山寨"了不下十次.近期,五分钟公司又推出了一款社交游戏<小小战争>,也很快被其他公司"山寨". 不过这一次五分钟公司不再保持沉默,"我们要维权了",五分钟CEO郜韶飞表示,中国社交游戏侵权第一案由此诞生. 法院已正式立案 据悉,<小小战争>是今年8月份上线的,这款游戏是以部落发展.战争和好友互动为主导的社交游戏,玩家可以

五分钟:开心网偷菜确属“山寨”

不知何时起,风靡网络的"偷菜"游戏在让网民享受乐趣的同时,开始与 "沉溺自闭"."现实焦虑"."不良取向"等负面标题随时绑定.一个种种萝卜白菜的简单小游戏,相继被媒体认定为少年网瘾.夫妻离婚.白领被炒的"罪魁祸首",由此引来不少炮轰,也成了众多社会学家.心理学家.教育学家们轮番上阵.高谈阔论的说书台. "这是游戏的罪过,还是社会太浮躁? "针对各种炮轰质疑,几个上海年轻创业者组成的偷菜游

五分钟有意进军西方称开发商应有商业头脑

(编译/Wendy)关于社交游戏中引入微交易的争论,不仅在西方有,中国目前也存在这个问题.中国<开心农场>开发商五分钟 首席运营官徐城在接受国外著名游戏网站Gamasutra的采访时谈到了这个问题. 无论是在西方社会还是在中国,对社交游戏究竟是通过各种玩法设置给玩家提供快乐的体验,还是利用心里上的操控,从而达到从玩家身上赚取更多钱的主要目的的争论一直没有停止.徐城表示:"不管是哪种方法,你的第一步肯定是要给玩家创造幸福感,因为无论你操控得多好,你始终需要为玩家带来幸福的体验,否则人们

五分钟裁员启示录:中国社交游戏业或集体转型

6月25日特稿受http://www.aliyun.com/zixun/aggregation/6826.html">移动游戏.网页游戏崛起的冲击,中国社交游戏行业正在面临一场危机. 5月31日,以开发<开心农场>知名的国内社交游戏厂商五分钟被爆解散.对此该公司COO徐诚通过微博称,五分钟正在经历创业过程中不可避免的一次挫折,暂时没有什么大碍. 一位五分钟离职员工透露,他是突然收到裁员通知的,此前除了2011年底的员工大会上,公司高层曾表示公司出现亏损外,没有任何迹象表明五分钟

哪个大婶能不能教会我如何用递归计算费波拉契数列的程序?要注释的

问题描述 哪个大婶能不能教会我如何用递归计算费波拉契数列的程序?要注释的 哪个大婶能不能教会我如何用递归计算费波拉契数列的程序?要注释的 解决方案 void foo(int x, int y) { if (x > 1000) return; if (x == y && x == 1) { printf("%d %d ", 1, 1); foo(x + y, x); return; } else { printf("%d ", x); foo(x

站长知心话:五分钟热血,是不能远行的列车

根据法新社2006年11月2日报道称,承载着当今社会无所不包的海量信息.使人类生活发生空前变迁的各色网站总数量已经攀升至1.01亿.百度一下这个世界,你我都为网狂.许多站长在网上安家的漫漫征途中感慨良多,下面.让知名站长与你分享心得!   (http://www.everbaidu.com) 一.chinaz.com阿飞 阿飞,原名姚剑军.中国站长站创始人. 1982年生人.目前身价千万. 1. 不管碰上了什么事,坚持下来了,对自己经常做总结并做调整,阶段性地做一些事情. 2. 量力而为.舍大取

五分钟快速打造美观实用的线上个人简历网站

  本文要介绍的 Resumator 能让你快速在在线制作个人简历.Resumator 建立起来的个人页面非常美观.大方,而且没有太多复杂流程,你需要做的是依照网站提供的字段进行填写,最终就能产生属于你的在线页面专属网址.不妨来试一试 Resumator 背后是由一家名为 Qwilr 的公司所提供,Qwilr 主要营运的项目为简单建立网页服务,结合易用性和所见即所得等编辑功能,用户能在在线制作出具有美感且动态的网页效果. 从无到有建立一个在线名片并不是很容易,有了 Resumator 交互式在线