ゲーム制作記とゲーム制作に役立つ画像素材や情報記事を公開しています

まず、AfterEffects というのは、Photoshop や Illustrator を開発販売しているアドビの映像・アニメーション向けのアプリ製品になります。
テレビアニメーションだったり、ゲームのムービーだったり、実写のCMやMVやTV番組や映画などの映像編集に使われているものです。
機能や用途が幅広いので、なかなかとっつきにくいのですが、さくっとゲーム制作用に画像素材を作るのにたいへん便利だったりします。
実際、ぴぽやで配布しているエフェクトアニメ素材はほとんどAfterEffectsで制作されたものです。

現在、AfterEffects を新規で利用するには、アドビが提供しているサブスクリプションサービス「Adobe Creative Cloud」で月額で利用料金を払う必要があるので、なかなか新規で使おうというのは抵抗があると思います。

ただ、元々 Adobe Creative Cloud のコンプリートプランを利用されている方には、Photoshop や Illustrator なんかをメインで利用していて、AfterEffects も利用可能だけどインストールしてないという方も多いと思います。

今回の記事はそんな方向けに試しに AfterEffects を使ってみてもらうために、AfterEffects を起動して～新規作成～ちょっとアニメーション作って～画像出力という基本的な流れのみを説明した内容になります。

ちなみに無償メンバーシップ登録で Adobe Creative Cloud の有料契約をしていない方でも各アプリの体験版を利用可能です。
Adobe Creative Cloud 無償メンバーシップのメリット
https://helpx.adobe.com/jp/creative-cloud/help/benefits-creative-cloud-free-membership.html

Adobe Creative Cloudの各プランについて。
・フォトプラン(Photoshop CC,Lightroom CC)　月額980円
・単体プラン(Illustrator,AfterEffectsなどアプリ単体での契約)　月額2,180円(アプリによって金額が違います)
・コンプリートプラン(全アプリ)　月額4,980円

詳しくはこちらを。
Creative Cloudの価格とメンバーシッププラン | Adobe Creative Cloud
https://www.adobe.com/jp/creativecloud/plans.html?promoid=8JD95K3H&mv=other


注意：AfterEffects はハマりすぎると色々なプラグインが欲しくなって、あれもこれもとなるとけっこうお金がかかります。有料プラグインは非常に便利で高機能なものがありますが、基本機能や無料プラグインでも色々できるので、お金の無駄遣いにならないようにご注意ください。
私はもう手遅れですw



今回の画面画像は AfterEffects の現時点での最新バージョン CC(15.1)のものになります。
インストールしたてのまっさらな環境のものですので、これから使い始める皆さんと同じ状態になっていると思います。

これから、AfterEffects を起動して、新規作成でアニメーションを作って、そのアニメーションをゲーム用画像として使われるアニメーションを１コマ１コマのPNG画像として書き出します。
詳細な AfterEffects の操作については説明は省いていきますので、今回の記事で流れを確認できたら下記のアドビのチュートリアルや他のサイトの情報など参考に学習してみてください。

After Effectsチュートリアル | After Effects CCの使い方
https://helpx.adobe.com/jp/after-effects/tutorials.html


では、AfterEffects を起動しましょう。

新規作成

画面の案内に沿って、「新規作成」(新規プロジェクト)、「新規コンポジション」(新規コンポジションを作成)と選択していきます。



まずは「コンポジション」というのが映像・アニメーションのデータになります。
「プロジェクト」についてはもう少しあとで説明します。

「コンポジション設定」で作成するコンポジションのフォーマットを設定します。
画面サイズ「幅,高さ」を入力、デフォルトだと「縦横比～固定」にチェックが付いていると思うので、ゲーム用画像は変則的ですので、チェックは外しておくのがいいと思います。
「フレームレート」は１秒間に表示されるフレーム(コマ・画像)数です。
使用するゲームのフレームレートに合わせるのが基本ではありますが、RPGツクールやウディタなどゲームプログラム・ゲーム制作ツール上で、改めてアニメーションの表示タイミングを調整する場合もあるので、用途によって調整してください。
フレームレートの値が大きいとアニメーションがなめらかになる分、画像枚数が増えていくので、当然ファイルサイズが大きくなってしまいます。
2Dゲームならとりあえず「15～30」ぐらいにしておくのが無難だと思います。
「デュレーション」は作成するアニメーションの長さです。「0:00:03:00」との入力で３秒となります。
フレームレート30で３秒となると90フレームで画像90枚となるので、どれだけのボリュームになるか想像が付くでしょうか。
コンポジションの設定はあとからでも変更可能です。

