0文章
0评论
0获赞

交互动画之—骨骼动画制作(二)

704 0

这一期主要讲骨骼动画制作软件DragonBonesPro,下一期讲案例。

章大纲

01 软件下载和安装

02 导入资源

03 骨架装配

04 动画制作

05 预览

06 导出

总结 资源

DragonBonesPro编辑器

熟话说工欲善其事必先利其器,就是说要先把工具用好,那接下来我们讲DragonBones Pro软件相关操作吧。

01软件下载和安装

去官网http://dragonbones.com/cn/index.html下载安装即可,支持Win和Mac两个平台

02导入资源

支持从“PS:文件>脚本”,导出图片到DragonBones Pro项目里,不支持AI文件导出。

怎么给PS添加DragonBones Pro的脚本呢?

打开DragonBones Pro软件,在顶部的菜单栏点击帮助, 选择“PSD导出插件安装引导”,按照引导的步骤操作即可。然后在PS里画好角色造型,在“文件>脚本”里把PSD图层导入到DragonBones Pro软件里即可制作动画。

交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)

导出到数据:即把PSD图层导出为.json数据文件,它可以在DragonBones Pro中打开,然后制作动画。

导出到DragonBones Pro:即直接导出图片到软件中制作动画。

需要注意的是:

  • 每一个要动的部位都要分图层,比如眼球要转动,就要把眼眶和眼球分层。
  • 建议用PS绘制角色,一定要用AI的话,也要分层绘制,转为PSD文件才是分图层的。

DragonBones Pro软件介面的两个主要操作:骨架装配动画制作

03骨架装配

骨架装配模式,主要是用于创建骨头,并绑定到图片上,最后组成骨架结构。

交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)

骨架装配有层级结构,即,根骨头>骨头>插槽>图片。图片就是PSD里的图层;插槽就是存放图片的容器,为什么要多添加插槽这一层结构呢?目的是让骨骼动画更灵活,也是数据结构决定的;骨头是骨骼动画的关键元素,作用是把图片绑定到骨头上,再对骨头K帧,就能实现动画效果;根骨头就是多个骨头关联起来组成的父级结构。其实骨骼动画和我们身体的结构类似,身体>骨头>关节>肌肉。

交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)

需要注意的是:

图片不能单独存在,一定要有插槽才能放图片,一个插槽下可以放多张图片,但同一时刻,只能显示一张,插槽是在骨头层级之下。

在骨架装配模式下的主要操作是:先创建骨头,并把骨头绑定到图片上,然后调整骨头的相关参数。

步骤一:创建骨头

交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)

点击“创建骨骼”工具,在窗口里拖动,就能完成骨骼创建,继续拖拽,默认创建它的子骨骼,如果不想创建它的子骨骼,右键单击空白处,取消选择创建的骨骼即可。创建骨头这一步需要注意的是父子级关系,在创建骨头之前,就要想好。

所有骨骼都是基于根骨骼创建的,且根骨骼不能删除。场景移动:按住鼠标右键拖拽。

步骤二:绑定图片

分为自动绑定和手动绑定。自动绑定:在图片上拖拽创建骨头, 骨头划过的图片默认就绑定这个图片。

手动绑定:创建骨头之后,在场景树面板,手动把图片拖拽到骨头层级下;或者创建骨头时,不松鼠标,按住ctrl,鼠标点击选择图片也可完成绑定。上面我们说了插槽不能单独存在,所以图片绑定成功的同时会自动创建一个插槽。

步骤三:骨头操作

骨头有三个基本参数:位移、旋转、缩放,在窗口底部的面板就能更改这些参数。默认情况下,更改父骨骼的参数,子骨骼也会被更改,这个时候需要关闭子骨骼可控,就能实现父动子不动。对于已绑定骨头的图片,想要移动骨头和图片的相对位置,就需要关闭子图片可控,单独更改骨头的位置。

交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)

骨架装配功能也很简单,重要步骤就上面三个,动手操作几次就熟悉了,下面来说另外一个动画制作模式。

04动画制作

“动画制作”模式的主要功能是创建关键帧并制作动画。

交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)

时间轴面板和AE/Flash软件是一样的,通过K帧创建补间动画,以及复制删除关键帧等操作。

有两种方式K帧:手动+自动。

