Spine动画教程:皮肤制作

一、前言

搁了很久的抖音直播小玩法开发,最近又让我想起来了。由于是初次尝试,所以我将开发费用的预算降到为零。不但不买服务器采用UnitySDK的指令直推,而且游戏的资产也用AI生成,主打省时又省钱。

但是图片有了,动画还是得自己做,于是我又从零开始学了一下Spine动画制作。整个过程也是有很多值得记录下来的,比如制作皮肤的教程,网上还是比较少,问DeepSeek也不全,做完后导入Unity3D报错等问题。所以,跟着我这篇文章动手走一遍,还是能快速制作动画皮肤的。

二、工具

Spine 3.8.75

spine-unity-3.8-2021-11-10

三、皮肤制作

在动手制作前,可以先对照一下自己的Spine版本,和Unity3D的Spine插件版本,后面我会说一个很有意思的导入问题,那下面就开始如何制作皮肤了。

1.简单的图片皮肤示例

1.1.画面创建

导入两张形状一致,但纹理不同的图片,然后两张图全部绑定在一个骨骼下,层级结构参考下图。

1.2.添加皮肤

在层级树的皮肤中,点击创建两个皮肤,名字自定义。

1.3.创建皮肤占位符

在层级树中选择一个皮肤,点击左边的 "眼睛(小圆点,表显示)",然后选中某插槽下的一个附件(图片)。选择后再点击下面的 "新建" -> "皮肤占位符"。,名字自定。

1.4.检查皮肤切换

通过点击皮肤左边的眼睛按钮,看看能不能展开皮肤占位符里的附件,因为给附件添加皮肤占位符后,就被折叠进占位符中了。

1.5.创建动画

进入动画模式后,点击两张图片上的骨骼,在摄影表中给该骨骼添加移动的关键帧,最后我们在播放时就可以切换皮肤了。

2.简单的网格皮肤演示

装配和上面图片的皮肤示例一样,但是在绑定骨骼前,现对图片网格处理(蒙皮),然后绑骨骼,刷权重。

2.1.网格编辑

点击图片->勾选网格->编辑网格->新建,然后对图片的轮廓围起来(像PS里的钢笔一样操作)。

2.2.添加骨骼

选择自定义的根骨骼,按照预期的动画效果,添加几个骨骼。

2.3.给网格绑定骨骼

选中网格,点击添加骨骼上方的 "权重" 按钮,弹出一个权重窗口,点击绑定,然后将下面添加的几个骨骼选中(按ctrl多选),最后再点一下绑定。

2.4.添加皮肤

第二张图片重复前面的添加网格,但是不用再新建骨骼,和第一张共用,皮肤切换的作用就在这里了,多个皮肤共用一套骨骼动画。

就像我们玩游戏的时候,不管怎么换皮肤,英雄的招式是一样的,当然打击特效可能也拆分出了皮肤除外。

2.5.创建皮肤占位符

皮肤添加和占位符创建和前面的图片皮肤示例一样,只是这次是点击网格而不是附件了。

四、导出与导入

导出是在Spine中导出能在Unity3D中使用的动画文件,这里要注意格式和添加方法,还有前面提到的导入游戏引擎中报错问题。

Spine导出

点击导出,选择 "JSON",确定输出文件夹后,点击 "打包设置",为了被Unity3D支持,图集扩展名要加上 ".txt"。

导入Unity3D

从Spine导出后有三个文件,分别是atlas.txt的图集文件,json数据和png贴图。

放入一个文件夹后直接复制到Unity3D项目的Resources后,游戏引擎会再生成一个atlas和skeletonData的asset文件,以及一个mat文件。

进入编辑器中,只需要将SkeletonData.asset拖到场景中即可。

导入运行报错

当我第一次导进去后就提示错误:Error reading skeleton JSON file for SkeletonData asset: skeleton_SkeletonData Unsupported skeleton data, please export with a newer version of Spine。

根据提示是导出的Spine文件版本太低,其实就是我安装的Spine-Unity插件和Spine3.8.75不匹配。一般的做法就是换新版Spine,或安装低版本Unity插件,但是我这次就对比了一下可以使用的spine动画json文件。

发现格式都差不多,唯一不同的只是skeleton下的spine版本号,原本的是3.8.75,当我改成3.8.99重新加载进去后竟然就可以了。这整得我也是很无语,就只是校验了一下版本号,我还以为是格式不对。

五、写在后面

其实想要快速制作游戏动画,还有以一种更好的方法,那就是序列帧动画。首先将AI生成的图片,再输入指定动作的提示词,用图生视频。然后将视频拆成图片帧,最后只需要挑选一些抠图做成图片精灵就可以了。

虽然我一开始就是这样想的,但是了解到Spine优点后就放弃这种方式。第二个原因,通过学习Spine我可以可持续制作动画贴图,还能上传到平台赚取收益,以后有时间我也会不定时地更新Spine动画制作小案例。

相关推荐
222you6 小时前
Claude Code接入DeepSeek-v4模型
java·服务器·前端
轻口味6 小时前
AI 时代全栈开发破局:TypeScript 生态实战,从入门到部署一站式通关
前端·mongodb·docker·ai·typescript·react·next.js
ZC跨境爬虫6 小时前
跟着MDN学HTML_day_45:(EventTarget接口)
前端·javascript·ui·html·媒体
漂移的电子7 小时前
【el-tree】外层多选,某个属性内层单选
前端·javascript·vue.js
BJ-Giser7 小时前
Cesium 体积光阴影率分析和阴影体渲染效果
前端·可视化·cesium
幽络源小助理7 小时前
YK一点资讯Zblog主题源码, 游戏攻略新闻资讯模板
前端·php源码
RPGMZ7 小时前
RPGMZ NPC头顶自动显示一段消息
前端·游戏引擎·rpgmz·rpgmakermz
DFT计算杂谈7 小时前
AMSET 设置多核并行计算
java·前端·css·html·css3
花椒技术7 小时前
AI 协同开发落地复盘:1 小时生成首版后,为什么 Review 和修正又花了 2-3 天
前端·人工智能·架构
万少8 小时前
万少用9个AI工具,帮朋友完成了一个"不可能"的项目
前端