プロジェクトと画面の把握

こちらがAfterEffectsの作業画面になります。
左に「プロジェクトパネル」、右に「コンポジションパネル」、下に「タイムラインパネル」と配置されています。


さらに画面右の方にも折り畳まれているパネルがいくつかありますが、アニメーションを作っていく上で「エフェクトパネル」が一番重要なものになります。

プロジェクトパネル

「プロジェクトパネル」には現在の AfterEffects の作業で使用するコンポジションや画像ファイル、動画ファイル、PSDファイル、AIファイル、サウンドファイルなどがまとめて表示されます。
これらをまとめプロジェクトとして AfterEffects の保存ファイルとなるAEP(After Effects Project)ファイルとして保存されます。
コンポジションについてはAEPファイルに内包されているデータになりますが、取り込んだ画像ファイルや動画ファイルは元ファイルへのリンクが配置されている状態ですので、Photoshop や Illustrator と同じように元ファイルを移動させてしまうとリンク切れて表示されなくなってしまうので、あらかじめ作業用のフォルダにまとめておきましょう。

コンポジションパネル

「コンポジションパネル」には現在の映像・アニメーションが表示されます。

タイムラインパネル

「タイムラインパネル」が実際にテキストやシェイプ、各種素材をレイヤー上に配置して、タイムラインにキーフレームを打ってアニメーションを作っていくところになります。
動画編集やアニメーション作成系のアプリを触ったことがないと、慣れるのに一番苦労する部分になると思います。
特に AfterEffects では多くのパラメータ(位置(2D,3D),拡大率,不透明度,基準位置(アンカーポイント座標),各種エフェクトのパラメータなど)をアニメーション可能なものとして編集できるので、頑張って慣れていきましょう。

エフェクトパネル

「エフェクトパネル」からは様々なエフェクトを作成するアニメーションに適用させることができます。
Photoshop のフィルタ効果にあるようなカラー補正・画像加工系のエフェクトから、映像を変形させたりするもの、グラデーションやパーティクルを描画するものなど色々なものがあります。

アニメーションの作成

それでは簡単なアニメーションを作っていきましょう。

タイムラインパネルの適当なところで右クリックメニューを表示して、「新規」＞「平面」と選択して、タイムラインのレイヤー上に「平面」を作成します。


「平面設定」で「名前」や「サイズ」「カラー」を指定します。


プロジェクトパネル、タイムラインパネルに「平面１」が作成されたのが確認できます。
コンポジションパネルにもグレーのベタ画像が配置されています。

画像ファイルを読み込んで素材とせず、AfterEffects 上だけで画像素材を作っていく場合には「平面」というものを作成してそこに色々なエフェクトを適用させて画像・アニメーションを作っていきます。
他に「テキスト」や「シェイプレイヤー」も、同じように AfterEffects 上だけで画像素材を作成するのに使われます。


では何か適当にエフェクトを掛けてみましょう。
エフェクトパネルから「描画」＞「レンズフレア」をダブルクリックして、作成した「平面」に適用します。
なんかかっこよさげなレンズフレアが描画されました。ワクワクしてきますね！


「プロジェクトパネル」に「エフェクトコントロールパネル」のタブがあるので、こちらを表示させます。
「エフェクトコントロールパネル」には今適用した「レンズフレア」のパラメータが表示されています。
作業画面に余裕があれば「エフェクトコントロールパネル」は分離させておいたほうが作業効率が良いと思います。


このレンズフレアを動かしてアニメーションを作っていくことにします。
レンズフレアのパラメータ「光源の位置」の「ストップウォッチアイコン」をポチっとクリックします。
「ストップウォッチアイコン」がブルーになっている時にパラメータを変化させると、アニメーションを付けていくことができます。
もちろん、アニメーションを付けずにパラメータを変更することも可能です。


