ドット絵アニメーションの描き方(4)動きの大きいアニメーション

全4回予定.最終的にこれくらいを描けるようになるのが目標です.

Image from Gyazo

概要

こんにちは.id:asRagiです.最近ゲーム開発に際してドット絵アニメーションが必要になり練習をしたためメモを兼ねて講座の形式で記事を書き始めています.

本講座は(1)ドット絵の基本的な考え方や線の引き方から(2)着色の考え方,(3)動きの小さいアニメーション,(4)動きの大きいアニメーション,の4部構成を予定しています.

今回はドット絵におけるアニメーションのうち動きの大きいものを対象に紹介します.

作戦

前回の記事では動きが小さいためパーツの位置を移動させるだけでほとんどの工程が済みましたが,攻撃モーションなど動きの大きいものに関してはうまくいきません.

アニメーションをフレームごとにきっちり描く必要があります.

まず通常のペンツールを用いてざっくりとモーションを描きましょう.

gyazo.com

アニメーションを描く際の技術についてもドット絵に限らない一般のアニメーションの技術がそのまま使えます.

アニメーションの技術一例

つめ ため

Image from Gyazo

上記の3つのボールはコマ数・始点・終点が同じです.

一番上のボールは等速直線運動をしています.

攻撃や投擲など力を込めたモーションは始点・終点に対して等速移動的にコマを割り振るとスピード感に欠け魅力的でないアニメーションになってしまいます.

そこで中段のボールのように「動くまで3コマ」「移動1コマ」「移動後2コマ」のように動作の前後にコマ数を割り振ることでスピード感を確保しつつ前後のアニメーションでリッチな印象になります.

また,下段のように残像を描くことで情報量を多く,またコマ間の情報を補完することができます.これを「オバケ」とか言うらしいです.

手足をすばやく力強く動かすアニメーションを描く際はコマをどのように割り振るかをしっかり検討しましょう.

もどし

力強い動きをして止まる場合,力強い動きを止めるための力も強いものになります.そのため静止する瞬間に運動方向とは逆に少しだけ戻ります.

結果として,静止する一瞬前には静止位置より少し行き過ぎる格好になります.静止する一つ前のコマで剣先がすこし行き過ぎていることを確認してください. gyazo.com

これもアニメーションでよく用いられている技法のひとつです(名前はわかりませんが).

例えばギルティギアXrdのソルのHSのモーション例にも確認できます(「オバケ」も確認できます).

以上の話題を踏まえてアニメーションを描きましょう.

gyazo.com

「攻撃のモーション」を考えると上のアニメーションになりますが,よりなめらかに見せるために攻撃後の戻るモーションも忘れずに描きましょう.

gyazo.com

攻撃するまでの枚数と攻撃後の枚数が同じくらいになりました.

ここまで描ければあとは各コマを仕上げていくだけです.

コマ間の連動を段階ごとに確認するためあるコマを仕上げてから次のコマに移るのではなく,「全体のラフを描く」→「全体に色ラフを置く」→「顔を順番に仕上げる」→「身体を順番に仕上げる」→..... といったように進めていくのがおススメです.

gyazo.com

gyazo.com

あとは待機モーションや同様に描いた他のモーションを接続すると記事トップのアニメーションが完成します.

Image from Gyazo

簡単でしょ? dic.pixiv.net

全4回と駆け足で紹介してきましたがいかがでしたでしょうか.少しでも情報がお役に立ちましたら幸いです.