「OPTPiX SpriteStudio」でつくるアニメーション講座 ~炎エフェクトの作り方~

OPTPiX SpriteStudioでアニメーション制作を行っている池田ピロウです。

この記事ではOPTPiX SpriteStudio(以下SpriteStudio)で作成するアニメーションを作成手順にそってご紹介します。

今回解説するエフェクトは「炎」です。

クリックでオリジナルのサイズを表示

こちらのアニメーションの作成手順を解説します。炎部分の素材はシルエットのみで描かれた素材で作成しています。よって、手軽に素材を作成、量産が可能です。

今回は素材作成からSpriteStudioへのセットアップ手順の説明は省いています。セットアップまでの説明込みのエフェクト作成方法は、前回の記事「ヒットエフェクトの作り方」をご一読ください。

また、SpriteStudioの詳しい操作方法はOPTPiXヘルプセンターにも記載されています。

1. 素材の作成

まずは炎を作成するための素材を描き起こします。素材はシルエットで描いていきます。

上図のように、炎らしいエネルギーを表現していることが大事です。滑らかであったり角張っていたり、自分が表現したいタッチに仕上げていきましょう。

今回は、踊るような炎を表現できるよう、滑らかな丸みのあるタッチで仕上げていきます。

炎の素材をひと通り揃えました。今回は素材を全て使用することはありませんでしたが素材の種類が豊富であるほど表現の幅も広がりますので、数を多めに用意しておいても良いでしょう。

なお、今回のアニメーションでは焚き火を作るために木と煙も用意しました。

2. 炎アニメーションの作り方

素材が用意できたらSpriteStudioへ登録しアニメーションを作成していきます。

まずは炎のエネルギーの核となる部分を作ります。炎は重力や外気の流れの影響がなければ球体の状態です。上図のアニメーションは1枚の球体素材を13フレームかけて一周させています。

このベースとなる球体へ炎の形を肉付けしていきます。

細かく作り込む前に、まずは全体のシルエットを組み立てていきます。炎のエネルギーが外気に影響を受けながら上昇していくように作ります。表現したいイメージに近づくように調整を繰り返しましょう。

クリックでオリジナルサイズを表示

全体的なシルエットが出来てきたら、細部を作っていきます。

クリックでオリジナルサイズを表示

火の粉や炎の塊が散る余韻を足していきます。炎のシルエットアニメーションが完成したら、カラーブレンドを使用して色をつけます。

3. カラーブレンド、頂点カラーを使ってみよう

単色での設定方法

色を付けたいパーツのキーを選択し、アトリビュートウィンドウからカラーブレンド項目の横にある設定ボタンをクリックします。

「カラーブレンドの編集ウィンドウ」が立ち上がります。「単色」の項目の右側のウィンドウをクリックすることでカラーピッカーが立ち上がります。

カラーピッカーから色の情報を指定することでパーツの色が変更されます。

頂点カラーでの設定方法

カラーブレンドの編集ウィンドウの「頂点カラー」の項目にチェックを入れます。右側の4つのカラー情報はそれぞれパーツの四隅の頂点に反映されます。色の情報を設定することで、パーツへ反映されます。

この機能は複数のカラー情報を持たせることができるので、絵面が豪華になりますが沢山のパーツに使用すると処理が重くなってしまうので注意が必要です。

クリックでオリジナルサイズを表示

炎のアニメーションへカラーブレンドを適応した状態です。炎は中心ほど温度が高いので、炎の中心に色の違った新しい炎を重ねてそれを表現します。

4. エフェクトエディタを使ってみよう

エフェクトエディタで火の粉を足していきます。

プロジェクトウィンドウ欄の「エフェクト」を右クリックし、新規作成を行います。

ファイル名と保存場所を指定し、.ssee形式のデータが作成されたらプロジェクトウィンドウ欄の.ssee形式のデータをダブルクリックすることで「エフェクトエディタ」が起動します。

エフェクトエディタを編集し、火の粉が乱気流で巻き上がるようなアニメーションを作ります。

「接線加速度」の数値を設定することでパーツが回転するように広げます。

さらに「重力を加える」でY軸方向の重力を設定してパーツを上側に進んでいくようにします。

クリックでオリジナルサイズを表示

すると火の粉が渦巻く気流に乗るようなアニメーションができます。

エフェクトエディタでの編集が完了したら、フレームコントロールウィンドウのパーツ一覧上で右クリックし、「エフェクトパーツの追加」を選択すると★マークの付いたパーツが生成されます。

①生成したエフェクトパーツを選択します。

②アトリビュートウィンドウの選択エフェクトから作成したエフェクトを選択します。

③アトリビュートウィンドウのエフェクト欄の設定をクリックし、作成したエフェクトの再生開始フレームを調整します。これにより炎が舞い上がった時に火の粉が散るようにしました。

以上の手順を行うことによりエフェクトエディタで作成したエフェクトを再生することが出来ます。

エフェクトエディタの詳しい操作方法はOPTPiXヘルプセンターの「エフェクトエディタ」ウィンドウのページにまとめられています。

あとは丸太や煙を添えることで焚き火の完成です!

クリックでオリジナルのサイズを表示

おわりに

最後まで読んで頂きありがとうございます。エフェクトアニメーションは演出を魅力的にする力があります。ぜひ、これを機にエフェクトに触れてみてください。

池田ピロウ

透き通る風(http://transparent-wind.com/

参考文献

  • 特殊効果アニメーションの世界(株式会社ボーンデジタル)
  • MdN「エフェクト表現の物理学」 2015年11月号(株式会社エヌディエヌコーポレーション)
タグ: , , , | 2017/02/01 更新 |

コメント

2件のコメント

  • キム
    2017年2月10日 08:18

    frameとかキーの調整以外にはゆっくりと動かせる方法はありませんか?
    そしてもっと柔らかくルプさせたいです。。。

    • ウェブテクノロジ
      2017年2月10日 15:32

      コメントありがとうございます。
      frameはフレーム数のことでしょうか?それであれば、fps(1フレームに描画するコマ数)を24や12で制作してみるのはいかがでしょう。
      さらに柔らかくループさせるには、炎のチリが消える余韻をもっと長いフレーム数をかけて作ったり、全体のシルエットが大きく変化しないようにコンパクトにまとまっている形で作ってみると滑らかに見えると思います。

      fpsの数値を変えない場合は、後者に加えて全体のフレーム数を伸ばすほどパーツの補間時間が長くなるので、滑らかになります。

コメントはこちら