当前位置: 首页 > news >正文

laya-spine动画的使用

laya2和laya3的spine动画在使用过程中并无太大区别,这里以laya3为例。

转换

首先将做好的spine动画按jison格式导出,导出完之后的文件应包括图集、图片和json类型的3个文件。然后再用laya的骨骼动画转换工具转换成laya内置的模式,转换后的文件包括图片和sk类型的2个文件。如下图所示:

加载

在场景中直接创建

在场景中右键选择=>2D骨骼动画=>Skeleton,直接创建Skeleton类型的节点,然后在属性面板=>Skeleton=>Source中选择对应的资源,这时候在下侧SkinName和AnimationName中就会显示对应的下拉列表名称。这时候如果勾选Preview,在编辑模式下即可直接观察对应动画的播放情况。

在脚本中load

使用load方法加载成功后,将返回一个Templet模版类型的对象,然后使用buildArmature方法创建对应的Skeleton类型的对象。

值得一提的是buildArmature有0、1、2三种类型的创建方式,其中0不支持换装,1、2支持换装但性能开销更大。1使用了动画缓冲区,使得内存更大,2则实时计算,故内存开销小,计算量大。

Laya.loader.load("skeleton/Dragon/Dragon.sk").then((templet: Laya.Templet) => {let skeleton = templet.buildArmature(0);});// 另一种方式,没有本质区别,在Skeleton内部也是调用Laya.loader.load方法let sk = new Laya.Skeleton();sk.load("skeleton/Dragon/Dragon.sk", Laya.Handler.create(this, (ske: Laya.Skeleton) => {console.log("加载完成");}));

使用

播放

        将skeleton节点放到场景中后,直接调用play方法即可播放。

            skeleton.playbackRate(2); // 设置播放速率, 数字越大, 速度越快skeleton.play(0, true, true, 0, 0, true, false); // 播放skeleton.paused(); // 暂停skeleton.resume(); // 继续

        其中force参数表示:是否强制生效。默认值为true,设为false时表示如果当前正在播放动画且与要设置的动画一致,就不重置播放了。

        start和end默认值都为0,这时表示正常播放动画。

        freshSkin表示是否刷新皮肤数据,默认为true。当为true时laya将会调用templet模版中的showSkinByIndex来强制刷新皮肤。

事件

Sketeton监听了四种事件,分别是播放、暂停、停止、标签,其中播放、暂停、停止是在动画播放的各个阶段播放,标签是在spine制作时添加,到某一帧时触发标签事件。

            skeleton.on(Laya.Event.PLAYED, this, () => {console.log("动画开始播放");});skeleton.on(Laya.Event.PAUSED, this, () => {console.log("动画暂停");});skeleton.on(Laya.Event.STOPPED, this, () => {console.log("动画停止");});skeleton.on(Laya.Event.LABEL, this, (e: Laya.EventData) => {console.log("动画播放到标签: " + e.name);});

设置插槽

laya提供了4种方式设置插槽,在这里我们要了解在spine中的层级关系是骨骼节点->插槽->插槽下的皮肤,laya中Skeleton拥有Bone骨骼节点数组、_boneSlotDic骨骼插槽字典,在这里我们设置的其实是插槽的皮肤,即BoneSlot中的currSlotData.displayArr的索引值,其中currSlotData.displayArr存放的就是对应插槽的皮肤数据。

            let boneSlot: Laya.BoneSlot = skeleton.getSlotByName("head"); // 根据名称获得boneSlotskeleton.showSlotSkinByIndex("head", 0);skeleton.showSlotSkinByName("head", "head_01");skeleton.replaceSlotSkinByIndex("head", 0, 1);skeleton.replaceSlotSkinName("head", "head_01", "head_02");

显示皮肤

参数freshSlotIndex表示是否将插槽纹理重置到初始化状态,默认为true。

            console.log("皮肤名:", skeleton.skinName);skeleton.showSkinByIndex(0, true);skeleton.showSkinByName("default", true);

使用该方法时需要在spine中设置不同的皮肤。在laya中该皮肤数据则存放在templet模版的skinDataArray中。

一些属性

            skeleton.getAnimNum(); // 获取动画数量skeleton.getAniNameByIndex(0); // 根据索引获取对应动画名console.log("总帧数:", skeleton.total);console.log("当前帧:", skeleton.index);console.log("当前动画名:", skeleton.animationName);console.log("当前模式", skeleton.aniMode);let temp: Laya.Templet = skeleton.templet;let player: Laya.AnimationPlayer = skeleton.player;

http://www.lryc.cn/news/468182.html

相关文章:

  • Vue项目实战-新能源汽车可视化(一)(持续更新中)
  • 百度SEO前10关键词排名波动跟用户行为反馈有很大关系
  • 基于微信小程序的电影交流平台
  • Java实现 itext PDF文件打印水印(文字和图片水印)
  • 面经之一:Synchronized与ReentrantLock区别
  • 论文速读:面向单阶段跨域检测的域自适应YOLO(ACML2021)
  • React中在map遍历中,给虚拟标签(<></>)加key
  • 大数据生态守护:Hadoop的深度保护策略
  • 代码欣赏之:此题易错在 a+b 非要写成 a-fabs(b).因为这样就成了浮点值了,得不到准确数
  • ECharts饼图-环形图,附视频讲解与代码下载
  • arcgis js 怎么加载geoserver发布的wms服务
  • 前端_006_Vue2
  • 论多端数据互通网游的架构评估
  • 网页HTML编写练习:华语榜中榜
  • C++ 编程基础:深入理解 `pair`(键值对) 和 `unordered_map`(无序映射)
  • 高德动态地图
  • springboot集成camunda学习与使用
  • 微服务架构学习笔记
  • 代码优化之简化if臃肿的判断条件
  • 【OpenAI】第六节(语音生成与语音识别技术)从 ChatGPT 到 Whisper 的全方位指南
  • Docker 下备份恢复oracle
  • oneplus3t-android_framework
  • 偷懒总结篇|贪心算法|动态规划|单调栈|图论
  • C语言初阶七:C语言操作符详解(1)
  • GO excelize 读取excel进行时间类型转换(自动转换)
  • 【算法与数据结构】二分查找思想
  • PHP PDO:安全、灵活的数据持久层解决方案
  • 九、Linux实战案例:项目部署全流程深度解析
  • GIS常见前端开发框架
  • Java | Leetcode Java题解之第506题相对名次