Spine2d 零基礎(chǔ)新手快速上手教程

Spine2d一款功能強(qiáng)大的2D動(dòng)畫綁定軟件巍虫,在游戲制作中一直有著很高的地位揖赴。目前來(lái)說(shuō),Spine2d常用的幾個(gè)場(chǎng)景有下面四個(gè):


1.以2D為主體游戲奸忽,橫版叠殷,RPG等等改鲫,Spine2d會(huì)在制作過(guò)程中幫助動(dòng)畫師處理,人物動(dòng)作林束。

2.動(dòng)態(tài)立繪像棘,目前來(lái)說(shuō)動(dòng)態(tài)例會(huì)在手機(jī)游戲中很吃香,所以很多工作室就使用Spine2d來(lái)做動(dòng)態(tài)立繪壶冒,當(dāng)然還有另外一款軟件更適合做動(dòng)態(tài)立繪——Live2D缕题,不過(guò)這個(gè)軟件是訂閱制,價(jià)格比較高胖腾,所以一般個(gè)人開(kāi)發(fā)也都選擇Spine2d烟零,因?yàn)槭琴I斷制,一次付款咸作,終身享受锨阿。?

3.片頭過(guò)場(chǎng),這一個(gè)在一些體量比較小的游戲上使用的會(huì)比較多记罚,用Spine2d來(lái)做出人物立繪一樣的動(dòng)效墅诡,之后加入AE處理,duang的特效桐智,最后就可以呈現(xiàn)比較好看的短片末早。

4.UI動(dòng)效,最常見(jiàn)的就是一些比較可愛(ài)的Q版游戲酵使,點(diǎn)擊按鈕點(diǎn)一下會(huì)有些扭曲荐吉,這就是用來(lái)制作UI的結(jié)果焙糟,還有就是特效口渔,通過(guò)圖片的疊加或者變換,來(lái)得到不錯(cuò)的視覺(jué)效果穿撮。

以上就是目前游戲制作通常會(huì)用到Spine2d的4個(gè)方向缺脉。


本文主要以0基礎(chǔ)快速上手為主痪欲,總的來(lái)說(shuō)就是導(dǎo)入原畫切片,綁定骨骼攻礼,建立網(wǎng)格业踢,添加動(dòng)畫這些基本操作,一步一步認(rèn)真讀礁扮,教程沒(méi)有太多圖片知举,認(rèn)真讀完,保證會(huì)有一個(gè)基本的收獲——上手完成太伊,之后自然就可以去看更高級(jí)的教程了雇锡。

萬(wàn)事要多學(xué)多練,上手不代表入門僚焦,入門不代表會(huì)用锰提,一起加油!

廢話少說(shuō)芳悲,開(kāi)始:


切片導(dǎo)入(以PS為例)

將原畫的圖片放入PS立肘,使用PhotoshoptoSpine插件將分層圖片導(dǎo)出png(做sprite用)+json文件

拖拽json文件到Spine軟件中,會(huì)提示導(dǎo)入json文件到Spine名扛,確定就好谅年。

人物到軟件中一般不會(huì)準(zhǔn)確的在世界水平以上(原點(diǎn)),仔細(xì)看肮韧,視圖中心X和Y軸交點(diǎn)有個(gè)遠(yuǎn)點(diǎn)踢故,將人物放到這個(gè)原點(diǎn)之上,保證人物可以站在地面上惹苗。

之后存檔殿较,點(diǎn)擊左上Spine菜單,存好這個(gè)文檔就ok桩蓉。


建立骨骼

導(dǎo)入完圖片后需要綁定骨骼淋纲,或者給圖片制作網(wǎng)格,不過(guò)還是建議先做骨骼院究,因?yàn)橛辛藘?nèi)在才好做外在洽瞬,至少我是這樣認(rèn)為的。

