小屋創作

日誌2023-05-26 18:25

【Spine2D】流暢的銜接姿勢、切換圖片的基本要領

作者:Yuar

修正死圖問題
2024/03/04

===


開場白我就省了,直接進入重點


今天的目標是完成這個動作,以上段的持刀姿勢向前進行突刺
這邊令人感到困擾的點,主要是兩個姿勢的身體朝向是相反的,沒辦法直接用旋轉等方式進行過度,中間一定會需要卡一幀讓她瞬間切換過來。
於是為了讓他能夠順暢的切換過去,我首先做的第一個步驟是


  1. 預備動作

預備動作──英文叫做Anticipation,是動畫12原則的要素之一。
預備動作具體來說是什麼,舉例來說就是你跳躍前必須先蹲下的這個下蹲動作。
雖然人還沒有離地,但你看他往下蹲的姿勢就可以意識到「喔~他正要往上跳了」

實際上不僅是跳躍,跑步甚至是伸手拿東西都可以有所謂的預備動作。
詳情可以參考下面這個影片,雖然是英文但光看動畫應該也能感受到差異


講了那麼多,總之我們這邊就先幫他加上刺擊前的預備動作



腳色的重心放低並集中在後腳上,武器也同時持平以便對接到刺擊動作
其餘部分還沒有進行處理,依舊是在某個時間點就瞬間切換到下個姿勢

沒問題之後,就進行第二個步驟

 . 緩衝

該叫他漸慢,緩衝還是慣性......?煩惱了一陣子還是先稱呼他為緩衝吧
移動中的物體是不可能瞬間靜止下來的,擺出刺擊動作的時候也不可能瞬間定在原地
因此這邊我們加入一點緩衝動作讓攻擊時的動作從高速回歸到靜止。


這個時候看起來已經順暢許多了。
即使切換的過程沒有表現出來,透過預備與緩衝動作的暗示也足以讓人理解中間發生了甚麼事情。

講到這邊應該可以理解到,想讓動作看起來想要流暢,就必須不斷堆疊各種暗示來增添動作的說服力

知道之後,我們就繼續往下處理

 3. 身體重心位置銜接

做完上面兩項處理之後,角色的身體看起來還是從左至右順移了一大段距離
因此這邊就來調整它的位置與速率讓他看起來接近一些


在身體切換轉向之前,我們幫身體的重心新增往右側移動的動作
除了讓人知道他之後運動的方向外,同時縮短與下一幀的間距,看起來像是流暢滑動過去的樣子。
原本可能在切換的瞬間身體順移到5、6格外的地方,現在變成一幀跳動2、3格降低了順移造成的卡鈍感

 . 腳步調整

身體位置調整完後,現在看起來最突兀的地方就是腳部了,一動也不動的看起來有夠奇怪。
這邊幫攻擊動作增加一點向前踏的動作,暗示剛剛腳步是從後方快速向前蹬上來的




 5. 剩餘各種追隨、緩衝動作的調整

最後就是完善剩下的內容,補齊頭髮的飄動之類的。依靠各種暗示調整其他看起來卡鈍的地方


跟一開始比起來,簡直就是天與地的差別。
文章中間省略了一些細節,如果你照著做還是感覺卡卡的話,我想八成是圖表曲線沒有處理好
請一定要先理解速度是如何變化與圖表曲線怎麼使用,不然動作永遠不可能順暢


圖表曲線就是這玩意,想進步的話就不要再逃避它了


有什麼問題的話可以私信或直接加我Discord: yuar0708 問
沒東西問的也可以加拉,好想要有一起成長的同伴喔...



特效好難......
應該多找一點參考照著弄的,幹嘛自己在那邊亂搞

23

5

LINE 分享

相關創作

第三章 方緣操作手冊

[AI tutorial] 將圖片中的某部分作成動畫

Anya Melfissa - 口說練習的秘訣

留言

開啟 APP

face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】