1787人阅读
游戏引擎/GUI的设计与实现（6）
最近开始用cantk做些复杂的游戏，其中一个游戏的DragonBones骨骼动画的JSON文件就达600K，导出之后显示各种不正常，可能是太复杂了，有些方面达到了DragonBones的极限。拿到官方的补丁仍然还有些问题，不爽的是新版本有一万多行代码，是老版本的三倍之多。据说骨骼动画Spine做得更好，而且Spine.js只有两千多行代码，决定为cantk加上Spine的支持。
为写一个插件支持Spine是非常简单的，只要增加一个ShapeCreator就行了：
function UISpineCreator() {
var args = ["ui-spine", "ui-spine", null, true];
ShapeCreator.apply(this, args);
this.createShape = function(createReason) {
var g = new UISpine();
return g.initUISpine(this.type, 200, 200);
ShapeFactoryGet().addShapeCreator(new UISpineCreator());
在集成过程中，下面几点比较有意思：
一、使用TexturePacker打包图片。缺省例子的图片是分离的，有好几十张小图片，这并非好的做法。我决定像DragonBones一样把它们打包成一张大图。Spine.js写得非常好，这个改动很轻松:
var rootPath = this.textureJsonURL +'#';
var json = new spine.SkeletonJson({
newRegionAttachment: function (skin, name, path) {
var src = rootPath + path + ".png";
var attachment = new spine.RegionAttachment(name);
attachment.rendererObject = WImage.create(src);
newBoundingBoxAttachment: function (skin, name) {
return new spine.BoundingBoxAttachment(name);
WImage是对HTML Image的包装，支持TexturePacker打包的图片和几种自动切图的方式。
二、播放完成时的回调函数。游戏通常需要在播放一个动作之后做些处理，比如播放声音或发射武器之类的东西。官方例子里并没有这种用法，看了一下实现的代码，里面已经提供相应的机制：
UISpine.prototype.gotoAndPlay = function(animationName, repeatTimes, onDone, onOneCycle) {
var me = this;
this.animationName = animationN
if(this.spineState) {
var track = this.spineState.setAnimationByName(0, animationName, true, 0);
track.repeatTimes = repeatTimes ? repeatTimes : 0xffffffff;
track.onComplete = function(i, count) {
this.repeatTimes--;
if(this.repeatTimes &= 0) {
this.loop = false;
if(onOneCycle) {
onOneCycle.call(me);
if(onDone) {
onDone.call(me);
if(onOneCycle) {
onOneCycle.call(me);
return this;
三. 缩放的处理。我发现只有在加载时才能指定scale，不太灵活，所以决定在绘制时自己缩放吧：
var ay = this.h;
var ax = this.w && 1;
var scale = this.animationS
this.update(canvas);
canvas.translate(ax, ay);
canvas.scale(scale, scale);
Spine Runtimes:
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：3559636次
积分：43491
积分：43491
排名：第55名
原创：656篇
转载：66篇
评论：3090条
(1)(1)(3)(2)(5)(2)(6)(3)(4)(2)(1)(1)(2)(4)(3)(6)(2)(4)(1)(2)(3)(1)(1)(2)(2)(6)(13)(8)(20)(8)(17)(14)(23)(23)(1)(7)(5)(7)(11)(10)(2)(20)(15)(9)(12)(10)(3)(2)(12)(7)(4)(2)(10)(24)(2)(12)(10)(9)(10)(13)(4)(9)(6)(13)(15)(19)(30)(20)(21)(34)(23)(37)(38)(3)(4)(9)(2)(11)一、SPINE使用
研究2D骨骼动画，CYou的朋友介绍我SPINE这个工具，开发自Esoteric&Software的一款专门制作2D动画的软件，网络上的资料还很少，我这从半吊子美术技术的角度简单说一下使用教程。
有几个不错的地方：
1、美术制作前准备的贴图为一堆小切片图。不用非得拼成一张atlas，spine会做这一步，详见步骤七，
导出数据时会动态的将切片合并到同一个到N个atlas中，合并的策略会考虑我们设置的atlas的尺寸。
2、方便换装和BODYPART：
& & & & SPINE的数据结构中包括Bone和SLOT。其中Bone既为骨骼节点数据，Slot槽理解为挂接在Bone上的虚拟点。同一个骨骼节点或者槽下只能有一张贴图切片。
& & & & 因此如果某骨骼上需要有两把刀的情况，可以是骨骼上设置Slot来辅助实现。不过有如下一些约束：
& & & & 同一个骨骼下只能有一张贴图，且spine貌似没提供关闭这张帖图的方法，因此理解为这个图为必有得骨架贴图。
& & & & 同一个SLOT下可以有多张图，例如SLOT2，左边的灰点儿表示现在那张图正在使用中。
& & & & & & & & & & &&
3、&DrawOrder，可以通过拖动控制切片的渲染顺序。例如控制眼睛要画在脸前面。
4、可以制作多个SKIN，SKIN可以满足整个SKIN的切换。
二、TO Unity
Spine 自带了预制运行库 Spine runtimes，这是一个奇妙的方式&在你的游戏中添加读取 Spine 文件的代码，然后它为创建动画。&Spine 的运行库，支持目前主流的游戏引擎 Unity3D, Sprite Kit, cocos2d 等等。
我这里把做好的SPINE示例导入到UNITY中，并使用API实现换武器和头部。
阅读(...) 评论()干货：使用Spine制作柔性的骨骼动画详解
干货：使用Spine制作柔性的骨骼动画详解
缘起缘起是要实现一个需求，即寻找一个能制作如下图所示腿部弯曲动画的工具。由于要求不能使用序列帧动画，因为一旦弯曲效果不理想需要全部重画，美术的工作量会很大，而且序列帧动画的图量也会很大。一番寻找后，发现骨骼动画工具可以完美的满足需求，并且其支持众多游戏引擎，包括我们正在使用的Cocos2d-x。下文将会简略介绍骨骼动画的一些基本术语以及如何用Spine做出柔性弯曲的骨骼动画。一些基本概念以下将介绍一些骨骼动画的基础概念，便于对骨骼动画不甚了解的童鞋（比如技术）进行扫盲。已经熟悉骨骼动画的童鞋可以直接跳过。动画的基本原理动画，顾名思义，即是能动的画，画能随着时间的推移进行变换，从而给人产生一种连续在动的感觉。在游戏里动画大体有两种制作方式：逐帧动画和补间动画。逐帧动画即为每一帧画出一张图，然后通过按照一定速度（帧率，每秒多少帧）来播放这些画好的图，从而达到动画的效果。补间动画则比较偷懒，它不为每一帧绘制一张图，而是对一个「动」的形体设置关键帧，而关键帧之间则通过不同的插值算法进行自动补全中间帧的形体的变化轨迹。相比于逐帧动画，补间动画更加节省图片，使动画运行时的内存更少和最终包的大小更小，同时也减少了原画的工作量，但其画面的表现可能会略逊于逐帧动画。其中的利弊需要开发者进行平衡取舍。关键帧（key frame）关键帧其实就是要动的形体发生「变化」且我们手动记录这些变化的帧，剩余的其他帧则称为补间帧。关键帧称为「关键」的原因就是每个补间帧上形体的形变参数都是程序根据其前后两个关键帧自动推导出来的。假设形体在第A帧的位置为PA，我们将这帧标记为关键帧，这个动作一般称为“K帧”。然后在第A+N帧，形体的位置我们设置为PN，我们在A+N帧进行K帧。这样我们就有两个关键帧，当我们播放从A到A+N帧的动画时，我们会发现形体会有从PA到PN的一个位移动画。骨骼动画（skeleton animation）想象一个你坐在电脑前打字，你的手指在移动，同时你的手腕也在移动，但是你的躯干却保持不动，你的肘部也固定在桌面上。这一切都是因为你的骨骼驱动了你的肌肉和皮肤，从而使你完成了一系列打字的动作。骨骼动画即是利用了这个原理，它是一种补间动画。它由两部分组成：骨骼（bone）和蒙皮（skin/mesh）。蒙皮是素材，可以认为是一张贴图，它显示了动画的外在表现。骨骼本身是不可见的，但对其进行形变会带动蒙皮进行各种形变，从而产生出各种看起来比较真实的动画。蒙皮动画（skinned animation）一般情况下，一根骨骼通常跟一个贴图进行绑定，这根骨骼完全控制这张贴图的形变。但是因为是刚性的绑定，在关节移动的时候，容易出现裂缝，如下图。 随着硬件的能力提升，骨骼动画能对贴图的每个顶点做出形变。称为蒙皮（skin）的圆滑三角形网格会绑定到骨骼上，其三角形的顶点会追踪骨骼的移动而产生相应的移动。蒙皮上的每个顶点可以按照权重绑定到多个骨骼上，从而产生自然的拉伸效果。本文最开始提到的腿部柔性弯曲效果就可以利用蒙皮动画来实现。权重（weights）上文提到了权重，其实是一个很关键的概念。权重是蒙皮上的顶点受到不同骨骼的一个影响因子。其总和为1。想象一下你弯曲你的肘部，试想你肘部靠前臂上的皮肤的一个点，它主要受到前臂骨骼的影响，但是它也受到上臂骨骼的一些影响。假设其受到前臂骨骼的影响占到它总形变的80%，则它的前臂骨骼的权重为0.8，相应的上臂骨骼对它的权重为1 – 0.8 = 0.2，因为其他骨骼对它的影响可以忽略不计。以上即是权重的直观概括，权重表示了蒙皮受到不同骨骼的对其形变影响占比，合理分配好每个蒙皮顶点的权重至关重要。幸运的是Spine可以为我们自动计算权重，避免了繁琐的权重设置，并且能够让我们看到直观的权重分布图。如何利用Spine制作蒙皮动画？我们以一个男孩的手为例，来讲述如何在Spine中制作这种柔性的蒙皮动画。创建骨骼首先我们需要创建手部的骨骼，如下图所示：确保左上角为SETUP模式确保选中右边视图中的根骨骼，创建骨骼时必须要选中父骨骼单击左下角的Create按钮开始依次创建出5根骨骼创建蒙皮网格然后我们需要给手部创建蒙皮网格（MESH），如下图所示：首先，单击创建骨骼的Create按钮，退出骨骼创建模式：选中手部贴图（Attachment）勾选其底部的Mesh选项单击右下角的Edit按钮呼出了Edit Mesh菜单勾选Edit Mesh菜单中的Deformed选项单击Edit Mesh菜单中的Create按钮开始在手部创建网格顶点可以单击Edit Mesh菜单中的Modify按钮对顶点进行位移设置网格点权重还记得前文所说吗，我们需要给网格顶点设置各个骨骼的权重，整个过程如下图所示：首先，关闭Edit Mesh菜单：确认勾选的还是手部的贴图单击左下角的Weights按钮，呼出Weights菜单单击Weights菜单底部的Bind按钮，来绑定骨骼选择手部的五根骨骼，直到它们都出现Weights菜单里，注意不同的骨骼颜色是不一样的单击Weights菜单的Auto按钮或者按esc键，来触发Spine的自动权重计算勾选Weights菜单的Overlay，我们可以看到绑定后的权重热力图动起来！现在我们要让手动起来了，我们只展示一个弯曲手臂的动画即可。首先，我们需要设置关键帧，让我们在第1帧和第30帧设置好关键帧，这两个关键帧对应的手臂位置是完全一样的，因为我们需要循环播放动画。具体步骤如下图：确保左上角的模式处于ANIMATE模式选中手部的五根骨骼（按住cmd键或control键依次点选）选中第0帧单击Rotate下的钥匙按钮，我们对手臂的旋转属性设置关键帧选择第30帧重复第4步的操作，使第30帧的关键帧与第0帧完全相同接下来我们只需轻轻旋转手臂，并在0-30帧中间找一个帧当做关键帧即可： 我们选择第15帧作为中间的关键帧。选择第15帧确保Rotate按钮被选中向上旋转5根骨骼到一个角度按下K帧按钮进行关键帧设置按下播放按钮来预览动画额外的，我给另一只手、嘴巴、脸部和头发都做了MESH，以下是动画的效果图：可以看到，Spine完美的实现了文章开始提到的柔性弯曲动画。以下是Spine的一些参考资料的链接：
发表评论：
TA的最新馆藏怎么把一张大图切成几张小图
帖子15&缘分币0 Y&阅读权限10&注册时间&
05:28 
怎么把一张大图切成几张小图
我知道论坛里已经有了不少的帖子是关于切片的，但是我的IMAGEREADY用不了，看了那些帖子对我几乎没有帮助，所以自己想自己开一个帖子问一下，怎么把一张大图切成几张小图片，不用IMAFEREADY的，还有，为什么我进不去下载PS CS4。0的帖子？
UID1021849&精华&积分15&威望0 F&回复币33 B&警告0 次&贡献0 &金币0 个&学分0 点&性别女&最后登录&
ｘ﹎ ·小一︶ㄣ
帖子5374&缘分币11370 Y&阅读权限50&注册时间&
你要切的是动画么？
为什么用IR&&直接用PS&&切片工具 切完存储为web格式就好了
帖子15&缘分币0 Y&阅读权限10&注册时间&
回复 沙发 Double_One 的帖子
不是动画，是我分了几块之后保存了还是跟原来一样，没有切。
保存为WEB格式？那个是灰色的，也用不了。跟IR一样。
[ 本帖最后由 冰凉颖心 于
08:46 编辑 ]
UID1021849&精华&积分15&威望0 F&回复币33 B&警告0 次&贡献0 &金币0 个&学分0 点&性别女&最后登录&
ｘ﹎ ·小一︶ㄣ
帖子5374&缘分币11370 Y&阅读权限50&注册时间&
要想切片的话 就必须是保存为web格式 除非你想一个一个的另存
灰色的话 那应该是你右边的属性框没选对
如果不坚持,何必当初那么努力
帖子150539&缘分币501331 Y&阅读权限255&注册时间&
确保你的图片模式是RGB
直接用PS CS4就可以切片 保存为WEB所有格式即可
会你另外一个问题 CS4下载帖子刚刚测试没有任何问题 请检查自己的问题
如果您在做图或者看教程（PHOTOSHOP方面），遇到任何问题请到问题交流区提问，地址：；我们会在第一时间帮助您解决问题，如果在教程后面跟帖，一律不给予解决！~
UID1&精华&积分458739&威望25450 F&回复币50481 B&警告0 次&贡献2117557 &金币2 个&学分0 点&性别男&来自上海&最后登录&
帖子15&缘分币0 Y&阅读权限10&注册时间&
回复 板凳 Double_One 的帖子
那一个一个的另存怎么存？那怎么选？？
UID1021849&精华&积分15&威望0 F&回复币33 B&警告0 次&贡献0 &金币0 个&学分0 点&性别女&最后登录&
帖子10&缘分币0 Y&阅读权限10&注册时间&
？？？？弄好你想要的小片，分别保存不行吗
如果不坚持,何必当初那么努力
帖子150539&缘分币501331 Y&阅读权限255&注册时间&
回复 6F 冰凉颖心 的帖子
我和纳闷的你话
方法不是告诉你了吗 切片保存以后本来就是一块一块小的图片
为什么不先做一次呢 彻底的无言
如果您在做图或者看教程（PHOTOSHOP方面），遇到任何问题请到问题交流区提问，地址：；我们会在第一时间帮助您解决问题，如果在教程后面跟帖，一律不给予解决！~
UID1&精华&积分458739&威望25450 F&回复币50481 B&警告0 次&贡献2117557 &金币2 个&学分0 点&性别男&来自上海&最后登录&
如果不坚持,何必当初那么努力
帖子150539&缘分币501331 Y&阅读权限255&注册时间&
回复 7F best2008cn 的帖子
一次保存就会得到所有的切片小图 为什么要分别保存呢?不解
如果您在做图或者看教程（PHOTOSHOP方面），遇到任何问题请到问题交流区提问，地址：；我们会在第一时间帮助您解决问题，如果在教程后面跟帖，一律不给予解决！~
UID1&精华&积分458739&威望25450 F&回复币50481 B&警告0 次&贡献2117557 &金币2 个&学分0 点&性别男&来自上海&最后登录&
ｘ﹎ ·小一︶ㄣ
帖子5374&缘分币11370 Y&阅读权限50&注册时间&
引用:原帖由 冰凉颖心 于
01:24 发表
那一个一个的另存怎么存？那怎么选？？ 偶说一个一个另存 那是一般人都不采纳的办法
选择的话 确保是RGB 然后存web时的弹出框里选择jpg(这个质量高)
如果你是用于制作网页的话 那建议存gif
存gif的时候 可选择 随样性什么的都可以
看哪个效果好些 只要不选择那个灰色就可以了
当前时区 GMT+8, 现在时间是原地址：/hellohuan/p/3716346.html
、SPINE使用
研究2D骨骼动画，CYou的朋友介绍我SPINE这个工具，开发自Esoteric&Software的一款专门制作2D动画的软件，网络上的资料还很少，我这从半吊子美术技术的角度简单说一下使用教程。
有几个不错的地方：
1、美术制作前准备的贴图为一堆小切片图。不用非得拼成一张atlas，spine会做这一步，详见步骤七，
导出数据时会动态的将切片合并到同一个到N个atlas中，合并的策略会考虑我们设置的atlas的尺寸。
2、方便换装和BODYPART：
& & & & SPINE的数据结构中包括Bone和SLOT。其中Bone既为骨骼节点数据，Slot槽理解为挂接在Bone上的虚拟点。同一个骨骼节点或者槽下只能有一张贴图切片。
& & & & 因此如果某骨骼上需要有两把刀的情况，可以是骨骼上设置Slot来辅助实现。不过有如下一些约束：
& & & & 同一个骨骼下只能有一张贴图，且spine貌似没提供关闭这张帖图的方法，因此理解为这个图为必有得骨架贴图。
& & & & 同一个SLOT下可以有多张图，例如SLOT2，左边的灰点儿表示现在那张图正在使用中。
& & & & & & & & & & &&
3、&DrawOrder，可以通过拖动控制切片的渲染顺序。例如控制眼睛要画在脸前面。
4、可以制作多个SKIN，SKIN可以满足整个SKIN的切换。
二、TO Unity
Spine 自带了预制运行库 Spine runtimes，这是一个奇妙的方式&在你的游戏中添加读取 Spine 文件的代码，然后它为创建动画。&Spine 的运行库，支持目前主流的游戏引擎 Unity3D, Sprite Kit, cocos2d 等等。
我这里把做好的SPINE示例导入到UNITY中，并使用API实现换武器和头部。
阅读(...) 评论()