在左下找到新建的選項(xiàng)业汰,一個(gè)骨骼的突變伙窃,開(kāi)始綁定,綁定的時(shí)候記住尾椎的位置先點(diǎn)一個(gè)點(diǎn)样漆,作為角色的重心为障,之后向上做腰骨,胸骨,胸骨和脖子直接最好有個(gè)衍生骨(我自己是這么稱呼的)鳍怨,之后是脖子呻右,頭,正常比較簡(jiǎn)單的人物是這個(gè)順序鞋喇,之后雙機(jī)空白處左鍵声滥,取消建立;

之后選擇衍生骨侦香,在左側(cè)做上臂落塑,下臂,手罐韩,這樣做是為了在之后綁定權(quán)重的時(shí)候芜赌,手臂可以以衍生骨為父級(jí),好控制伴逸,同時(shí)也美觀缠沈,右臂同理,不多贅述错蝴。

之后是腿骨洲愤,同樣操作,點(diǎn)擊最開(kāi)始做的那個(gè)重心點(diǎn)(骨盆)顷锰,之后向下拉大腿柬赐,小腿,腳官紫。

備注:拉手臂和腿的時(shí)候要注意肛宋,手要成一個(gè)“倒單立人旁”的樣子,腿要成“橫折捺”的樣子束世,如圖我已經(jīng)畫了酝陈,因?yàn)橐婕暗絀K反動(dòng)力綁定,做飯了就成動(dòng)物了毁涉,很詭異沉帮。


網(wǎng)格變形

做好骨骼,選取Sprite切片贫堰,勾上網(wǎng)格穆壕,新建網(wǎng)格,新增網(wǎng)格其屏,開(kāi)始繪制

繪制很簡(jiǎn)單喇勋,記住常用規(guī)則,不會(huì)彎曲的骨頭至少兩個(gè)點(diǎn)(手臂偎行,小臂)川背,關(guān)節(jié)(手肘贰拿,手腕,腰部渗常,膝蓋,腳腕)三個(gè)點(diǎn)汗盘。其他的隨意皱碘。

完成后移動(dòng)網(wǎng)格點(diǎn),與骨骼對(duì)齊隐孽。

使用建立 選項(xiàng)癌椿,修改布線,因?yàn)橹罢f(shuō)了手肘菱阵,膝蓋這種關(guān)節(jié)要各三個(gè)點(diǎn)踢俄,所以布線修改的時(shí)候,要以左側(cè)中間點(diǎn)向?qū)γ姘l(fā)射三條線晴及,兩邊的點(diǎn)連線即可都办,而手腕這種,直接三條線相連即可虑稼。

手肘與手腕網(wǎng)格布線參考如下琳钉,這樣做可以讓人物動(dòng)起來(lái)看著更好看。最后點(diǎn)擊編輯網(wǎng)格蛛倦,完成編輯歌懒。

PS:衣物,裙子等溯壶,如果想要整齊的效果及皂,最好點(diǎn)和點(diǎn)之間等距。

開(kāi)始綁定

切片綁定:選擇sprite且改,設(shè)定父級(jí)验烧。

網(wǎng)格綁定:選擇網(wǎng)格,工具欄Tools選擇權(quán)重又跛,綁定噪窘,選擇要綁定的骨骼,選擇自動(dòng)權(quán)重效扫。

手動(dòng)修改權(quán)重:點(diǎn)擊網(wǎng)格點(diǎn)倔监,選擇骨骼,上下移動(dòng)鼠標(biāo)更改菌仁。

PS:可以批量(按住ctrl)選擇網(wǎng)格點(diǎn)浩习,選擇骨骼,更改權(quán)重济丘。


設(shè)置IK

一般最多兩根骨頭谱秽,頭發(fā)需要使用路徑約束洽蛀。

腿(適用于手)IK約束:

按住Ctrl選擇兩根腿骨,點(diǎn)擊建立IK反向約束疟赊,之后選擇位置(一個(gè)點(diǎn))來(lái)確定IK所在位置郊供,一般選擇小腿骨的尖端,就是小腿骨和腳骨相連的地方(對(duì)三段式簡(jiǎn)易骨骼來(lái)說(shuō))近哟。

頭發(fā)路徑約束:

要先確定路徑附著的骨骼驮审,選擇新增 > 路徑,之后繪制路徑曲線吉执。之后選中要約束的骨骼疯淫,點(diǎn)擊路徑約束,完成約束戳玫。

