dragonbones

DragonBones动画制作作业 1.素材的选择：通过手绘板，在ps上绘画了一只狐狸来当作素材使用，素材一共分为了九个部分（四肢，身体，双耳，头，尾巴） 2.制作的过程 （1）：将绘画完成的图片（psd格式）直接拖入舞台 （2）：给狐狸的各个所需部位添加骨骼 （3）：创建补间动画 （4）：预览 来源： oschina 链接： https://my.oschina.net/u/4461803/blog/4308008

这篇文章分享一点我制作游戏时的一点小技巧吧: Dragonbones龙骨如何在cocos creator 里同时使用多个DragonBonesAtlasAsset图集的办法 这是我现在正在做的游戏视频: https://www.bilibili.com/video/BV1j5411h7ZY/ 我的qq群：1142732961 欢迎一起讨论交流啦 1.Dragonbones 龙骨在cocos creator 里使用多个图集 在学习做龙骨动画时,我发现很多组件是重复的,在小游戏里出现大量重复的素材还是很占包体的,所以我尝试着把重复的东东单独放到一个独立的图集里,龙骨动画则会同时加载两个图集的素材 完整没拆图集的角色 拆出的通用图集,我把角色通用的部位和所有可替换的衣服和武器抽了出来 角色拆出自己的图集,我这里只抽出了发型和头饰,表情服装这些都用通用图集的 合并后在游戏里不同角色的样子(这里我偷懒没换衣服,衣服其实是可以换成图集里其他的) 1.实现方法 我没有改cocos creator原生的代码逻辑,而是纯用ts脚本来实现出来的 当然我写代码比较业余,里面好多东东写的很临时,没有做封装,我就贴出一下重要的代码和步骤吧,当然如果遇到问题可以随时问我的. 首先,我们拿到要公用的图集,如果这个图集没有被用到最好手动init一次,否则是拿不到龙骨图集里的textures的. 我的逻辑是这样写的

基础篇： Html5中Canvas绘制、样式详解（不包含动画部分） 此篇为后续 目录 1. 状态的保存和恢复 2. translate移动 3. 旋转Rotating 4. 缩放Scaling ​ 5. 图形相互交叉显示规则 6. 裁切路径 7. 动画基本步骤 8. canvas相关的动画js框架 1.状态的保存和恢复 save() 保存画布(canvas)的所有状态 restore() save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。 Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。一个绘画状态包括： 当前应用的变形（即移动，旋转和缩放，见下） 以及下面这些属性：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled

1.开场动画 首先将素材导入到DragonBones中，然后将各个素材图片移动到合适的位置，然后调整图层上下位置，并在20帧左右插入关键帧 然后在0帧放入各素材进入背景时的位置以及时间顺序，最后就是创建补件动画调整各素材的大小变化 结果： 2.小丑盒子 首先将素材导入到DragonBones中，然后进行位置移动并调整图层上下位置，使用骨骼工具创建骨骼，调整至动画制作面板利用缩放与旋转调整小丑骨骼，制造出弹出效果与左右摆动效果 结果： 3.奔跑动画 将素材导入到DragonBones中，调整好位置，然后使用骨骼工具创建骨骼，调整腿部与手臂骨骼位置，在0帧与4帧位置分别摆成左右腿起跑姿势 再在2帧与6帧位置调整至轻轻跃起姿势，以及最后分别在1帧3帧5针7帧进行细微调整，这样就完成了 跳跃和奔跑类似，就不多做介绍了 4.跳跳羊 首先将素材导入到DragonBones中，并调整好位置 来源： oschina 链接： https://my.oschina.net/u/4464497/blog/4318529

用DragonBonesPro制作补间动画、龙骨动画 动画补间 导入素材 整理素材位置并安排时间轴 调整关系以及创建补间动画 小丑惊吓盒 导入素材以及调整关系 创建骨骼以及创造补间动画 跑步精灵 导入数据到项目 创建骨骼 手脚部以及头和身体 建立整体从属关系 跑步动画补间 跳跃 跳跳山羊 导入素材 创建山羊骨骼以及网格 创建补间动画 来源： oschina 链接： https://my.oschina.net/u/4460461/blog/4280087

1.开场动画 首先将素材导入到DragonBones中，然后进行位置移动，将各个素材图片移动到合适的位置并调整图层上下位置，在20帧左右插入关键帧 在0帧位置调整各素材进入背景bg时的位置与时间顺序，并创建补件动画，调整各素材的大小变化使其在合适时间出现 实验效果： 2.小丑盒子 首先将素材导入到DragonBones中，进行位置移动并调整图层上下位置，使用骨骼工具创建骨骼 第三个骨骼工具 调整至动画制作面板 利用缩放与旋转调整小丑骨骼，制造出弹出效果与左右摆动效果 实验效果： 3.奔跑动画 奔跑部分： 首先将素材导入到DragonBones中，进行位置移动并调整图层上下位置，按照实验指导书步骤使用骨骼工具创建骨骼，完成后进入动画制作面板，调整腿部与手臂骨骼位置，在0帧与4帧位置分别摆成左右腿起跑姿势 再在2帧与6帧位置调整至轻轻跃起姿势 最后分别在1帧3帧5针7帧进行细微调整，这样奔跑的部分就完成了 跳跃部分： 与奔跑类似，在0帧时保持人物正常站姿，在第4帧调整人物腿与手臂使其变成准备跳跃姿势，在第6帧与第8帧调整人物跳起时在空中的位置与姿势，在第10帧与第12帧调整人物下落时的位置与姿势，最后在14帧的位置调整会正常站姿。 4.跳跳羊 首先将素材导入到DragonBones中，进行位置移动并调整图层上下位置，按照实验指导书步骤使用骨骼工具创建骨骼，选择body素材图片

