[倫語] 倫語格鬥點圖 司馬耕+卜商+點圖動畫研究

[sunrainworm ((破殼中))]

那麼這次是點圖動畫的部份，花了大概一個禮拜去研究

這次為了點圖動畫，特地做了新的點圖

原本預計是要做司馬耕：

草稿
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145354237&p=27

這次自行設計了新造型，不過總覺得是自掘墳墓

這要是做成動畫大概會累死人

點圖(未完成)
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145354231&p=28

話雖如此，還是硬著頭皮做了一半

由於這次草稿並沒有參考其他點圖，所以人物骨架比例有點奇怪

特地去研究了萃夢想點圖的人物比例：


基本上是三頭身
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=202859&p=0

腰部則介於全身的中間
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=202854&p=1

腰部以上三等分則臉大約在中間那一份
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=202857&p=2

腰部以下被裙子遮住，不過多少做為參考
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=202856&p=3

描出其骨架大概像這樣
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=202851&p=4


有了這些概念，做出來的點圖比較不會有比例的問題

所以接下來嘗試做了卜商：

草稿
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353396&p=29

試著抓出他古靈精怪的個性，然後再做點圖草稿

套上上面比例的概念，可以加上一些補助線看看

例如說腳被裙子遮住，很難抓到位置

這個時候就可以用補助線看看：

http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353391&p=30

做好草稿後，再根據現有的點圖，把尺寸拉到適當大小

http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353390&p=31


接下來就是開始製作點圖，這裡直接把遊戲裡呈現的大小當一倍(實際上是二倍)

http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353665&p=32

二倍
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353662&p=33

其實蠻喜歡草稿的衣服樣式

不過這裡要用來做動畫研究，做了很多簡化


其實要做出精細的點圖，所需要的技術和毅力絕對不輸立繪的製作

一些基本的美術概念都應該知道：

1.人物的比例大小

2.人物的動作骨架

3.選色、配色、調色

4.陰影和反光的位置

大概就這些吧，點圖因為解析度不高還需要手動做一些反鋸齒的調整


接下來是點圖動畫的部份

這裡新手可能會嘗試把他第一個點圖修改成其他影格

例如說出拳時只是修改其中一隻手臂的部份

而沒有考慮到衣服受到力而扭曲，為了穩住重心，腳步也要跟著改變

在這種情況下，除非你的人物動作非常簡潔

任何情況都會喪失流暢性和角色動作的個性

例如說下面這張萃香的待機動畫恐怕不是改得出來的

http://www.flickr.com/photo_zoom.gne?id=2168285051&size=o


所以這裡建議先去畫人物動畫的骨架

扎扎實實地練出基本的動畫功力

像等一下要講的這張靈夢站立的動畫

http://www.flickr.com/photo_zoom.gne?id=2145339981&size=o

你會試著先畫出其骨架的動畫，確定流暢無誤之後再去分別製作每個影格

http://www.flickr.com/photo_zoom.gne?id=2168232215&size=o


那麼接下來以這張靈夢站立的動畫作為範例

開始來講其特定的規律


基本上動畫當中最基本也最困難的就是循環動畫

(就是最後一張影格可以接第一張影格，重複播放而顯得很流暢)

像是站立待機、走路

請仔細看下面這張分開描出來的骨架動畫(描得不太準，可以看原圖)
http://www.flickr.com/photo_zoom.gne?id=2169022516&size=o

中間上下晃動的線是腰部的部份

移動的順序大概像這樣：(十個影格，每個約0.1秒)

         最低                     最高
1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7 -> 8 -> 9 -> 10 -> 1
  下   下   上   上   上   上   上   下   下    下

上下起伏每個影格之間通常是1 pixel

也就是說上下晃動約2~3 pixel

鞋子、腳的部份則是

         最低                     最高
1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7 -> 8 -> 9 -> 10 -> 1
  下   下   上   上   無   無   無   無   無    無

1~4類似墊腳尖往下的動作，5~10則是靠著身體的仰臥使腰部起伏


再加上軀幹的部份
http://www.flickr.com/photo_zoom.gne?id=2168230757&size=o

基本上人體的中心位於腹部，所以腹部動，其他部分也跟著動

所以可以看看右手
http://www.flickr.com/photo_zoom.gne?id=2169022966&size=o