選中路徑熙掺,右側(cè)菜單下拉找到旋轉(zhuǎn)后面的模式選項(xiàng),選擇連接咕宿,這樣骨骼就不會(huì)出現(xiàn)反轉(zhuǎn)之類的離譜表現(xiàn)方式了币绩。

毛發(fā)變形約束:

選中要約束的骨骼,選擇變形約束府阀,之后可以選擇旋轉(zhuǎn)类浪,縮放等一系列操作,比如毛發(fā)立起來(lái)肌似,通過(guò)旋轉(zhuǎn)可以實(shí)現(xiàn)费就。


以上,做完還會(huì)出現(xiàn)兩個(gè)問(wèn)題:

[if !supportLists]1.?????[endif]如果只設(shè)置好了IK川队,整體拉動(dòng)人物的時(shí)候會(huì)發(fā)現(xiàn)IK限制了人物的移動(dòng)力细,比如下蹲時(shí)候手還是在IK點(diǎn)位置不動(dòng),為了解決這個(gè)問(wèn)題固额,就要選擇IK點(diǎn)眠蚂,之后選擇 設(shè)定父級(jí)> 點(diǎn)擊父級(jí)骨骼,比如雙手IK點(diǎn)的父級(jí)一般選擇腰部骨骼斗躏,這樣問(wèn)題就解決了逝慧。

[if !supportLists]2.?????[endif]如果腿部的IK點(diǎn)定在了腳后跟,那么hip(臀部/尾椎/下蹲)下壓的時(shí)候啄糙,腳尖會(huì)同樣下壓笛臣,掉到平面以下,游戲里就會(huì)發(fā)生穿模隧饼,觀感會(huì)很詭異沈堡,所以需要新增一個(gè)骨骼或端點(diǎn)來(lái)限制腳步,所以在腳上設(shè)置骨骼燕雁,之后將腿部IK的父級(jí)設(shè)定設(shè)定在新增的骨骼上诞丽,然而這樣并不能解決問(wèn)題鲸拥,需要再次點(diǎn)擊腳步骨骼,設(shè)置IK僧免,將IK點(diǎn)設(shè)置在角質(zhì)刑赶,之后選擇父級(jí)為剛剛新建的限制骨骼。完成限制懂衩。(此問(wèn)題也有其他解決辦法撞叨,比如曲線,限制勃痴,這里不過(guò)多解釋谒所,以快速上手為目的热康。)

[if !supportLists]3.?????[endif]




制作動(dòng)畫


新建:

選擇左上角SETUP按鈕沛申,可以進(jìn)入ANIMATE動(dòng)畫模式,快捷鍵Ctrl+Tab姐军。

在右側(cè)選擇動(dòng)畫铁材,新增動(dòng)畫,輸入名字Idle奕锌,教程以Idle(空閑)動(dòng)畫為例著觉。


幀數(shù):

制作動(dòng)畫前要確定幀數(shù),在右上角選擇窗口惊暴,有播放選項(xiàng)饼丘,可以更改幀數(shù),默認(rèn)是30FPS辽话,也就是說(shuō)30幀/s肄鸽,不懂這里的去補(bǔ)補(bǔ)游戲與幀數(shù)的關(guān)系,百度下就行油啤,不過(guò)多解釋典徘,如果動(dòng)作很細(xì)膩,可以增加幀數(shù)益咬。


制作動(dòng)畫:

在開(kāi)始之前逮诲,可將圖片選取關(guān)閉,關(guān)閉方法是點(diǎn)掉Options欄中第二行圖片鼠標(biāo)指針列下的點(diǎn)幽告。


首先擺好第一個(gè)姿勢(shì)梅鹦,點(diǎn)擊你變更過(guò)的點(diǎn)(可多選),可以看到Transform欄中的鑰匙圖標(biāo)會(huì)編程黃色冗锁,點(diǎn)擊黃色鑰匙帘瞭,就會(huì)添加動(dòng)作幀,添加完初始關(guān)鍵幀之后蒿讥,打開(kāi)自動(dòng)關(guān)鍵幀按鈕蝶念,之后改變的關(guān)鍵幀就會(huì)自動(dòng)添加抛腕。