「タイムラインパネル」で表示時間を移動させます。
「20f」となっている部分をクリックして、「現在の時間インジケーター」を移動させます。
これはそのまま20フレーム目、20枚目の画像(正確には0フレームからなので21枚目)の状態を表示させています。


20フレーム目の表示にしたら、再び「エフェクトコントロールパネル」でレンズフレアの「光源の位置」で座標位置の横の「ターゲットアイコン？」をクリックします。


「コンポジションパネル」上で座標を指定できるようになります。


適当な場所でクリックすると、レンズフレアもそれに合わせて表示が変わります。
位置を直したいときは、もう一度「エフェクトコントロールパネル」で「ターゲットアイコン？」をクリックするか、「コンポジションパネル」上で赤い「座標アイコン？」をドラッグして変更することができます。


「タイムラインパネル」で「00f」をクリックして０フレーム目での表示状態にします。
キーボードの「U」を押すと、選択中のレイヤーでアニメーションが設定されているパラメータのみを表示させることができます。
このショートカットキーはよく使うので覚えておきましょう。
レンズフレアの「光源の位置」の０フレーム目と20フレーム目にキーフレームが設定されているのが確認でき、キーボードの「スペースキー」を押すとコンポジションパネル上でアニメーションが再生されます。

シーケンスPNG画像の書き出し

これでアニメーションは完成したので、１コマ１コマのPNG画像として書き出し保存していきましょう。

ただ今のままだと３秒のコンポジションになっているため、90枚の画像が書き出されてしまいます。
アニメーションを作った20フレーム目までの20枚の画像が書き出されれば十分なので、調整します。
コンポジションの設定でデュレーションを変える方法もあるのですが、もっと簡単に「タイムラインパネル」上で書き出す範囲を指定することができます。

「タイムラインパネル」の右端の画像の部分にマウスカーソルを重ねると「ワークエリア終了」と表示される部分があるので、これをドラッグすると出力する範囲を制限することができます。
同じように左端からも「ワークエリア開始」をドラッグして範囲を変更することができます。


では「ワークエリア終了」を20fまで移動させます。
これで0～19フレームまでの20枚の画像が出力されます。(本当は21fまでとしておけばよかったのですが、わかりにくくなってすいません；)


これで準備OKです！
一旦、このプロジェクトファイルを保存しておきましょう。


画像を出力するには「コンポジション」＞「レンダーキューに追加」を選択します。


「タイムラインパネル」に「レンダーキューパネル」が表示されますので、レンダリングの設定をしていきます。
まずは「レンダリング設定」の「最良設定」と書かれた部分をクリックして、「時間範囲」が「ワークエリアのみ」となっているのを確認します。



次は「出力モジュール」の「ロスレス圧縮」と書かれた部分をクリックします。


「形式」を「PNGシーケンス」、「ビデオ出力　チャンネル」を「RGB+アルファ」にします。
「PNGシーケンス」のシーケンスは順番に並んでいるという意味なので、アニメーションを１コマ１コマの画像として連番で出力するものになります。


最後に画像の出力先を指定します。
「出力先」の「指定されていません」と書かれた部分をクリックして適当なフォルダを指定しておきます。



設定が完了したら、「レンダキューパネル」の右上の「レンダリング」ボタンを押します。


こんな感じでPNG画像が書き出されました。
あとは「PL_ImageConstructor」など類似アプリでバラバラの画像を連結させるなりして完成です。

おまけTIPS

レンダーキューの複製

レンダーキューは一度レンダリングすると使用済みとして履歴が残るだけで、再度レンダーキューに追加しないとレンダリングすることはできません。


ただし、使用済のレンダーキューを複製して、新たなレンダーキューとしてレンダリングすることができます。
コンポジション名を右クリックして「複製」を選択します。

出力モジュールのテンプレート化

レンダリング時の「出力モジュール」をテンプレートとして保存しておくと、他のプロジェクトなどでも再利用が可能になり大変便利です。

「レンダキューパネル」でレンダリングする前の状態(もしくはレンダリング済みのを複製して)で「出力モジュール」の「下向きカーソル」部分をクリックして「レンプレート作成」を選択します。
「編集」＞「テンプレート」＞「出力モジュール」でも同じ操作が可能です。



