初心者でも簡単!2Dアニメーションの作り方 ~後編~

AnimeEffectsでの作業

ここからはAnimeEffectsでの作業となります。
リンク先からダウンロードと解凍を行ってください。 
 

データ読み込み

AnimeEffectsに作成したpsdデータを読み込みます。
ファイル→プロジェクトの新規作成 で新規プロジェクトダイアログを開き、「初期リソース:」で作成したpsdデータを選択します。キャンバスサイズや最大フレーム数は後から変更できますので、決まっていなければそのままで大丈夫です。
 

表示順変更

左下のターゲットドックで変更したいレイヤーを選択し、右のプロパティドッグの初期キーの深度から数値を変更します。数値は自由に設定できますので、最大と最小の数値を決め、一番手前と奥から順に付けていくとやりやすいです。最大と最小の幅は広めに取っておくと後から変える時に手間がかかりません。
筆者は-50〜50に設定しました。
 

重心の位置変更

重心はパーツの回転・拡縮の中心になる点のことです。左のツールドックから重心の移動を選択します。


 

すると、下のような点と点線のマークが表示されますので、ドラッグして移動します。大体は関節の付け根部分に配置します。


 

重心を移動したいパーツに子パーツがある場合はフォルダの重心を変更します。
例えば、下記のような時は左腕フォルダ前腕の重心を移動します。


 

重心を決める時はパーツを回転させながらだとやりやすいです。
ツールドッグのSTRを変形するツールを使用します。


 

ツールを選ぶと四角と点が表示されます。
中央の点をドラッグで移動、点線の四角で拡大縮小、右下の点で回転ができます。

移動・拡縮・回転をすると自動でキーが打たれますが、今は一旦打たないでおきたいので確認後はCtrl+Zで戻ってください。


筆者のキャラクターの重心は下記のようになりました。
赤がメインパーツ、緑がオプションパーツです。


 

モーション作成

ポーズ決め

まずは、最初のポーズを決め、全部のパーツにキーを打ちます。こうすることでループさせやすく、動きが作りやすくなります。

下記画像の灰色の点がキーです。キーを複数打つと、その間の動きが自動で補完されます。



キーの打ち方はふたつあります。
ひとつは前項に書いた移動・拡縮・回転をするやり方です。ポーズを付けながらキーを打ちたい時はこちらを使います。

もうひとつが右のプロパティドッグの現在のキーから移動・回転・拡縮の項目を展開するやり方です。こちらは今の状態のままキーを打つことができますので、動かしたくないパーツに使用します。

まとめてキーを打つことができないので、手間ですがひとつひとつ打ちます。

全部のパーツにキーを打ったものをキーポーズと呼びます。
キーポーズはアニメで言うところの原画の役割をします。

ループするアニメーションを作る場合は、上のバーの「プロジェクト」から「ループ...」を選び、「アニメーションをループさせる」にチェックを入れます。
こうすると、最後のフレームに最初と同じキーを打たなくても自然にループするようになります。

 

体のモーション

ベースとなる体の動きを付けます。揺れ物等の細かい動きは後から作ります。
キーをコピーしたい場合は、上書きができないのでコピー先のキーを削除してからペーストしましょう。

歩行の場合、まずは下記のようにタイムラインの中間にキーポーズを作ります。


 

左側のキーポーズが右足を踏み出したポーズ、中央のキーポーズが左足を踏み出したポーズです。

手足に回転を、全体に上下の移動を入れました。全体の上下移動はキーポーズとキーポーズの間に入れています。
これをベースとして細かい動きを作っていきます。

 

揺れ物のモーション

揺れ物の動きを付けます。
このキャラクターの揺れ物は炎、三つ編み、尻尾、スカート部分、帯飾りです。
揺れ物の内、炎には自由変形、尻尾と三つ編みにはボーンを入れて動きを作ります。

自由変形は、ツールドッグの網マークから使用できます。
絵を引っ張って動かすことができますので、炎や水などのエフェクト、前髪やケモ耳などにおすすめです。

ボーンは、ツールドッグの骨マーク内の+マークで追加し、その右のマークで動きを付けることができます。始点と終点にしたい位置をクリックするとボーンが追加されます。

自由変形やボーンを使う場合は、キーポーズにそれらのキーを追加してから作りましょう。

ボーンと影響範囲を付けるとこのようになります。
赤い丸で塗られた箇所が影響範囲です。この範囲内のものがボーンと連動して動きます。
ツールドッグの骨マーク内の鉛筆マークから赤い範囲を作ることができます。
影響範囲は絵より少し大きめにすると綺麗に動きます。
 

揺れ物に動きが付きました。
 

イージング

ここからイージングを使用してより自然な動きにします。
イージングを使用すると、動きの速さに緩急を付けることができます。
左のプロパティドッグの現在のキーから設定できます。初期状態はリニアです。

揺れ物だけでなく、手足の動きにも使うとより自然になります。
色々試してみて一番しっくりくる動きにします。


今回は正弦曲線を使用しました。これで完成とします。

 

書き出し

GIFアニメーションで書き出しします。

Anime EffectsでのGIFの書き出しではFFmpegというアプリケーションが必要になりますので、ダウンロードします。Get the packagesから自分の使用しているOSを選択しましょう。

ダウンロードしたzipファイルを解凍するとbinフォルダ内にffmpegがありますので、AnimeEffectsのフォルダ内にあるtoolsフォルダに移動します。これでGIFアニメーションを書き出しできるようになります。残りの解凍データは使用しないので削除して問題ありません。

FFmpegを入れ終わったら、GIFアニメーションで出力します。

「画像幅」と「画像高さ」で大きさを変えられます。イラストを大きく描きすぎた場合などに使用します。
出力すると色が変わってしまう場合は「パレットを最適化する」にチェックを入れましょう。
中継ビットレートは初期では5000となっていますが、書き出し後のデータ容量が大きすぎる場合は数値を上げると良いです。

Okを押すと書き出しが始まります。無事書き出されれば終了です。
 

おわりに

いかがだったでしょうか。2Dアニメーションと聞くとなんとなく難しそうに感じてしまう方もおられるかもしれませんが、無料で簡単に作ることができますので是非挑戦してみてください。創作の幅がグッと広がります。

初心者でも簡単!2Dアニメーションの作り方 ~前編~  

  • 即日発送
  • 同人系イベント開催日程一覧カレンダー

人気特集

  • 創作ライフハック特集まとめ
  • 初めてのサークル参加に必要なもの
  • スペースレイアウト基礎知識
  • サークル参加のマナーと注意点
  • はじめての同人誌

シチュエーションから探す

カテゴリーから探す

ショップガイド

  • マイアカウント
  • hondel公式Twitter

    ホンとデルの部屋

    5th Floor, Inc運営

    メディア掲載

    相互リンク