注意:第一幀和這動(dòng)作的最后一幀要相同,動(dòng)畫才可以循環(huán)媒殉,所以復(fù)制第一幀到最后一幀的位置就可以担敌。


文檔輸出


一般來(lái)說(shuō)只輸出json文件是遠(yuǎn)遠(yuǎn)不夠的,所以要點(diǎn)擊打包廷蓉,將圖集一起導(dǎo)出全封,會(huì)有atlas,json桃犬,png三個(gè)文件刹悴。


至此教程結(jié)束,Spine綁定2D人物的基本流程就是如此攒暇,一般來(lái)說(shuō)如果是項(xiàng)目會(huì)和同事確定好需求規(guī)則土匀,按照規(guī)則輸出和制作就好,基本操作很簡(jiǎn)單形用,想要做出好的人物動(dòng)作還要多觀察人的運(yùn)動(dòng)就轧,這個(gè)更多的是經(jīng)驗(yàn)經(jīng)驗(yàn)問(wèn)題了。

此外田度,如果需要導(dǎo)入U(xiǎn)nity與UE4等引擎妒御,到官網(wǎng)找到相應(yīng)的API按照官網(wǎng)步驟一步一步做就可以搞定,這里不做贅述镇饺,希望各位學(xué)業(yè)有成乎莉!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市奸笤,隨后出現(xiàn)的幾起案子惋啃,更是在濱河造成了極大的恐慌,老刑警劉巖揭保,帶你破解...
    沈念sama閱讀 207,248評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件肥橙,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡秸侣,警方通過(guò)查閱死者的電腦和手機(jī)存筏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)味榛,“玉大人椭坚,你說(shuō)我怎么就攤上這事〔” “怎么了善茎?”我有些...
    開(kāi)封第一講書人閱讀 153,443評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)频轿。 經(jīng)常有香客問(wèn)我垂涯,道長(zhǎng)烁焙,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 55,475評(píng)論 1 279
  • 正文 為了忘掉前任耕赘,我火速辦了婚禮骄蝇,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘操骡。我一直安慰自己九火,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,458評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布册招。 她就那樣靜靜地躺著岔激,像睡著了一般。 火紅的嫁衣襯著肌膚如雪是掰。 梳的紋絲不亂的頭發(fā)上虑鼎,一...
    開(kāi)封第一講書人閱讀 49,185評(píng)論 1 284
  • 那天,我揣著相機(jī)與錄音冀惭,去河邊找鬼震叙。 笑死掀鹅,一個(gè)胖子當(dāng)著我的面吹牛散休,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播乐尊,決...
    沈念sama閱讀 38,451評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼戚丸,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了扔嵌?” 一聲冷哼從身側(cè)響起限府,我...
    開(kāi)封第一講書人閱讀 37,112評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎痢缎,沒(méi)想到半個(gè)月后胁勺,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,609評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡独旷,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,083評(píng)論 2 325
  • 正文 我和宋清朗相戀三年署穗,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嵌洼。...
    茶點(diǎn)故事閱讀 38,163評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡案疲,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出麻养,到底是詐尸還是另有隱情褐啡,我是刑警寧澤,帶...
    沈念sama閱讀 33,803評(píng)論 4 323
  • 正文 年R本政府宣布鳖昌,位于F島的核電站备畦,受9級(jí)特大地震影響低飒,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜懂盐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,357評(píng)論 3 307
  • 文/蒙蒙 一逸嘀、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧允粤,春花似錦崭倘、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,357評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至悉患,卻和暖如春残家,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背售躁。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,590評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工坞淮, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人陪捷。 一個(gè)月前我還...
    沈念sama閱讀 45,636評(píng)論 2 355
  • 正文 我出身青樓回窘,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親市袖。 傳聞我的和親對(duì)象是個(gè)殘疾皇子啡直,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,925評(píng)論 2 344

推薦閱讀更多精彩內(nèi)容