一、角色序列帧.ani动画的制作

1、在项目管理器中创建动画文件

2.创建动画模板,编辑动效名称

3.编辑序列帧动画

.ani格式动画的代码控制

1.动画加载loadAnmition()

2.播放与停止、动效模板切换

3.动画帧位置控制

4.动画播放完成事件

uui截图:

Laya.init(1334, 750);Laya.loader.load(["res/comp.atlas","res/role.atlas"],Laya.Handler.create(this,onload));
function onload(){this.tweenui = new ui.tweenuiUI();Laya.stage.addChild(this.tweenui);this.tweenui.ani.play(0,false);//播放完成后事件// this.tweenui.ani.on(Laya.Event.COMPLETE,this,oncompelete);//对动效模板进行监听this.tweenui.ani.on(Laya.Event.LABEL,this,onLabel);// loadAnimation三个参数this.roleAni = new Laya.Animation();// 第一个路径 后面两个可以默认不填this.roleAni.loadAnimation("res/roleAni.ani");
}
function oncompelete(){console.log("我完成播放了!!")
}function onLabel(label){this.tweenui.leftPage.addChild(this.roleAni);this.roleAni.pos(this.tweenui.leftPage.width/2,this.tweenui.leftPage.height/2);this.roleAni.play(0,true,"die");console.log(this.tweenui.ani.index)
}

  

二、动效动画的制作

主要用于UI中一些相同的,需要批量制作的动画,比如按钮动画

动效动画不能像Animation动画一样去代码控制,但可以在IDE中加入事件触发

在IDE中新建

0不变 第5帧设置缩放0.5 10帧还原  。在之前需要设置中心点

制作按钮回弹效果,制作后直接拖拽到ui中的节点上。

三、Animation动画组件

动画组件可以直接放入UI或者视图中,可视化的设置位置大小,播放与否等

四、骨骼动画的转换和使用

LayaAir引擎支持第三方骨骼动画资源的转换

需要使用IDE骨骼动画转换工具后转换使用

从spine和DrgonBone中导出资源注意事项

图集、旋转、版本

LayaAir引擎播放Spine骨骼动画

https://ldc.layabox.com/doc/?nav=zh-js-1-5-5

骨骼动画转化

生成png和sk的文件

骨骼动画的代码加载与使用

API链接:https://layaair.ldc.layabox.com/api/?category=Bone&class=laya.ani.bone.Skeleton#Skeleton()

1.动画模板Templet方式创建骨骼动画Skeleton

代码量比较大

2.直接加载资源创建骨骼动画Skeleton

代码小

从模板获取动画  buildArmature()

动画切换皮肤 showSkinByIndex()

Laya.init(1334,750,Laya.WebGL);
//直接创建骨骼动画
// this.skeleton = new Laya.Skeleton();
// Laya.stage.addChild(this.skeleton);
// //1是支持换装的值
// this.skeleton.load("res/goblins-mesh.sk",Laya.Handler.create(this,oncompelete),1)// function oncompelete(){
//     this.skeleton.pos(300,300);
//     this.skeleton.showSkinByIndex(1);
// }// 板创建骨骼动画
this.templet = new Laya.Templet();
this.templet.loadAni("res/goblins-mesh.sk");
this.templet.on(Laya.Event.COMPLETE,this,onLoaded);
function onLoaded(){// this.skeleton = this.templet.buildArmature(1);//或者this.skeleton = new Laya.Skeleton(this.templet,1);Laya.stage.addChild(this.skeleton);this.skeleton.pos(200,300);this.skeleton.showSkinByIndex(1);this.skeleton.play(0,true);    this.skeleton1 = new Laya.Skeleton(this.templet,1);Laya.stage.addChild(this.skeleton1);this.skeleton1.pos(400,300);this.skeleton1.showSkinByIndex(2);this.skeleton1.play(0,true);
}// 封装好的方法
/*** @public* 创建骨骼动画* @param {String} path 骨骼动画路径* @param {Number} rate 骨骼动画帧率,引擎默认为30,一般传24* @param {Number} type 动画类型 0,使用模板缓冲的数据,模板缓冲的数据,不允许修改   (内存开销小,计算开销小,不支持换装) 1,使用动画自己的缓冲区,每个动画都会有自己的缓冲区,相当耗费内存 (内存开销大,计算开销小,支持换装) 2,使用动态方式,去实时去画    (内存开销小,计算开销大,支持换装,不建议使用)* * @return 骨骼动画*/
// var createSkeleton = function (path, rate, type) {
//     rate = rate || 30;
//     type = type || 0;
//     var png = Laya.loader.getRes(path + ".png");
//     var sk  = Laya.loader.getRes(path + ".sk");
//     if(!png || !sk){return null;}//     var templet = new Laya.Templet();
//         templet.parseData(png, sk, rate);//     return templet.buildArmature(type);
// }
// // 一般使用只需要传路径
// var skeleton = new createSkeleton("path");

  

转载于:https://www.cnblogs.com/joyce123/p/8647478.html

