LayaAir引擎学习经历

  由于公司任务安排,需要笔者先去了解一下LayaAir引擎库,以用来完成公司将要启动的大数据可视化项目,需要借助LayaAir引擎实现复杂的动画。笔者花两天时间将LayaAir引擎的技术文档浏览了一遍,有了一个大致的印象。   LayaAir是一个轻量级、易上手的游戏引擎库,支持ActionScript3、TypeScript、JavaScript三种语言进行开发。同时他能够支持2D,3D,VR ,AR,时间轴动画,缓动、UI系统、粒子动画、骨骼动画、物理系统等动画构建。 LayaAir官网

个人心得:

  大致浏览了一下技术文档,总的来说,JavaScript来开发,编码API学习上并没有太大难度,LayaAir引擎封装了在动画制作中需要的各种组件,直接引用就可以了,不过对于笔者这种代码开发人员,他的动画制作就有点不太友好了。   短时间的学习,让笔者感觉,使用这个引擎库,更像是用简单的代码,去调用复杂的动画。动画的制作难度高于代码的编写。

LayaAir IDE:

  这个IDE是引擎推荐编辑器,感觉跟VSCode很相似,包含整个游戏制作流程的便利功能,包括:

  • 代码开发
  • UI编辑器
  • 粒子编辑器
  • 时间轴动画
  • 场景编辑器
  • 3D支持
  • 脚本扩展
  • 预设
  • APP打包
  • Flash发布
  • JS混淆与压缩
  • 第三方工具链转换工具(SWF、Unity3D、3Dmax、TiledMap、Spine、龙骨……)

LayaAir IDE界面

For Example:

  1. 首先说基本的文本创建。
//初始化引擎
Laya.init(1136,640);
var txt = new Laya.Text();
//设置文本内容
txt.text = "hello_world";
//设置文本颜色
txt.color = "#ffffff";
Laya.stage.addChild(txt);

  利用Laya.init(width,height)创建舞台或者说画板,参数是舞台的宽高度,然后构建文本对象,设置对象属性,详细可以参考API。最后将构建好的文本对象加入舞台让他显示出来。   从文本创建我们可以看到,我们将舞台构建后,可以任意的想舞台上添加我们构建好的元素,让我在JS开发中有了一种面向对象开发的感觉。

  1. 矢量图的绘制   LayaAir引擎提供矢量图的绘制API,可以绘制直线、折线、曲线、图形等等。
(function()
{
    var Sprite = Laya.Sprite;
    var Stage  = Laya.Stage;
    var WebGL  = Laya.WebGL;
    var sp;
    (function()
    {
        //初始化舞台
        Laya.init(500, 300, WebGL);
        drawSomething();
    })();
    function drawSomething()
    {
        sp = new Sprite();
        Laya.stage.addChild(sp);
        //画直线
        sp.graphics.drawLine(10, 58, 167, 58, "#ff0000", 5);
    }
})();

  出去上述代码实现方式外,我们还可以使用LayaAir IDE的设计模式去绘制。

设计模式界面

  绘制完成后,绘制文件会在我们../laya/page目录下,我们可以直接引用绘制文件。

  1. 然后我们说最主要内容——动画。笔者大概关注了图集动画,缓动动画,时间轴动画。

  • 图集动画:将图片做成图片集,然后按顺序播放,常用语游戏人物行走,攻击,死亡等动画的制作。在代码中通过laya.display.Animation类加载。
  • 缓动动画:利用Laya.Tween去加载缓动动画,常用语游戏中道具放入背包,对话框弹出关闭等,提升游戏UI体验的重要因素之一。
  • 时间轴动画: 这个厉害了,在笔者看来,复杂动画都需要搞他完成,他跟Android 的补间动画一样,不过他是像制作Flash一样按帧制作。

时间轴动画制作页

  1. LayaAir引擎还封装了通络通信(基于XMLHTTPRequest)、WebSocket发送与接收数据、JSONP跨域读取数据等。

首次学习后存在问题:

  1. 这个不太适合前端开发和Native开发快速上手,他更适合动画专业的同学去使用。
  2. 如果在我们可视化项目中引入它的技术,只能解决动画的问题,页面的开发还是得用常规的H5开发去完成。
  3. 如何将通过该引擎技术完成的动画页面与常规H5页面结合,现在还比较模糊。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

推荐几个比较炫酷效果的开源项目和开源库

上次推送了一篇关于推荐开源项目和开源库的文章,引起的反响不错,那我就持续搞下去,继续分享我收藏和看到的不错的开源库。相信这些推送应该对大家的帮助很大。 Shin...

3418
来自专栏IMWeb前端团队

polymer组件化与vm特性

一、Polymer Polymer是Google在2013年的Google I/O大会上提出了一个新的UI框架。Polymer的实现使用了WebComponen...

2638
来自专栏IMWeb前端团队

react css组织的另一种选择styled-components

本文作者:IMWeb linq 原文出处:IMWeb社区 未经同意,禁止转载 写 React 的同学肯定纠结过 CSS 该怎么组织的问题。传统 WEB...

25610
来自专栏前端杂货铺

reflow和repaint(摘录自张鑫旭的翻译)

//正文开始 关于回流(reflows)与重绘(repaints),我已经在twitter和delicious上发布,但是并没有在演讲中提到或是以文章形式发布。...

3434
来自专栏Youngxj

给网页添加一个QQ客服悬浮框

4807
来自专栏编程直播室

源码发布:一个Angular写得Markdown编辑器 参考资料

1722
来自专栏Android 开发者

[译] 带你领略 ConstraintLayout 1.1 的新功能

1932
来自专栏前端小作坊

CSS动画的性能优化

在Web页面中使用动画效果已经不是什么稀奇的事情了。但凡优秀的UI界面都会有一些点缀用的动画效果。举个例子,Stripe Checkout小组通过UI动画效果来...

1132
来自专栏有刻

字体图标的绘制和使用技巧

39110
来自专栏PHP在线

手机网页用Bootstrap还是jQuery Mobile

很多新手纠结这个问题?两个框架都能够支持做手机网页,那么它们的区别是什么呢,适用场景是什么呢?下面我们从这几个方面比较这两个框架:解决问题、功能、适用场景。 ...

52010

扫码关注云+社区

领取腾讯云代金券