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页面结合，现在还比较模糊。