ポコロンダンジョンズのアニメーションデザイナーのジュニアです。
前回はポコダンのアニメーション制作の準備について記載いたしまして、
今回はモーションの製作について説明してしていこうと思います。
準備編で用意いたしましたPSDの読み込みまで行ったFlashのファイルの
キャラクターを使用して待機モーションを制作していきます。
fpsは60(タイムラインの60フレームで1秒)で制作しております。
始めにキャラクターをステージに配置いたしますがこの状態では
まだ、表情差分や炎のコマ画像が全てまとまって配置されておりますので
そこを分けることろから始めようと思います。
現状、そのまま配置いたしますと以下のような見た目になっております。
画像の構成としては主に以下のようになります。
体、口、目(開き)、目(閉じ)、炎の画像が3パターン
とシンプルなものになります。
こちらを、炎の差分は数フレームごとに切り替わるようにかつループ再生
表情は一定のタイミングで目を閉じ、また開くような動きをつけます。
そうすると以下のような見た目になります。
これだけでもそこそこそれっぽく動いているように見えますね！
ただ、差分画像の切り替わりだけでキャラ自体にはまだ動きがないので
キャラのモーション制作もしていこうと思います。
Flashで動かす際、手法は様々ですがここではステージ上に配置した
パーツの位置や形状をフレームごとに変化させて動きをつけていこうと思います。
パーツは画像を使用しておりますのですべて矩形となります。
この画像を移動したり変形したりすることで動きを作っていきます。
基本的に動きは以下の組み合わせで表現していきます。
①移動
②拡大・縮小
③回転
④傾斜
動かすにはタイムライン上でキーフレームを打っていき移動させたり
回転させたりすることで動きをつけていくことができます。
簡単にですがキーフレームを打って動かしてみます。
▼1フレーム目
初期配置のまま
▼15フレーム目
キャラを縦に縮小、横に拡大し炎の位置を少し下げる
▼30フレーム目
初期配置のまま
▼45フレーム目
キャラを縦に拡大、横に縮小し炎の位置を少し上げる
▼60フレーム目
初期配置のまま
といった感じに変更を加えています。
15と45フレーム目でキャラに拡縮を行っておりますがこちらは基点(上の画像でいうキャラの下の小さい丸)を中心に拡縮をしております。
実際に動かしてみると以下のような動きになります。
コマ送りのように伸び縮みするような動きになったと思います。
フレームレートが低いゲームやそういった表現をしているものなどではこのような動きで止めたりします。
こちらをさらに滑らかに動くようにクラシックトゥイーンと呼ばれるものでつないでみますとその間が補完され滑らかに動くようになります。
適応された箇所はフレームが薄紫色に染まり矢印がひかれます。
※最近ではクラシックトゥイーンは使用されなくなりほぼ上位互換のモーショントゥイーンがありますのでそちらを使用しても同じように動かせます。
また、イージングも適用できますので動きに加減速を加えることが可能です。
イージングはキャラの拡大縮小と炎の上下に「100」⇒「-100」⇒「100」⇒「-100」のように設定いたしました。
イージングですが波形で表すと以下のような感じです。
▼イーズアウト(100)：始め速く、徐々に遅く
▼イーズイン(-100)：始め遅く、徐々に早く
真空空間でない限り物体は等速で動くことはほぼないのでイージングは動きを作るうえで
重要な値になってきますので意識して入れていくとよいと思います。
下はトゥイーンとイージングと入れてみて動かしてみたものになります。
大分動きも滑らかになったと思います。
今回は簡単に待機モーションを制作いたしました。
小さく、見た目もシンプルなものならばかなり簡単に制作できると思います。
次回はもう少し複雑な動きなどを見せていけたらと思います。
0コメント