百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> 动画工具DragonBones的常用术语和运用办法介绍(图)-
分享文章到:

动画工具DragonBones的常用术语和运用办法介绍(图)-

发布时间:09/01 来源:未知 浏览: 关键词:
本篇文章给大家带来的内容是对于动画工具DragonBones的常用术语和运用办法介绍(图),有一定的参照 价值,有需要的伴侣可以参照 一下,但愿对你有所帮忙。? 本篇文章给大家带来的内容是对于动画工具DragonBones的常用术语和运用办法介绍(图),有一定的参照 价值,有需要的伴侣可以参照 一下,但愿对你有所帮忙。

如何用更少的美术老本制造出更生动的动画结果?今天就为大家介绍一套开源的2D骨骼动画框架和工具——DragonBones,它包括了桌面骨骼动画制作工具DragonBonesPro和一套多说话版本的DragonBones骨骼动画库。

下面为大家介绍DragonBones的常用术语和运用办法。

一、DragonBones 2D骨骼动画中的常用术语

骨架:骨架Armature,是2D骨骼动画中最常用的名词,个别指的是由许多骨骼组成的一个整体。DragonBones中同时期表一个可以包括动画的角色。

骨骼(骨头):骨格或骨头Bone,是骨骼动网中组成骨架的最重要的一个根基单元。骨头本身不克不及拆解,在骨架中可以进行相对的平移、扭转、缩放、运动,组合起来就构成了骨格动画。别的骨骼之间可以有父子关系。个别来说,在默许正向机动性能学的状况下,父骨骼运动会带动子骨骼一起运动、比方一个人物举起大臂,那小臂作为大臂的子骨骼,也会随之被抬起。

插槽:插槽是骨骼动画中显示图片的容器,隶属于骨骼。每个插槽可以包括多张图片,但是统一工夫只显示一张图片。每个骨格可以包括多个插槽。插槽链接了骨骼这个动画逻辑单元和图片这个动画显示单元,组成了骨骼-插槽-图片,这个DragonBones骨骼动画中的根本骨骼构造。

图片(纹理):图片就是显示图像的元素,在2D骨骼系统中,图片和纹理的意义区别不大,所以这里也可以叫纹理。

纹理集:纹理集是将图片打包之后组成的大图,利便资源整合传播和在游戏中加载,运用硬件加快引擎或者Egret Runtime 的话,纹理集能大幅度提高渲染效率。所以DragonBones默许供给的导入资源的接口就是用纹理集。

动画补间:个别设计师在做骨骼动画的时候,并不需要在每帧都为角色摆行动,而只是在一些关键的地方(关键帧)摆出关键的行动,关键行动之间全部由程序生成的补间取代,这就是动画补间。动画补间可以是线性的也可以是非线性的。线性补间意味着补间上的元件是匀速变换的(平移、扭转、缩放)。非线性补间般由各种曲线表示,DragonBones 中默许运用贝塞尔曲线表示非线性补间。

动画过渡:动画过渡是指从一个动画切换到另一一个动画时,发生的过渡结果。DragonBones供给了动画动面切换时的过渡结果功能,只有设定一个过渡工夫,就能主动生成平滑的过渡结果。

动画融合:动面融合供给了一个角色同时播放多个动画的功能。这个功能个别会在两种状况下运用。第1种是如一个人物角色动画比拼复杂,可能需要上半身和下半身离别做动画设计,然后可以任意组合。第2种是如需要个角色在跑步的同时中弹,身体后仰,也就是同时插放跑步和中弹的动画。动画融合的功能通过给不一样的动画设定权值,给不一样的骨路添加动画遮罩来实现这两种需求。需要注意的是DragonBones只要普通模式供给了动画融合的功能,极速模式是不供给这个功能的。

正向机动性能学(FK)和反向机动性能学(IK):在骨骼动画中,个别来讲,子骨骼的运动会挨到父骨骼的影响,例如大臂扭转,小臂也会追随扭转,这叫作正向机动性能学,也就是父亲影响孩子。固然实际天下也存在反过来的状况,例若有入打你一拳,你用小臂去阻挠,那小臂挨力运动的同时也会带动大臂一同做挨力运动,这叫作反向机动性能学。在DragonBones中控制骨路调理行动的时候,个别状况骨骼是相符正向机动性能学纪律的,也就是调理父骨骼,子骨骼也会挨影响。要是但愿通过反向机动性能学调理动画,可以选选中响应的IK工具来实现。

第一,安装完成后打开欢送界面,选中项目,如图1所示。

图4

选中工具:选择骨骼时,鼠标单击骨骼自身,按住左键挪移,可以在X、Y标的目的任意挪移骨骼。鼠标单击红色X轴(或绿色Y轴)可以在单一X轴(Y轴)标的目的上平移。鼠标拖动插槽内的图片自身,按住左键挪移,可以在X、Y任意标的目的上挪移骨骼。鼠标单击红色X轴(或绿色Y轴)可以在单X轴(Y轴) 标的目的上平移。鼠标拖动缩罢休柄可以缩放插槽。鼠标单击并按住其他区域时可以扭转插槽(插槽只要在骨架装配模式下可以被选择并转变状态)。

Pose工具:选择一个骨骼时,骨骼会追随着鼠标的拖拽扭转。复选两根或以上骨骼时,选择的骨骼会遵循IK法则,追随着鼠标的拖拽。

新建骨骼工具:选择新建骨骼工具,在主场景中单击鼠标左键并拖拽便可新建骨骼。别的在主场景中还支撑一些常用操纵:
推拉鼠标滚轮便可以缩放DragonBones Pro的场景。
鼠标处于选中工具或手型工具时,左键双击任意处, 场景大小便恢复到100%。
右键单击任意区域取消选中。