很明顯會照著腰部起伏上下晃動，但本身也會左右晃動

因此造成複雜的繞圈圈動作

之後會說明如何處理這種動畫

不看上下的話移動順序是這樣

最左                     最右
 1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7 -> 8 -> 9 -> 10 -> 1
   右   右   右   右   右   左   左   左   左    左

這個概念可以延伸到右手上的棒子
http://www.flickr.com/photo_zoom.gne?id=2168231327&size=o

是跟著右手在旋轉，本身其實只是在做上下擺盪

手和軀幹結合像這樣
http://www.flickr.com/photo_zoom.gne?id=2168231609&size=o

頭部基本上和軀幹相連，所以也有上下起伏

不同的是5~10腰部成後仰，會往左移動，再回來(參造原圖比較明顯)
http://www.flickr.com/photo_zoom.gne?id=2168231811&size=o


接下來講身體以外的部分，首先是頭髮
http://www.flickr.com/photo_zoom.gne?id=2168232043&size=o

同樣會有上下起伏，前髮和後髮的飄動略為不同

這裡只分析前髮的部份，後髮只是飄動的變化比較大

 1  ->  2  ->  3   ->   4   ->   5 -> 6 -> 7 -> 8  ->  9  ->  10    ->   1
   下垂   下垂   往內靠   往內靠   無   無   無   往外   上飄     微下垂

這裡的無其實有稍微改變

大抵上呈現出頭髮上下晃動受空氣阻力產生的效果

全身再加上頭髮就像這樣子
http://www.flickr.com/photo_zoom.gne?id=2168232215&size=o


最後比較要說的是裙子的部份
http://www.flickr.com/photo_zoom.gne?id=2169022452&size=o

基本上是裙擺波峰往左不斷循環

    最左  最右
 1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7 -> 8 -> 9 -> 10 -> 1
   左        左上 上   左   左   左   左   左    左

4~5有稍微向上飄的感覺，顯得不會太單調

其他部分原理就差不多，像是右手袋袖(沒查到正式名稱)
http://www.flickr.com/photo_zoom.gne?id=2168231237&size=o

比較像是擾動的動作

頭飾+頭髮
http://www.flickr.com/photo_zoom.gne?id=2169024314&size=o

只要注意是跟隨著主體晃動就行了

紙帶則較沒有規律，只要二個影格能銜接就可以了
http://www.flickr.com/photo_zoom.gne?id=2168231459&size=o


接下來是根據以上的研究實際做出一個類似的站立動畫

先從腳開始，從原圖描骨架，這裡就要細心描，盡量保持線條的乾淨
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353398&p=34

骨架動畫
http://www.flickr.com/photo_zoom.gne?id=2169037798&size=o


加上腰部
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353401&p=35

骨架動畫
http://www.flickr.com/photo_zoom.gne?id=2168245479&size=o


連成腳
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353407&p=36

骨架動畫
http://www.flickr.com/photo_zoom.gne?id=2168245647&size=o

這邊大概算是一個失策吧，因為站的角度不同，所以沒辦法很正確的表現後仰


描出頸部的位置
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353418&p=37

骨架動畫
http://www.flickr.com/photo_zoom.gne?id=2168245805&size=o


連出軀幹部份
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353422&p=38

骨架動畫
http://www.flickr.com/photo_zoom.gne?id=2168245899&size=o

後來因為偷懶，沒有稍微根據仰伏去改變衣服


加上頭
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353426&p=39

骨架動畫
http://www.flickr.com/photo_zoom.gne?id=2169038462&size=o

為避免頭變形，這裡用複製再改變位置的方式做


接下來就是頭髮了，這裡先定出頭髮的位置
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353429&p=40

骨架動畫
http://www.flickr.com/photo_zoom.gne?id=2168246243&size=o


頭髮一定要另外製作，主要是因為本身複雜的變化
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353431&p=41

其實第一個做出來的點圖通常不會直接拿來當影格的一部分

靜態的頭髮，不一定能直接當作動態的頭髮

所以這裡修改成類似範例的頭髮第一個影格的狀態

骨架動畫
http://www.flickr.com/photo_zoom.gne?id=2169038714&size=o

接下來這邊就要特別講一下，由於頭髮會跟隨頭而上下搖晃

