LV. 18
GP 848

【心得】使用 2D Sprite 製作角色,達成接近 3D 角色的靈活度

樓主 GG ggkid
GP170 BP-
先看成品,動起來的感覺像這樣:


使用工具
1. Unity
2. 提供 Sprite 變形與骨架的工具,常見的有 Spine、DragonBone。本篇使用 Unity 官方的 Anima2D 套件。

PS1:Anima2D 也舊了,Unity 官方現在改推新的骨架套件叫 2D Animation。
PS2:就算用不同的工具,思路是相通的。


使用 2D 製作角色會遇到的問題
1. 做動畫時旋轉軸的不足。3D 角色可以繞著 XYZ 軸旋轉,所有動作都做得出來,只有想不到,沒有做不到。但 2D 圖片只能繞著 Z 軸旋轉,缺少 X軸 與 Y軸 的旋轉。

2. 難以處理透視。2D 角色很難模擬 3D 物件的透視縮短(Foreshortening)效果。倒不是說這種效果很難模擬,若只為了擺出某個特定姿態那 2D 還是很容易做到的。真正困難的點在於用 2D 角色做動畫時會擺出各式各樣的動作(走路、跑步、跳躍、各種攻擊姿勢等…),如何有一個「通則」來處理這些彼此間差異很大的動作,才是關鍵的麻煩處。

接下來我們要想辦法解決這些問題。


旋轉的解法
1. 首先要解決身體軸向旋轉不足的問題。先分析角色動作,身體繞著 Z軸旋轉很常見,例如各種彎腰或前後仰的動作;繞著 Y軸旋轉也很常見,例如迴旋踢或轉身;而繞著 X軸旋轉,在一些比較誇張的動作時可能會有,但不是很必要。因此首先我們只保留 Z軸、Y軸的旋轉,放生 X軸,這是一個必要的取捨。實現 Z軸旋轉只要旋轉圖片即可,非常簡單;而 Y軸旋轉要怎麼實現?老方法,替換不同的 Sprite。美術人員,辛苦你了。

2. 接著解決四肢軸向旋轉不足的問題。一樣分析四肢的轉動,可以發現四肢比身體單純得多,因為它們面積比較小,而且各個角度的形狀變化不大,經過不斷測試後,最終只要用前後左右四個角度即可滿足幾乎所有的動作,畫好一邊,另一邊通常只要複製鏡射即可,大幅降低美術的工作量。

3. 手掌與腳掌為什麼不畫在一起?因為要切換各種手勢 (以及腳勢?),利用切換不同的 Sprite 更能暗示出角色目前的姿態,手掌與腳掌的角度變化很難透過骨架變形,直接畫好不同角度反而是最快的。


透視縮短的解法
再來要解決透視的問題。這裡先提一個骨架的特性,Sprite 一旦綁了骨架之後,除了可以旋轉,還可以做拉伸。
但拉伸要注意二個限制:
1. 只能拉長,不能壓扁 (壓扁幅度有極限)。

2. 末端的骨頭無法拉伸 Sprite。

我們要利用這項特性實現四肢的透視感。由於骨架只能拉長不能壓扁,我們不能畫一個正常長度的手,然後利用骨架縮短它營造出透視。反之畫一個比較短的手再用骨架拉長它卻是可行的。不斷測試後,手腳需要壓扁為原本的75%左右。美術人員可以先畫出正常長度的手,把圖像壓扁再補些修飾,做過一次後即可上手,不是很高的技術門檻。
完成這些前置作業後終於可以綁骨架了,骨架的綁法很重要,以手臂為例子,骨架的階層可能像這樣:
有負責旋轉的骨頭、負責拉伸與被拉伸的骨頭。這裡要提一下,每個角色會綁上的骨頭數量並不是固定的,基本框架不變的情況下,偶爾還是會根據角色的服裝造型等需求而調整,所以重點是要理解骨架拉伸帶來的效果。
最後,我們之前已經分拆出手腳掌零件,等於提供多一層圖片深度可以用,對動畫師而言就是多一種手段營造透視感。


成品
綜合以上,最終就能產出一個可以擺出各種動作的角色。既方便做動畫,又不會讓美術畫到死。


美中不足
儘管做了這些努力,2D 角色真的達到 3D 角色的靈活度了嗎?其實還有一段距離,還有些美中不足的地方:

1. 缺乏 X軸的轉動,有些動作仍然做不到,像是某些帥氣的空中扭轉迴旋踢,XYZ 三軸都會旋轉。

2. 做不出身體的「扭動」,身體的扭轉大致可分為頭、胸、骨盆三節。目前的做法僅能做出頭與身體面向不同方向,做不到胸與骨盆面向不同方向的轉動。也許有人會想,如果把胸與骨盆再拆成獨立的零件不就可以實現轉動效果了嗎?答案是不行,硬要這樣做的話成本會提高,因為胸與骨盆之間有明顯的肌肉牽動,這二塊區域沒有連在一起處理的話很容易穿幫。


總結
儘管無法完全做到 3D 角色的靈活度,但在這種折衷做法之下,2D 角色已經擴充了很大的活動範圍,調動作的人員很開心。更重要的是能為美術人員最大程度簡化了製程,美術也很開心。即使是開發本作這樣需要伸展拳腳的動作遊戲也能有不錯的表現。而那些美中不足之處其實不用太在意,因為一來玩家的注意力其實都放在正在被打與即將被打的敵人身上、二來還有各種打擊特效在前面擋著、以及動作之間的切換都是零點幾秒內完成的事,就算真的角色動態有什麼瑕疵也都是一閃而過,不構成大礙。

以上,一些開發心得簡單分享,希望有幫助
170
-
未登入的勇者,要加入討論嗎?
板務人員:

215 筆精華,前天 更新
一個月內新增 3
歡迎加入共同維護。


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

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