layaAir引擎制作游戏的图集动画、时间轴动画、和骨骼动画总结二相关推荐

  1. flash 第六章 动画-时间轴和帧

    在时间轴面板中,可以对帧进行一系列的操作 插入帧 选择插入>时间轴>帧,或按F5键,插入一个普通帧 选择插入>时间轴>关键帧,或按F6,插入一个关键帧 选择插入>时间轴& ...

  2. 【MAYA】如何用MAYA将mixamo中导出的动画制作成RootMotion根骨骼动画

    如何用MAYA将mixamo中导出的动画制作成RootMotion动画 文章目录 一.关于模型 1.mixamo快速绑骨 二.关于动画 1.为绑定好骨骼的模型\动画添加根骨骼 2.Rootmotion ...

  3. 【UnityDragonBones】像素角色人物骨骼动画教程(三)骨骼动画人物奔跑起来

    [手机游戏像素画美术教程]跟Tsugumo学像素画系列-奔跑动画序列(完结) [手机游戏像素画美术教程]跟Tsugumo学像素画系列-让光照进来 [手机游戏像素画美术教程]跟Tsugumo学像素画系列 ...

  4. 15.Unity2D 横版 骨骼动画 之 单张切片图骨骼动画+Aseprite像素画软件

    主目录https://blog.csdn.net/qq_54263076/category_11900070.html?spm=1001.2014.3001.5482 b站视频:骨骼动画 骨骼动画的原 ...

  5. 【日常点滴016】python游戏库arcade结合Tiled map editor地图编辑器和Pymunk物理引擎制作游戏过程记录,并最终打包为exe文件

    独此一家,建议收藏 前言 一.创建一个空白窗口 step001.py代码示例 二.创建很多全局能用的常量 step002.py代码示例 三.创建实例变量即代表各种精灵等的变量 step003.py代码 ...

  6. 如何将unity3d动画嵌入html,在Unity3D中使用精灵动画引擎制作动画的两种方法

    7月28日消息,如今的游戏玩家对于游戏角色的动作要求越来越高,给开发者提出了众多的要求,工作量也相应上升.那么如何才能简单快速地制作角色动画以提升效率呢?下面就和大家分享两个在Unity3D中使用精灵 ...

  7. HTML5小游戏动手做(二):使用PIXI引擎制作坦克大战游戏

    这里写自定义目录标题 1. 简介 1.1 PIXI 简介 1.2 坦克大战游戏简介 2. PIXI 引擎入门 2.1 基本概念 2.1.1 舞台 Stage 2.1.2 容器 Container 2. ...

  8. 全面了解H5重要入口“微信小游戏”,LayaAir引擎支持一键发布!

    12月28日,微信小游戏在6.6.1的版本中上线.通过微信小程序入口的微信小游戏平台,可以看到首批推出的15款游戏产品,其中4款采用LayaAir引擎开发,通过Layabox提供的小程序适配库一键发布 ...

  9. 轻松制作GIF动画!教你玩转PS时间轴之进阶技巧篇

    上一篇文章跟大家讲过PS时间轴的基础,接下来跟大家分享制作简单GIF动画的一些技巧,(文字动画.颜色渐变.咻一咻动画.模糊动画.旋转时钟以及变化的月亮等等),文章提到的动画都有提供打包下载,想学时间轴 ...

最新文章

  1. Iframe 高度自适应
  2. 用java的stream流库在实际项目的使用案例
  3. wxWidgets:wxDataObject概述
  4. 1-jdk的安装与配置
  5. 第一章 | 使用python机器学习
  6. 学生信息管理系统c 语言程序设计报告,C语言程序设计报告(学生信息管理系统)[1].txt...
  7. 自己动手实现STL:前言
  8. 计算机键盘换挡键,电脑键盘上的换挡键是哪个
  9. vector java 复制_Java代码性能优化的 40+ 细节
  10. Java日期练习—计算已出生多少天
  11. 语义分析的一些方法(一)
  12. 人力资源管理系统erp
  13. k620显卡linux驱动下载,NVIDIA英伟达Quadro系列专业显卡官方驱动
  14. 2020年系统集成项目管理工程师上午真题及答案(一)
  15. jsp案例分析(二)-聊天室-2-逆向建模
  16. cad2014卡顿的解决方法_AutoCAD复制卡顿的两种可能原因和解决方案
  17. 用TreeWalk提高网速及其在vista中的安装方法
  18. der解码规则_DER 编码规范理解
  19. 《炬丰科技-半导体工艺》 硅光电子器件上的单片砷化铟量子点
  20. win10预装软件卸载工具

热门文章

  1. 全球及中国铝拉丝润滑剂行业竞争格局及运营前景研究报告2021-2027年
  2. 0X8009310B (ASN:276) win7安装证书时出现错误消息:找不到与此证书文件相关联的证书申请微软官方文档
  3. 泰国基础教育管理实行新体制
  4. linux面试题中的简答题,Linux面试题(简答题部分)
  5. 联合国粮农组织总干事屈冬玉 对话国际农民丰收节贸易会
  6. 总体经济拉动新引擎-农业大健康·张咏:疫情后谋定乡村振兴
  7. openresty开发系列23--lua面向对象
  8. 使用Phar来打包发布PHP程序
  9. 标题与文字的组合[摘]
  10. error: '__gnu_cxx::_Lock_policy' has not been declared