但這樣的動畫很難直接畫出

這邊把上下移動去掉，只保留飄動，這樣一來就很好處理

結合之前的骨架就像這樣
http://www.flickr.com/photo_zoom.gne?id=2169038886&size=o


接下來就不多說，步驟都差不多

右手
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353432&p=42
http://www.flickr.com/photo_zoom.gne?id=2168246697&size=o
http://www.flickr.com/photo_zoom.gne?id=2168246913&size=o

左手
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353434&p=43
http://www.flickr.com/photo_zoom.gne?id=2169039398&size=o
http://www.flickr.com/photo_zoom.gne?id=2168247225&size=o

裙子
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353436&p=44
http://www.flickr.com/photo_zoom.gne?id=2169039954&size=o
http://www.flickr.com/photo_zoom.gne?id=2169040398&size=o

到這裡全部的骨架就完成


接下來我們把原圖放在旁邊，開始製作第一張影格的點圖
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353438&p=45
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353439&p=46

為了避免作畫崩壞，要把前一張影格複製一份當作參考來畫
(但是如果高麗菜一開始就畫成圓球就沒救了)
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353442&p=47
http://album.blog.yam.com/show.php?a=sunrainworm&f=3637090&i=145353444&p=48

再做最後一張影格記得還要和第一張做比對

做到一半時(5張影格)，就可以檢查動畫了
http://www.flickr.com/photo_zoom.gne?id=2168248165&size=o

最後就是完整的動畫
http://www.flickr.com/photo_zoom.gne?id=2169061070&size=o
http://www.flickr.com/photo_zoom.gne?id=2168268471&size=o

唯一的缺憾大概是頭髮和腰部的起伏不自然



最後還有些話要說，這邊的影格數是10張

那要選多少張當你的角色待機動作的影格數

基本原則就是"角色個性決定動作，動作決定影格數多寡"

像是咲夜(6張)
http://www.flickr.com/photo_zoom.gne?id=2168284935&size=o

表現出高傲、處變不驚的態度，身體沒有絲毫改變

萃香(18張)
http://www.flickr.com/photo_zoom.gne?id=2168285051&size=o

表現出喝醉的樣子，醉的東倒西歪



結論：動畫師不是人幹的


--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 218.167.228.9
推 kene:拜一下, 有看有推~~~~
推 litcurler:有看有推
推 willkill:推一個
推 bohun:好強!!研究的很徹底 不過我想她的待機模式比照咲夜
→ bohun:不是比較好 覺得她身體不適合上下 因為手部動作的關西
→ bohun:風吹過來~頭髮慢慢往後飄 書本上下微動 書頁輕翻
→ bohun:右手轉筆~轉兩三圈定住 頓一下再轉 如何
推 Arnhem:推 這篇專業
→ bohun:XD 第二行推文少一個"是"
推 whackup:GJ!
→ sunrainworm:這次主要是針對常見的站立動畫技巧去研究
→ sunrainworm:咲夜動作太少，所以就沒有選它來做範例
→ sunrainworm:而靈夢則是幾乎都有，所以就選了他，只是沒想到站的角
→ sunrainworm:度不適合
→ sunrainworm:至於轉筆的動作太花，十張影格也只有一秒，不適合
推 bohun:原來如此~ 不過我覺得她嘴巴怪怪的耶 嘟起來了XD
→ sunrainworm:他是張著嘴巴喔XD
→ sunrainworm:"閉上眼睛紀錄事情，而張著嘴巴告訴別人"
推 nbook:推專業
推 oldfool:推。歡迎覺得熱血沒地方燒的一起來加入點圖喔
推 asleisureto:先推專業~  可是我們並不是商業化團體  如果要每個點
→ asleisureto:圖畫師都做到這種地步的話  可能基本技做完後就沒幾個
→ asleisureto:人撐的下去了...囧
推 FrostWeaver:先推專業 :)
推 CH1NA:推....GJ
推 devilegna:推專業!
推 kodato:專業
推 Legault:原po高手，不推不行
推 mahonblue:專業推
推 hatter:推專業!
推 WDGest:推專業!!
推 Yamoe:推專業！
推 fennix:推專業!!!!
推 onelife:推專業!!令人敬佩的研究精神!!!!