码迷,mamicode.com
首页 > 其他好文 > 详细

Spine 实用技巧大全

时间:2015-11-17 12:53:21      阅读:406      评论:0      收藏:0      [点我收藏+]

标签:

1、账号登出 log Out
2、Spine 如何调整帧速率
3、Spine 如何导出 (透明度有问题,图片有黑边的,看这个)
4、Spine 如何设置参考图片
5、Spine 版本回退
6、Spine 图片显示出错的处理方法
7、Spine 的自动保存
8、Spine 里改变显示层级 DrawOrder
9、Spine 的帧速率 30fps 默认
10、创建骨骼时直接添加图片子为物体 (2.0.21版开始  Shift 已无效。操作方式变了。
11、动画最后一帧之后还有条 线



1、账号登出 log Out

Spine 的一个序列号只允许安装两台电脑。
如果你想换电脑按装的话,可以在设置里登出。
<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 

<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 
--------------------------------我是坑爹分隔线-----------------------------------
2、Spine 如何调整帧速率

首先:这个问题,被问过无数次,我也答过无数。可还是会有新人来问。

Spine中没有帧速率调整的功能。Spine内部用时间单位记录数据。在播放时默认30fps。
动画师只管按你的Timing调动画,播放时的帧速率是程序去控制的。
至于摄影表或者叫时间轴,那里的帧刻度只是因为动画师的传统习惯,不是真正的按帧记录。

其次:如果你想,可以在Playback里改变预览的播放速度
<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 

speed就是速度,一面有0.5倍,1倍速,2倍速的快捷按键。
Stepped是步进式播放,选上它,播放看看效果就知道了。
这里的改变的是只是预览效果,与导出的动画数据无关。
所以我也奉劝,要把速度改回正常(1倍速)来检查最终结果。

最后:如果你的动画已经做完了,但是发现想整体调整下速度。
这时,你可以交给程序去处理。程序哥只要改个参数就行了。
如果你一定要“作”,那么可以在摄影表里,全选所有的关键帧然后整体缩放,(就像在PS里ctrl+t,然后横拉图片那样)
(我也遇到N多同学问怎么全选这类的问题,方法不只一种,最简单的就是在“动作名称”这一行,
从左向右,框选所有关键帧图标就行了。为什么呢?不解释了,自己思考下。)
<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 

这样可以缩放整体时间,不过你最好事先另存一份,因为这样的操作是破坏性的,你的关键帧会出现小数。
如果你觉得无所谓那就去吧骚粘,你敢死,我就敢埋。
孤的拉克~~~~

--------------------------------我是坑爹分隔线-----------------------------------
3、Spine 如何导出
动画师做完动画后,只需要导出三个文件给程序就可以了。其它的不用再管了,导出时有一些设置,下面会讲。

如果程序没有要求你改,基本就不会动了。
1,主菜单选导出

<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 
2,通常我们是导出JSON格式的动画数据,按下面设置
<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 
Output directory: 存放目录。
Extension:扩展名
Format:文件格式
Nonessential data:
Pretty print:排版输出,如果测试时,可以勾上它。最终打包的件不用勾,文件会小一些。
Ctreate atlas:是否输出 贴图集数据,这个必须要的。

3 对于打包图片的参数设置。这里我只简单的说一下,大多的参数,通常你一辈子也用不着改的。
(要想了解详情可以看这篇教程:Spine 纹理打包器 )
下图由”完美の一“ 提供

<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 

<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 

我只改了一个参数,就是 Output区的 Premultiply alpha 或 Bleed.
如果你导出的图片有杂边,或是出现奇怪的叠加,或是透明通道异常,总之导出图片出问题时
尝试改变一下这里的勾选,看哪种正常就用哪种。(用 Premultiply alpha 正常 还是用Bleed正常,取决于程序如何处理透明通道)
自己试试吧
如果想恢复默认参数,Defaults 按键可以把所有参数重置为默认。
如果你有特殊需求,自己研究其它的参数吧 :
Spine 纹理打包Texture packing_官方文档中文版


--------------------------------我是坑爹分隔线-----------------------------------
4、Spine 如何设置参考图片
有时,你想像 MAX 或 MAYA 那样将一张图片作为参考,spine也提供了类似的功能。

只要你选中一张图,然后在属性栏中把 background背景勾上,场景中就再也不会选中它了。
并且,当你的输出打包图片设置中 Regions区的Ignore blank inmages 忽略背景图勾上时,它也不会被输出了。(这个默认是勾选的)
<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 

--------------------------------我是坑爹分隔线-----------------------------------
5、Spine 版本回退
spine的更新非常频繁,这是好事也是坏事。建议能正常工作的朋友不要急于更新,起码你用来生产的那个机子不要马来更新。

经过测试,确认,你对新版本的功能确实需要,再更新。不然会影响到整个项目的工作进展。
当然如果发现新版本,有BUG,其实Spine是可以回滚版本的。
方法 一:
<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 
在这里选以前的版本,重新启动就可以了。Purge,是清理Updata的缓存。
<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 

方法 二: 

如果是大版本的更新,或是你的设置里没有这个选项可选时,还有个办法。
找到你的 Spine 配置目录,这里新建一个 version.txt 文本文件,里面写上版本号。就行了。
其实,软件里的设置,也就是在这里生成一个txt。
如果你不知道版本号,可以到官网查看升级日志:
http://zh.esotericsoftware.com/spine-changelog

<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 
--------------------------------我是坑爹分隔线----------------------------------- 

6、Spine 图片显示出错的处理方法

http://qgc.qq.com/222369324/t/4


--------------------------------我是坑爹分隔线----------------------------------- 

7、Spine 的自动保存
Spine默认有自动保存功能,保存的文件在从这里找到:

如果遇到 Spine 崩溃的情况,可以试试
<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 <ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 

--------------------------------我是坑爹分隔线----------------------------------- 

8、Spine 里改变显示层级 DrawOrder
Spine 看要改为图片的显示层级,操作很简单就像在PS里拖动图层顺序一样。

并且改变显示层级的操作,还可以记录为关键帧。也就是说,你可以为之设置动画。
唯一要提醒的就是,你得确认你全拖动的是 DrawOrder 节点下的图标,而不是root下的骨骼什么的

看图吧:
<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 


9、Spine 的帧速率 30fps 默认
Spine 默认的帧速率为30fps,但只是个参考。

Spine编辑器中无法设置帧速率,Spine内部使用的是“秒”来记录动画。
摄影表中用“帧”为单位,只是因为动画师的习惯。
因为Spine的动画最终是用在程序中,与动画不同,
游戏中,会根据设备性能不一,动态调整帧速率以达到最佳效果。
所以定死帧速率没有意义。

10、创建骨骼时直接添加图片子为物体
Spine 在 2.0.21版时,改动了创建骨骼时shift 加选图片的功能。流程和热键都不一样了。
http://zh.esotericsoftware.com/spine-changelog

<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享

下面说下如何操作:
1、激活创建骨骼工具。
2、选一个骨骼作为父级。(我这里选了root,别跟前我选root。选你自己要的父骨骼。 <ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 
3、按住 Ctrl 选择要放到新骨骼下的图。(新方法的好处就在于,可以多选了。骨骼的名称,将自动命名为第一个选中的图片。)
4、放开 Ctrl 在你需要的位置,拉出骨骼吧。(这一步其实也比之前的 Shift 要好,用过的都知道,Shift那个方法骨骼的末端只能在目标图片的范围内,很不人性。OK了再自由了,随便哪都行。)

11、动画最后一帧之后还有条线
动画最后面有一根线。但是明显那里没有关键帧。

<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享

1、当前动画是在bbb上建立的。
2、这根线是 spineboy 的由于两套骨架都可见,那么就会出现这种情况。看着这个动画,纠集一根在另一个骨架上的线。

如果你确信,你只有一套骨架,还是在最后一帧后面有这根线。那就是有关键帧没有显示出来罢了。

之前已经有网友提供方法删除方法。
就是在那帧上随便K一帧,然后选中最顶上的白色帧标记(选它就相当于选中了这一帧上所有关键帧。), 再执行删除那么这一帧上的所有关键帧就都删除了。

<ignore_js_op style=‘font: 14px/21px "microsoft yahei"; color: rgb(105, 105, 105); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; widows: 1; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;‘>技术分享 

Spine 实用技巧大全

标签:

原文地址:http://www.cnblogs.com/yyxt/p/4971244.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!