由于公司任务安排,需要笔者先去了解一下LayaAir引擎库,以用来完成公司将要启动的大数据可视化项目,需要借助LayaAir引擎实现复杂的动画。笔者花两天时间将LayaAir引擎的技术文档浏览了一遍,有了一个大致的印象。 LayaAir是一个轻量级、易上手的游戏引擎库,支持ActionScript3、TypeScript、JavaScript三种语言进行开发。同时他能够支持2D,3D,VR ,AR,时间轴动画,缓动、UI系统、粒子动画、骨骼动画、物理系统等动画构建。 LayaAir官网
大致浏览了一下技术文档,总的来说,JavaScript来开发,编码API学习上并没有太大难度,LayaAir引擎封装了在动画制作中需要的各种组件,直接引用就可以了,不过对于笔者这种代码开发人员,他的动画制作就有点不太友好了。 短时间的学习,让笔者感觉,使用这个引擎库,更像是用简单的代码,去调用复杂的动画。动画的制作难度高于代码的编写。
这个IDE是引擎推荐编辑器,感觉跟VSCode很相似,包含整个游戏制作流程的便利功能,包括:
LayaAir IDE界面
//初始化引擎
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开发中有了一种面向对象开发的感觉。
(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
目录下,我们可以直接引用绘制文件。
laya.display.Animation
类加载。Laya.Tween
去加载缓动动画,常用语游戏中道具放入背包,对话框弹出关闭等,提升游戏UI体验的重要因素之一。时间轴动画制作页