软件名称：DragonBonesPro 1.素材制作和分层 自己绘画出狐狸的各个部件 进行分层 2.2.导入软件 骨骼绑定 在将分割好的人物素材导入到新建的GragonBones中，接下来绑定骨骼。因为模型比较简单,所以不需要进行特别的处理,骨骼仅仅需要对锚点进行旋转即可做成动画 3.动画制作 点击动画制作进入动画页面，新建动画修改名称。 我选择的是比较正常的速度,所以45帧为一步,为了达成循环动画,需要做两节 需要注意的是 为了符合现实运动逻辑 我们需要调节曲线运动 但是自带的曲线模式是对整个运动进行控制 而不是帧与帧直接交错控制 还好的是这里只有3帧 所以我们仅需对头尾进行曲线调节 这样就能达成前后慢中间快的运动趋势 导出 来源： oschina 链接： https://my.oschina.net/u/4459532/blog/4307818

DragonBones简单动画制作实例(2) 软件名称：DragonBonesPro 软件版本：5.6 软件介绍：DragonBones是一套开源的 2D骨骼动画框架和工具，它包含了基于Flash Pro的骨骼动画编辑面板Skeleton Animation Design Panel及骨骼动画ActionScript框架，它可以让开发者运用熟悉的Flash Pro元件及时间轴编辑方式，快速创建2D骨骼动画，并运用到Flash或其他技术的应用中。 1.创建IK和蒙皮动画——悬挂着的小猴子 导人数据到项目在窗口顶部菜单依次单击【文件】一【导入数据】，将素材导入到新建项目。DragonBones将自动根据JSON数据创建新项目。 创建骨架先创建骨架，再蒙皮，最后创建lK。最后装配完成的骨骼分布情况如图，在“场景树”面板的分布情况如图 创建蒙皮、网格。我们要为之创建蒙皮的区域是猴子的手臂。创建蒙皮需要先将图片转化为网格。现在让我们将图片rightArm和leftArm转化为网格。我们需要在手肘处设置较为密集的顶点，避免在蒙皮后因为形变控制点太少而造成蒙皮时手臂体积的改变，并将网格绑定到骨骼。 编辑骨骼权重----每个网格顶点都会受到绑定骨骼的影响，这种影响我们称之为权重。每个网格顶点的所有骨骼权重值加起来等于100。骨骼权重值越大，代表这个顶点受该骨骼影响越大。当骨骼变换时

Load流程是整个资源加载管线的最后一棒，由Loader这个pipe负责（loader.js）。通过Download流程拿到内容之后，需要对内容做一些“加载”处理。使得这些内容可以在游戏中使用。这里并不是所有的资源都需要进行一个加载处理，目前只有图片、Json、Plist、Uuid（Prefab、场景）等资源才会执行加载的流程，其他的资源在Download流程之后就可以在游戏中使用了。 Loader处理 Loader的handle接收一个item和callback，根据item的type在this.extMap中获取对应的loadFunc。 Loader.prototype.addHandlers = function (extMap) { this.extMap = JS.mixin(this.extMap, extMap); }; Loader.prototype.handle = function (item, callback) { var loadFunc = this.extMap[item.type] || this.extMap['default']; return loadFunc.call(this, item, callback); }; 资源的加载方式 Loader的this.extMap记录了各种资源类型的下载方式，所有的类型最终都对应这5个加载方法

DragonBones简单动画制作实例 软件名称：DragonBonesPro 软件版本：5.6 软件介绍：DragonBones是一套开源的 2D骨骼动画框架和工具，它包含了基于Flash Pro的骨骼动画编辑面板Skeleton Animation Design Panel及骨骼动画ActionScript框架，它可以让开发者运用熟悉的Flash Pro元件及时间轴编辑方式，快速创建2D骨骼动画，并运用到Flash或其他技术的应用中。 1.小球滚动动画 在60帧插入关键帧，会自动添加补间动画，在第一帧上加入旋转效果，可自行在曲线编辑器上添加淡入淡出效果。 2.开场动画 新建逐帧动画，将素材全部导入到舞台，在1、9、11帧上排列好所有对象的位置，并创建关键帧，调整大小、位置、旋转等参数。 3.小丑盒子动画 新建骨骼动画，将素材全部导入到舞台，在骨架配装页面排列好小丑的位置，并在各个部位上添加骨骼，在层级页面排列好位置防止对象遮挡，切换到动画制作页面，创建关键帧并移动骨骼位置让小丑出现左右摇晃的效果。 4.跑步的人、跳跃的人动画 新建骨骼动画，将素材先从photoshop中加载，在龙骨中选择添加数据到项目，导入素材到舞台，在骨架配装页面中制作骨骼，这里注意在添加骨骼时可以先隐藏别的对象，如图可以先添加手脚的骨骼并设置子骨骼和父骨骼，全部添加完如下图，并进行父骨骼测试。