近期热门
粉丝17
关注 0
获赞 38
【新人科普向】Spine应用之立绘动画(流程:构思及诞生)

[Spine] 【新人科普向】Spine应用之立绘动画(流程:构思及诞生)

[复制链接]
28662 87 28 94 6年前 举报
动画从业差不读10年了,辗转动漫游戏感想颇多。不过我还是在坚持,把爱好做成职业,已经比大多数人幸福的多了({:6_227:}其实就是自我安慰,请自行略过

好了,废话不多说。今天开这贴旨在分享下个人的一些旧作品,同时向新人们科普下,Spine的应用及一个Spine动画如何从构思到诞生。

先来看下最终效果   {:6_201:}{:6_201:}{:6_201:}  先说好啊,做的不算好,很多细节都没调整,就当反面教材吧,别拿板砖拍我。这次先选的立绘动画做分享

图片素材来自互联网,自己拆分的切片,具体思路还有过程下面会说。(enmmm为了避免不必要的口水和盗用、抄袭等等,切片我就不分享了,原谅我吧  {:6_212:}{:6_212:}{:6_212:})

首先是简单的面部效果:

简单面部表情

简单面部表情


再来,分别是2套呼吸展示和对应的触发动画:

呼吸1

呼吸1
    甲铁城_湫_1_Touch.gif   其实少表情张了,实在懒得画,胳膊也是,懒得不想修图
第二套:
甲铁城_湫_2_Breathing.gif     甲铁城_湫_2_Touch.gif

好了,下面咱们来讲讲她们的诞生过程。

第一件事,看原图:
甲铁城_湫(原图).jpg    
《甲铁城的卡巴内瑞》大家都看过吧!我觉得蛮好看的吧,还行吧!    {:6_198:} 啊???好像也没多大关系 2333     
反正就是懒吧,搜图片的时候翻个几页就没心思了,就随便找了张(该人物为甲铁城动画  湫)。

接着,好好看下原图(还不是PNG的23333还要抠图的说{:6_200:}),分析下角色和初步构思我们想做什么。
这里插句话,Spine之所以现在比较普及,原因之一就是强大的二维图片MESH功能。可以最大程度实现原汁原味的二次元动画。相比三渲二呢成本较低。同时因为工作机制,应用的图集展开动画较之传统的序列帧动画是很省资源的。

咱言归正传。人物比较可爱,接着就会想好漂亮,再接着就是卡哇伊,enmmmm再就是 “索迪斯奈”  {:6_200:}额,反正天马行空,怎么着都成吧。
是不是想些羞羞的事情呢?那么下一步就是确立初期思路以及分析可行性 (这里吐槽下,大多数研发团队的二五仔大佬真的是只会想啥是啥,甭废话先做、、、苦的是广大美术从业者们啊)

到了这一步呢,我就简单想低配模仿Live2D的动画效果。给她做2套呼吸动作,对应2套触发。最简单那个面部表情,其实就是我试验切片合理性布的草稿,不想浪费,也还能见人,就也分享了。

第二件事,比较麻烦的来了。就是切片。往往我们想得很好,怎么样怎么样动作才对啊,那样才好看啊,才酷炫啊。但请注意,这毕竟是二维的,不可能全部补帧做成逐帧动画对不对?你再要多么狂霸酷炫吊炸天,那请你花钱去3D,CG类的吧。
当然作为爱好者们可以无限发挥潜力,真的可以很牛掰很牛掰{:6_201:}我觉得我是懒,还差得远、、、

又说远了,回来接着看切片。
想法上是最基本的呼吸,对应触发我想做一个羞羞的动作,那就抱胸吧。这就考验原画和预想经验了(本人捣鼓半天还是没能画好,就将就着用了,其实羞羞抱胸感觉没表达到位)
我们看切片准则:
甲铁城_湫_如何拆图.jpg

想要尽可能细致地表现画面,就需要我们拆分切片也精细些。这里大概分成头胸腰身和双臂,以及面部五官、头发的处理。很多复杂的角色还涉及到配饰、飘带等等。
大的准则就是宁全勿缺,每个部件都是要相互叠加起来看效果的,切不要一刀切两半。{:6_227:}曾经无数次啊,告诉原画出图要出全,结果一条胳膊一刀切,关节还是得我自己来补全、、、

想得差不多了,就开始动手吧,切片这活儿也是很锻炼绘画能力的。我是属于很多年不画画的那种,所以磨磨蹭蹭也是废了不少事。
一边画一边切,过程中你会发现之前没考虑到的部分。实践是很重要的。那么,咱接着往下说:
切片.png

切片做好后,注意图层顺序,命名不要有中文字,确保每个切片都“干净”,不要有多余留白,要不然程序该吼了  {:6_220:}
之后我们导出数据、图集,准备转移阵地。
切片1.png

第三件事,创建骨骼,蒙皮。具体的打点布线,权重分配,这里就不详述了。这个东西凭感觉,做的多了,积累多了,自然就有经验,有预见怎么弄了。
大概要点就是,顺着结构建骨骼,顺着纹理布点,极简主义。想要做Mesh转面的话,尽量将权重分配到骨骼上控制。

导入数据到Spine,正式开始制作动画。

Spine导入.png     骨骼蒙皮.png

恩、、、恩???恩!!!
那么,就到这里吧,发现其实也没啥好讲的  {:6_220:}{:6_220:}{:6_220:} 23333估计会被打死吧。说真的,确实没了、、、
给下面部的细节调整截图,仅供参考!仅供参考!仅供参考!重要的事情说三遍,免得被人说我瞎 j 8 下定义 画标准  误人子弟、、、

面部1.png    面部2.png   
面部3.png    面部4.png

enmmmm别往下翻了,真没了。最后再附赠分享下我用Flash做的预览文件(用支持Flash播放器的浏览器直接打开就好了,MAC 我不管{:6_212:}{:6_212:}{:6_212:})

不收费了,就当给自己打个广告,各位爷心情好的话,就打赏下!

Qiu_.swf
链接: https://pan.baidu.com/s/1snoMtI1 密码: wz9t



28
点赞
0
打赏
94
添加到收藏夹

0

点击复制链接

使用微信扫码分享
一次扣10个券
全部评论87
您需要登录后才可以回帖 登录 | 立即注册

厉害了我的哥!
6年前
回复

使用道具 举报

啥也不说了,楼主就是给力!
6年前
回复

使用道具 举报

老司机带带我好不好!
6年前
回复

使用道具 举报

厉害了我的哥!
6年前
回复

使用道具 举报

出来吧皮卡丘
6年前
回复

使用道具 举报

看看.........
6年前
回复

使用道具 举报

期待更多教程
6年前
回复

使用道具 举报

看看~~~~~
6年前
回复

使用道具 举报

厉害了我的哥!
6年前
回复

使用道具 举报

数据加载中....
没有更多评论了