「出力モジュールテンプレート」で「設定名」に名前をつけます。
また、この設定をデフォルトにしたいときは一番上の「ムービーの初期設定」で今名前を付けた設定を選択します。


これで「レンダキューパネル」でレンダリングする際に「出力モジュール」の「下向きカーソル」部分をクリックすると、名前を付けた「出力モジュール」が選択できるようになります。

黒背景の透明化

先ほど作ったレンズフレアのアニメーション画像ですが、背景が平面の色でグレーでした。
せっかくなら透明にした方が素材として使い勝手がいいですよね。
というわけで、背景を透明にしていきます。
色々やり方や専用のプラグインなどもあるのですが、１例として。

まずは、下準備で平面の色が濃いグレーなので完全な黒にします。
上部メニューの「レイヤー」＞「平面設定」で変更します。


「エフェクトパネル」から「チャンネル」＞「チャンネルシフト」をダブルクリックして平面に適用します。


「エフェクトコントロールパネル」で「チャンネルシフト」の「アルファを取り込む」で「輝度」か「明度」を選択します。


これでOK！
「コンポジションパネル」の下部の「透明グリッド」のアイコンを押すと背景が透明の場合は、チェック模様が表示されます。
これも便利なので覚えておきましょう。


ただ、この方法は大雑把なので、下記の無料プラグインを使うともっとキレイに処理することが可能です。
Video Copilot 社の無償プラグイン：Color Vibrance
自然な彩度を実現し、黒バックの素材からアルファチャンネルを自動生成
https://www.flashbackj.com/video_copilot/free_plugin/

特定の１フレームだけ画像出力

AfterEffects でエフェクト処理した画像や、アニメーションの一部をイラスト制作の１素材として使う場合など、任意のフレームだけを画像出力することもできます。

出力したいフレームが選択表示されている状態で「コンポジション」＞「フレーム保存」＞「Photoshopレイヤー」と選択します。
「ファイル」とするとレンダーキューでレンダリングする必要があるので、「Photoshopレイヤー」がそのままPSDファイルを出力してくれるのでお手軽です。


Photoshop で開くとこんなかんじに。黒背景を透明にしたレンズフレアの画像ですね。
AfterEffects のレイヤー状態も保持してくれるので、他にレイヤーがあればそのまま複数レイヤーが表示されます。


こちらは英語のページになりますが、無料公開されているスクリプト「FX Console」を使用すると、フレームの表示状態をそのままPNG画像で出力できたり、クリップボードにコピーできたりします。
[Updated] New Workflow Plug-in: FX CONSOLE is now available! | VIDEO COPILOT
https://www.videocopilot.net/blog/2016/10/new-workflow-plug-in-fx-console-is-now-available/

まとめ

だいぶ省略して手順だけを並べた説明になってしまいましたが、コンポジションを新規作成して、それをシーケンスPNGで書き出すってところが伝わればいいかなぁ。と思っています。
私自身も AfterEffects を使えるようになりたいなぁっとずっと思っていて、ようやく手を付けられようになってからネットや本で使い方を学んで、なんとか少し使えるようになってきたところなので、まだまだ知らないことがいっぱいです。

アニメーションや映像制作系のチュートリアルはいっぱいあるので、アニメーション作成部分はそっちを参考にしてもらうとして、今回のようにちょっとニッチな AfterEffects講座をまた書いてみようかと思っています。


AfterEffects は標準でもエフェクトいっぱいあるので、こういう本が手元にあると便利です。
画面画像入りでエフェクトのパラメータの説明なども詳細です。
私も持っているのですが、けっこう高いので AfterEffects 使っていけそうかなぁと思ったぐらいに検討してみるといいと思います。

関連記事

• AfterEffectsでゲーム用画像素材を作ろう１　基本的な流れ 2018/04/13
• SRPGStudio用　魔法エフェクトアニメーションの作成 2017/05/23
• ウディタ2.20からの画像素材サイズを考える 2017/01/18
• 有料ワールドマップチップセット企画 2016/09/10
• 各RPG制作ソフトの画像素材規格　簡単まとめ 2016/08/12

カテゴリ ： 制作メモ ｜ Comments (0) ｜ Trackbacks (0) ｜ 【記事編集】