手动:快捷键是K,或者点击相应面板的小旗图标,红色表示已创建关键帧,黄色表示有参数更改,但是未创建。

自动:在时间轴面板开启带A的小旗图标,只要参数有修改,就会在时间轴的对应位置上自动创建关键帧。

DragonBones Pro软件能创建关键帧的面板有三个,因为K帧的对象不同,参数也不同,所以能实现丰富的动画效果。

参数面板:针对骨头K帧,有移动、旋转、缩放三个参数。

层级面板:针对插槽K帧,只能改变插槽层级关系。

属性面板:可针对插槽和网格K帧,插槽有颜色,不透明度,显示资源三个参数可以K帧;网格只有网格点的移动可以K帧。

交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)

上面说可以对骨头、插槽、网格K帧,那具体怎么来制作动画呢?

骨头动

即对骨头K帧,主要用于肢体动作、角色移动、转身等效果。参数有:移动、旋转、缩放。只需选中骨头,在时间轴面板的某一时刻,更改参数,创建关键帧,即可完成骨骼动画的制作。

交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)

插槽动画

即对插槽K帧,通过切换图片显示和更改图片颜色制作动画,很适合做闪电特效,比如两个角色打斗产生的刀光剑影,就可以通过快速切换图片和更改颜色表现出魔幻的视觉冲击。只需选中插槽,在属性面板更改参数并K帧,即可创建插槽动画。

交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)

网格动画

即对网格K帧,在图形上创建网格点,相当于钉锚点,锚点移动使图片变形,就能实现灵活的动画效果。网格动画也在属性面板创建关键帧,但编辑网格要在骨骼装配模式下。只需选中网格,鼠标拖动锚点然后K帧,即可创建网格动画。

交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)

再来拓展讲一种特殊的动画形式:

IK动画

正常情况下,我们创建的骨头关系叫正向约束FK,也就是父骨骼控制子骨骼IK叫反向约束,是子骨骼控制父骨骼,它是骨骼动画的特殊形式,用来实现下蹲、站立的动作,因为下蹲和站立是由脚掌骨头或手掌骨头带动父骨头大腿或手臂运动的,所以需要IK反向约束来实现。

IK动画的创建:骨架装配模式下,属性面板的”IK约束”有两个图标都可以创建。它最多给两个且为父子关系的骨头创建约束,一根骨头也可创建。IK约束只是一种特殊的骨头形式,对其K帧和普通骨头一样。

交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)

嗯,基本的动画制作就讲完啦。

05预览

在软件窗口顶部有一个预览图标,点击即可在网页预览,窗口右侧还有预览设置。需要注意的是,我们在制作动画时,在时间轴上预览可能会出现抖动现象,这个时候需要在预览里查看是否有抖动,如果没有,说明动画制作没问题,如果有,说明动画制作有问题,需要修改动画。

交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)

06导出

在软件窗口顶部有一个导出图标,点击之后,可以选择保存的类型,一般情况下需要保存DragonBones json数据文件,或者gif文件以便于传播查看,但是非常不建议保存gif格式,因为会造成丢帧和颜色误差,且文件资源很大,建议保存HTML文件代替gif,效果会更好。

交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)
交互动画之—骨骼动画制作(二)

总结

到这里骨骼动画的基本知识点都讲完了,下期讲一个小案例吧。

资源

DragonBones官方教学视频:

https://www.bilibili.com/video/av9072544/index_1.html#page=1

软件操作文档:

http://developer.egret.com/cn/github/egret-docs/DB/dbPro/introduction/introduction/index.html

可下载的动画案例源文件:

http://t.egret.com/work/2-0.html

原文地址:番茄设计匠(公众号)

作者:番茄

评论 (0)
请登录以参与评论。
立即登录

交互动画之—骨骼动画制作(一)

973 0

“今天来讲一种动画类型——骨骼动画,主要用来实现带交互的角色动画,它可以制作简单交互动画,也可以制作像《刀塔传奇》这样复杂的游戏。虽然我们不会接触到游戏UI,但带交互的需求还是会遇到,这不,这个大坑就掉我脚下了,领导要求把吉祥物设计成交互动画,于是我上网找资料学习,最后完美完成工作任务啦。今天就把我学习过程中的经验和总结分享给大家。”