权重工具:权重表示了蒙皮挨到不一样骨骼形变影响的占比,合理分配好每个蒙皮顶点的权重至关重要。

3、可见可选过滤面板

可见可选过滤面板用于打开和关闭骨骼和插槽的可见、可选、可否继承编纂的开关,如图5所示。

图8

7、资源面板

项目所运用的所有图片都保留在资源面板中。DragonBonesPro每个项目的资源库都对应一个系统中现实存在的文件夹,文件夹中DragonBones Pro所支撑的PNG图片都会被显示在资源面板中。通过由系统其他文件夹向DragonBones Pro的资源面板中拖拽PNG文件的办法,向资源库里增加图片;响应的PNG文件也会被复制到对应的资源库文件夹中。也可以单击“导入资源”按钮,在弹出的系统窗口中指定要增加的资源PNG文件。资源面板如如图9所示。

图19

拖动蓝色或红色手柄可以调整蓝色或红色洋葱皮显示的帧数。遮盖的帧数越多,在主场餐中显示的影图越多。洋葱皮显示区会随着绿色播放指针的挪移而挪移。在动画播放历程中,绿色播放指针上的洋葱皮显示区域会隐蔽。主场景上,红色和蓝色的影图会随原始动画一起播放,蓝色影图的动画行动超前于原始动画,红色影图的动画行动后滞于原始动画。

洋葱皮的特性:蓝色或红色的洋葱皮显示区域最长不克不及超过动画剪辑自身的长度。虽然动画剪辑默许轮回播放、但当绿色播放指针在第0帧的时候,主场景中没有红色洋葱皮影图显示。当绿色插放指针在最末一帧时,主场景中没有蓝色洋葱皮影图显示。

工夫轴

骨骼层内关键帧为白色,插槽层内关键帧为黄色,事件层内关键帧为红色,含有事件、跳转、声音的骨骼关键帧为粉色。工夫轴的首先层为动面的排层,不克不及直接编纂,在其他任意层增加关键帧后,动画剪辑层便会涌现菱形方块,表示目前帧下某层或多层存在关键帧。白色表示为骨骼层关键帧,黄色表示插槽层关键帧,红色为事件层关键帧,粉色为存在多种层混合的天键帧。选择菱形方块便选择这一帧数下的所有关键帧。可以进行整体摆布平移、拖拽、复制、剪切、粘贴、删除。只有响应帧数下存在关键帧,工夫轴标尺上便会涌现红线,工夫轴标尺个会随工夫轴的高低滚动条滚动,始终可见。工夫轴的首先级为骨骼层或事件层,第二级为插槽层,插槽层相对骨骼层向右缩进一层。工夫轴内不表现父子骨骼的层级关系。事件层只要一层。选择的层会高亮,对应层的骨骼或插槽也会被选择,反之,选择骨骼或插槽,对应的层也会被选择。关键帧可以在工夫轴同层内任意拖拽。工夫轴面板如图20 所示。

可以在工夫轴内拖拽转变图层的叠加次序。

四、项目的导入与导出

导入项目DragonBones Pro 当前支撑导入多种格局的DragonBones数据文件(包含json和xml)和数据包文件(包含png和zip) ,别的DragonBones Pro 支撑通过导入插件,扩展导入数据的格局。官方自告的Spine 2.x导入插件和Cocos1.x导入插件就能帮忙DragonBones Pro导入Spine和Cocos的数据文件。导入的办法很简略,只需将需要导入的数据文件或数据包文件拖拽到软件中即可。要是导入的是数据文件,会涌现如图 29所示的界面 。

图30

输出途径默许为“我的文档+项目名”,会员可以手动指定,要是导出 zip包,则包文件会涌现在指定的输出途径下。

要是导出项目文件夹,则会在指定的输出途径下创立和项目名雷同的子名目,其下包括数据文件和图片。

输出比例默许为 1。

会员可以输入数值来控制导出项目的缩放。

“添补色” 复选框,默许为不勾选(透亮配景)状态,勾选后会员可以单击右侧的色彩方块儿打开色彩选中窗口,选中需要作为配景色的色彩“打包zip” 复选框,默许为不勾选状态,也就是导出项目文件夹,勾选后则导出zip包情势的项目文件,下面会将psd文件转换成DragonBones数据文件,在DragonBones Pro的安装名目中供给了一个足本文件PSExportDB,jsx. 用于将Photoshop中的设计图导出皮DragonBones格局数据+图片。

注意:在Mac系统中,需要在利用程序中寻到DragonBones Pro.app,然后右键单击选中显示包内容。

足本文件就在/Contents/Resources/日录下,导出的方式如下:在Photshop中打开设计图,然后顺次在菜单当选择“文件—>足本—>阅读”下令,然后在打开的系统定位例口中寻到PSExportDBjsx文件,选中打开,弹出如下对话框:

Export PNGs导出图片
ExportISON导出json文件
Ignore Hidden Layers忽略隐蔽图层
Image Scale整体缩放比例

遵照需求设定好,单击OK按钮Photoshop便开端导出,导出完成后,在设计图所在的日录下会生成一个DrgonBmes{PSD的文件名}的名目,要是你导出同时勾选PNGs和JSON,其下会有和psd文件同名的一个json文件和一个Textuer名目。

Texture下是所有的png图片文件。在之后只需将导出的数据文件拖进DragonBones Pro设定好图片日录,即可完成导入。导入后,图片的相对位置大小和彼此间的层级关系都和Photoshop中完全雷同。

以上就是动画工具DragonBones的常用术语和运用办法介绍(图)的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有150人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板