12321官方游戏论坛

 找回密码
 立即注册
查看: 4682|回复: 6

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

[复制链接]

76

主题

131

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
17962
发表于 2018-1-12 10:22:54 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
作为一个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?m=content&c=index&a=show&catid=33&id=131
15. LayaAir提供一个可视化的IDE工具,方便快速开发游戏,关于IDE相关教程,可以参看官网的视频教程。
16. 先从官方示例入手,能更快的了解LayaAir有哪些功能,如何使用
18. QQ交流群:104144216
总结:如果你是一名AS3开发者,用LayaAir引擎开发将是非常轻松的,很多写法逻辑算法经验都可以复用,开发环境也可以使用自己之前的熟悉的环境。用熟悉的语言开发HTML5应用,感觉爽多了。

回复

使用道具 举报

61

主题

2万

帖子

3万

积分

管理员

野心家

Rank: 9Rank: 9Rank: 9

积分
38160
QQ
发表于 2018-1-12 18:10:59 | 显示全部楼层
支持!
既然无法一起出生,  那就一起祸害苍生。
回复

使用道具 举报

0

主题

30

帖子

36

积分

新手上路

Rank: 1

积分
36
QQ
发表于 2018-1-12 19:17:12 | 显示全部楼层
支持!虽然看不懂
回复

使用道具 举报

1

主题

25

帖子

109

积分

注册会员

Rank: 2

积分
109
发表于 2018-10-14 16:06:00 | 显示全部楼层
666666666666666666666
回复

使用道具 举报

0

主题

5

帖子

12

积分

新手上路

Rank: 1

积分
12
发表于 2021-4-15 15:49:06 | 显示全部楼层

支持!虽然看不懂
回复

使用道具 举报

20

主题

7181

帖子

1万

积分

论坛元老

Meruri

Rank: 8Rank: 8

积分
14525
QQ
发表于 2021-11-26 21:42:07 | 显示全部楼层
似乎挖到宝藏了
回复

使用道具 举报

0

主题

1

帖子

9

积分

新手上路

Rank: 1

积分
9
发表于 2022-11-29 22:19:19 | 显示全部楼层
加賴pp2263很**蕩的****姐姐#可無套#內射#超級會夾#可吞精#可舔#可摳#可插


雨馨 166.D.28歲
** **姐姐   
可無套 內射 超級會夾
很**蕩很敢玩的女生
配合無套吹含舔
可吞精可舔可摳可插
line:pp2263
**egram賬號:fb2899










本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
加賴pp2263很**蕩的****姐姐#可無套#內射#超級會夾#可吞精#可舔#可摳#可插
加賴pp2263
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|12321官方游戏论坛  

GMT+8, 2024-11-21 16:59 , Processed in 0.043304 second(s), 27 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表