■ドットアニメーションのコツ その3（2008.09/18）
【その１】
【その２】
【その３】
【最終回】
ドットアニメーションのコツ
その3
の時間です！
そろそろ回転アニメーションも
飽きてきた
頃だと思いますので
今回は、
動きを中心とした
アニメーションのコツを紹介しようと思います。
難しい話っぽいですが、理解しようとせず、
感じて
下さい！
「A」
その1の時に出てきた、丸いドット絵です。
その時、この形を
「回転させても丸のまま」
と説明しましたが
逆の言い方をすれば
「パターンを描かなくていい」
形なのです。ワンダホー！
今回は、丸いドット絵の組み合わせで、
振り子アニメーション
を作ってみます。
パターンを描かなくて良いという事で、
ディテール入れたい放題！
とりあえず大中小の3バリエーションのドット絵を用意してみました。
中を止め金具、小をチェーンに見立ててみました。振り子っぽく見えるかな？
チェーンと振り子は、
止め金具を中心に回る
事になるので
アタリとして、止め金具を中心に円を描いてみました
（青線）
左右に45度程度揺れるイメージで、左右に補助線も追加
（赤線）
青い丸
と、
赤い補助線
の
交わる部分
に各々のパーツを移動させた
素材（「1」と「3」）
を用意します。
（全部をごっちゃに描いちゃって分かりにくいかもですがご容赦を）
「1」→「2」→「3」→「2」→…
の順番にアニメをさせれば
なんだかそれっぽい動きになりそうな気がしますよね？
アニメーションさせてみました。
うーん、それっぽくはありますが、なんだか
カクカク
ですね。
さすがに4パターンアニメでは
中割りが足りない
ようです。
各々の
真ん中
に
中割り
を挟んで、4パターンから
8パターン
に増やしてみました。
これを
「1→2→3→4→5→4→3→2→…」
の順番で
再生させれば、今度こそうまくいきそうな予感！
アニメーションさせてみました。どうでしょう？
うーん、上のよりは滑らかですが、
振り子にしては動きがぎこちない
ですね。
機械的な動きで、
振り子
というより、
車のワイパー
っぽい感じ？
…説明が前後しますが、
自然に見えるパターンアニメ
を見てみましょう。
どうですか？かなり
自然に揺れている
ようにに見えませんか？
同じ8パターンアニメ
なのに、何故こうも差が出るのでしょう？
中割りの位置
を見れば
一目瞭然！
この
中割りの偏り
こそが、
自然に見える秘密
だったのです。
自分の手首をぶんぶん左右に振って、観察してみる
と分かりやすいかも？
意識して見ると、
Ｕターン中は動きがゆっくり
になりますよね？
あんまり難しく考えると、
物理学
の世界に足を突っ込む事になり
自分もちんぷんかんぷん
なので省略しますが
「ゆっくりしていってね！の法則」
とでも覚えておきましょう（適当すぎ）
更に滑らか、
12パターン
に増やしてみたバージョンです。
パターン数を増やしても、
ドット絵自体を描き足さずに済む
のが良いですね！
応用その1。
物理実験でおなじみ
衝突振り子
のアニメーションもこの通り！
応用その2。
時間差をつけて並べるだけで、こんな表現もできちゃいます！
ゲームの
多関節キャラ
を擬似的に再現しているみたいで、面白いですね〜。
ドットアニメーションの面白さを、少しでも感じて貰えれば幸いです。
それでは、今回はこの辺にて〜。
（2008.9/18）
【その１】
【その２】
【その３】
【最終回】
■戻る
