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动画制作小案例。

相关推荐
JC_You_Know25 分钟前
多语言网站的 UX 陷阱与国际化实践陷阱清单
前端·ux
Python智慧行囊31 分钟前
前端三大件---CSS
前端·css
Jinuss1 小时前
源码分析之Leaflet中Marker
前端·leaflet
成都渲染101云渲染66661 小时前
blender云渲染指南2025版
前端·javascript·网络·blender·maya
聆听+自律1 小时前
css实现渐变色圆角边框,背景色自定义
前端·javascript·css
牛马程序小猿猴2 小时前
17.thinkphp的分页功能
前端·数据库
huohuopro3 小时前
Vue3快速入门/Vue3基础速通
前端·javascript·vue.js·前端框架
草巾冒小子3 小时前
vue3中解决 return‘ inside ‘finally‘ block报错的问题
前端·javascript·vue.js
互联网搬砖老肖3 小时前
Web 架构之高可用基础
前端·架构
zfyljx3 小时前
五子棋html
前端·css·html