“文章分三期(篇幅长图片多),这是第一期,先引入骨骼动画。第二期通过DragonBones Pro软件操作讲骨骼动画的知识结构。第三期讲卡通吉祥物的动画制作案例。写文章的目的是万一大家哪天接到这样的需求时,看过这篇文章能不慌就行。”

文章大纲

01 基本动画描述

02 骨骼动画描述

01基本动画描述

工作中我们接触到的动画都是2D动画,是在一个平面上运动的,比如我们熟悉的加载动画,插画动画,吉祥物动画,还有比较复杂的动画片系列:海贼王,火影忍者等都是2D动画。

交互动画之—骨骼动画制作(一)
交互动画之—骨骼动画制作(一)

作者:阿龙

交互动画之—骨骼动画制作(一)
交互动画之—骨骼动画制作(一)

这里仅站在UI设计的角度,把2D动画简单分为两种:展示性动画、交互动画。

展示性动画

展示性动画顾名思义是为了场景展示而制作的,动画连贯且固定,用户只能是旁观者,可以关闭动画和触发其它操作,但不会干扰这一动画的运动。它可以是逐帧动画(不需要K帧,通过切换图片完成,常用PS制作),也可以是补间动画(需要在时间轴上K帧,常用AE或者flash制作),这种动画没有交互,开发只需要调用播放即可。

交互动画

指在动画播放时支持事件响应和交互功能的一种动画,即用户是可以和动画产生互动的,用户可以参与到其中并改变动画运动,并需要代码来完成交互的控制,可用flash制作完成后生成代码。

交互动画之—骨骼动画制作(一)
交互动画之—骨骼动画制作(一)

扫码体验

02骨骼动画描述

2D交互动画里面有一种重要的形式:骨骼动画。它是由互相连接的“骨头”组成的骨架结构,通过改变骨头的朝向和位置来为角色生成动画。

我们知道,对于帧动画来说,角色的每一个姿势都是一帧,也就是一张图片,角色要完成一个动作需要把每一帧串起来,动画的流畅性和平滑效果都取决于帧数的多少,所以图片越多效果越好,这非常耗费资源。而骨骼动画是把角色的各部位图片绑定到一根根相互连接的“骨头”上,通过控制这些骨头的位置、旋转和缩放来生成动画。所以,骨骼动画的优点是可以针对单个骨头控制,动画制作更简单,交互控制更准确,图片资源更少,因为设计不需要给每一帧画图,只需画出角色的每一个关节就ok。

利用骨骼动画可以制作简单的交互动画和复杂的游戏。

交互动画之—骨骼动画制作(一)
交互动画之—骨骼动画制作(一)

骨骼动画的骨架结构

目前行业里骨骼动画的制作软件有Spine 和 DragonBones Pro,两者有什么特点呢?

Spine

它是一款收费的商业软件,功能完善,流畅度也很好,比DragonBones Pro更强大,多种输出格式,官方支持多平台,是游戏开发的专业软件。但因为价格小贵,且功能强大,所以经济成本+学习成本相对较高,适合做商业游戏的团队使用。

DragonBones Pro

它也是用于制作2D骨骼动画的编辑器,火爆手游《刀塔传奇》正是使用了DragonBones Pro编辑器得以实现如此丰富生动的效果。DragonBones Pro是一款免费软件,而且是中文版的,还有官方教学视频,上手快,很适合偶尔有简单需求的2D小游戏项目,比如H5游戏。

DragonBones Pro制作的动画精准,真实自然,使用较少的关键帧就可以表现复杂生动的动画效果,动画有缓动补间,占用位图和内存资源少,并且还提供制作H5动画的工作流程。

交互动画之—骨骼动画制作(一)
交互动画之—骨骼动画制作(一)

有的同学可能会有疑问,为什么不用AE做?虽然AE的动画功能也不错,特别是后期特效功能是动画软件不能比拟的,但是在碰到人物转身、转面、和物体互动、大幅度动作的时候,用AE实现很复杂,而DragonBones Pro利用骨骼绑定可以简单实现。

说了半天,DragonBones Pro就是我们讲的重点啦! 明天讲骨骼动画制作<二>

原创不易~

原文地址:番茄设计匠(公众号)

作者:番茄

评论 (0)
请登录以参与评论。
立即登录