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

ファイアーエムブレム風のゲームが作成できるソフト「SRPG Studio」のエフェクトアニメーションを作成する機会がありましたので、作成手順など簡単にまとめておこうと思います。


アニメーション編集画面の詳細な操作についてはマニュアルを参照してください。
アニメーション

※SRPGStudioでのアニメーション作成機能はまだ完全に把握できているとは言い難いので、勘違いや環境などによって不正確な内容になっている可能性があります。
問題が分かり次第更新していこうと思いますので、ご了承ください。

画像素材のインポート

まずは画像素材を用意して、SRPGStudioの自分のプロジェクトにインポートします。
SRPGStudioに元々用意されている画像を使ってオリジナルのエフェクトアニメーションを作ることも可能です。

ちなみに、アニメーションの作成時にはメインの作品制作のものとは別に専用のプロジェクトを作っておくことおすすめします。
後述になりますが、SRPGStudioのアニメーションファイルのエクスポート・インポートは簡単にできますので、アニメーション作成用のプロジェクトで十分に確認を行ったあとにメインのプロジェクトにインポートするのが良いと思います。

画像素材は決まった規格があるので、マニュアルの素材規格を確認。

今回扱うのはエフェクトなので、Effectの項目を確認。

Effect
戦闘時に表示されるエフェクト画像です。1つのエフェクトのサイズは192×192であり、それを横方向と縦方向に255個まで配置できます。エフェクトは、1行目の最も左に配置されたものから順に表示されていき、最後の列まで表示したら折り返して2行目の最初の列の画像を表示します。

このような画像ファイルになります。



画像ファイルの用意できたら、
上部メニューから「リソース>画像データの確認」、「オリジナル>effect」と選択していきます。



操作欄にある「追加」を押し、リソース追加ウィンドウに画像ファイル(複数可)をドラッグ＆ドロップします。


追加した画像ファイルのアイコンを選択(複数可)してからOKボタンを押します。



必要に応じて、追加された画像を選択して、操作欄にある「名前の変更」で名前を変更しておきます。
※画像ファイルのファイル名自体を変更するので注意してください。

アニメーションの作成

アニメーション作成の準備

ルート画面の上部に並んだアイコンの「アニメーション」をクリックします。


アニメーション編集画面で「オリジナルエフェクト」をクリック、左下の「アニメの作成」ボタンを押します。



「モーション設定」ウィンドウでエフェクトの「名前」、アニメーションのキー画像ファイルを選択します。
※作ったアニメーションを画像差し替えでバリエーションを作ろうとする場合には注意が必要ですので、後述の記述を参考にしてください。


キー画像の場合は画像ファイル内のコマ数分で自動でアニメーションフレームを作成してくれます。
シンプルな１枚の画像ファイルだけで収まったものを使用するエフェクトの場合は、これだけでほぼ完成という状態になります。
今回は複数の画像を使用した複雑なものを作っていきますので、シンプルなものしか作る予定がない場合は必要な部分のみ摘んでください。


ちなみに画面中央の縦横のラインはキャラクターユニットの中央足元を示していますので、アニメーションを作る際にはこの線に合わせて作成していきます。
そうしないと、キャラクターからズレたところにエフェクトが表示されてしまいます。
また、ランタイムモーションのキャラクターを見るとわかりますが、アニメーションの編集画面が味方側の表示状態であることに注意してください。
味方しか使用しない魔法エフェクトだと、敵側での表示を意識して作成してしまうことがありますが、敵側のつもりで作ってしまうと実際ゲームで表示された際には反転表示されてしまいます。
例えば、敵に対して味方キャラの方向から降り注ぐ隕石エフェクトを作った場合に、編集画面で敵側のつもりで画面右から隕石が降り注ぐように作ってしまうと、実際には敵側の背面・左から隕石が降り注ぐように表示されます。


アニメーションの反転表示に関しては、アニメーションの詳細設定の「リアル戦闘時での反転を許可する」のチェックも影響する部分ですので、注意してください。


さて、アニメーションの編集をしていく前にアニメーション編集画面の環境設定をしていきます。
白背景のままだと、白い光のエフェクト画像を使用した場合に見えなくなってしまうので、何かしらの背景画像を設定します。
「アニメ情報」＞「エディタ」タブ＞「サンプル背景」でランタイムやオリジナルから好きな背景画像を選択します。


あとは１フレームごとに画像の位置・回転率・拡大率・不透明度を調整してアニメーションを作っていきます。

追加スプライトの作成

SRPGStudioのアニメーションではキー画像の他に複数の画像をアニメーションの中に追加して、複雑なアニメーションを作ることが可能です。

画像が表示されている中央エリア上の画像が配置されていないところで右クリックメニューから「追加スプライトの作成」を選択します。


追加したい画像ファイルを選択します。
自分で追加したオリジナルの画像でもいいですし、SRPGStudio同梱のエフェクト画像を選択することもできます。


また、別の追加方法もあります。
あとあとのことを考えると、これから説明する追加方法をおすすめします。

中央エリアに配置されている画像上で右クリックメニューから「プロパティ」を選択して「スプライトのプロパティ」を開きます。
ちなみにダブルクリックでも「スプライトのプロパティ」を開くことが可能です。


リスト上で右クリックメニュー「新規作成」、もしくは「スプライトの作成」ボタンからスプライトを追加します。


こちらから追加した場合はデフォルトの画像がキャラクター画像になっていますので、画像を変更する必要があります。
画像部分をクリックすると画像選択画面が表示されますので、画像を選択します。


画像を変更したら、追加したスプライト画像に名前を付けておきましょう。
SRPGStudioでのアニメーションではキー画像はアニメーションの複数フレーム間でも紐付けされていて同じ画像として認識されますが、追加スプライトについては１フレーム限定で追加された画像としか認識されませんので、自分でわかりやすい名前をつけて管理していく必要があります。


スプライトのプロパティ画面では、画像の重なり順を簡単に変更することができます。
リストの上が後ろに表示される画像で、リストの下が手前に表示される画像になります。
リスト内でスプライト名をドラッグ＆ドロップで変更できます。

ついでに、画像が配置されている中央エリアで複数重なった画像を移動させたりする場合には、手前に表示されている画像を選択したいところですが、なぜか一番後ろの画像が選択されてしまいます。
中央エリアで画像の位置等を調整する際には、必要に応じて選択したい画像の表示順番を一番後ろに変更すると編集しやすいです。
幸い「スプライトプロパティ」画面を表示させたままで、中央エリアの編集も可能ですので、一時的に対象の画像をドラッグ＆ドロップで一番上にもってくればいいですね。


追加したスプライト画像及びキー画像は複製することが可能です。
スプライトのプロパティ画面のリスト上で複製したいスプライト名を選択し、右クリックメニューから「コピー」「貼付け」で簡単に複製できます。
ショートカットキーで「Ctrl+C」「Ctrl+V」でも可能です。
ここでコピーしたものはアニメーションの別フレームにも複製していくことができますので、追加スプライトをアニメーションさせる場合にはとても重要な機能です。


複製したスプライト画像にはもちろん名前をつけるのを忘れずに！


少し脱線しますが、アニメーションのフレームを追加する場合も同じように複製することが可能です。
アニメーション編集画面下部のアニメーションのフレームが並んだ画像で右クリックメニューから行います。
「新規作成」時には、選択したフレームが次のフレームとして複製追加されます。
「コピー」時には、Ctrlキー・Shiftキーを押しながら複数選択した画像をコピーして任意の場所に「貼り付け」することも可能です。Ctrlキー・Shiftキーを押しながら選択した順番で追加されるので注意してください。


追加スプライト画像の上限数はわかりませんが、アニメーション１フレームに対してこのくらいは問題なく使用できるようです。
キー画像はリストのスクロールの上の方にあって見えていませんが、13枚使用できています。

アニメーションの一括変更

アニメーション編集画面下部のアニメーションフレームリスト上で右クリックメニューから複数選択しているフレームに対して、現在表示されているフレームの情報を適用することができます。


「キースプライトのプロパティ」を変更すると、キースプライト画像の表示されているコマ画像は保ったまま、座標・拡大率・回転率・不透明度を変更することができます。
「追加スプライトのプロパティ」を変更は、前述のとおりキー画像のようにフレーム間での紐付けがされていませんので、追加されたスプライト画像をすべて選択したフレームに画像ごと複製するという機能になります。


フレームを複数選択するにはCtrlキー・Shiftキーを押しながら選択していくか、右クリックメニューから「すべて選択」で行います。

アニメーション速度の変更

アニメーションの速度を変更するには画面左のリスト上で右クリックメニューから「速度設定」で「速度設定画面」を開きます。


速度を変更したいアニメーション名をチェックした上で、速度の数値を入力してOKボタンを押します。


上記はアニメーション全体で１フレームの再生速度を同じにする設定になりますが、１フレームごと個別に再生速度を変更することも可能です。
画面下部で変更したいアニメーションフレームを右クリック、もしくはダブルクリックで「フレームのプロパティ」を開きます。


「一般」タブで「フレームの表示速度」を入力します。


ちなみに「フレームのプロパティ」では
・命中判定の設定　キャラクターにダメージエフェクトを表示されるタイミング
・効果音の設定
・画面全体の色変更演出
といった設定が可能ですので、一通りアニメーションの見た目の編集ができた次の段階で行う作業要素になります。

画面いっぱいに画像を表示する

エフェクト用画像の１コマサイズは192×192pixelになるため、SRPGStudioの戦闘画面(640×480pixel)いっぱいに表示するには拡大して表示する必要があります。

画像の拡大率の上限は「400％」です。
192×192 を4倍にすると 768×768 ですので、戦闘画面の 640×480 は問題なくカバーできますね。

ただ、今回やりたいのは画面全体の中央、下の画像の赤いラインを基準とした位置にぴったり表示させたいため、アニメーション編集画面での中心である青いラインのキャラクター中央足元表示位置からはズレがあり、細かい調整が必要です。


参考に検証した拡大率と座標データを掲載しておきます。

縦いっぱいに表示したい場合
　拡大率　250％
　x座標　-44(キャラ中央　180)
　y座標　0

横いっぱいに表示したい場合
　拡大率　334％
　x座標　-126
　y座標　-80

最大で表示したい場合
　拡大率　400％
　x座標　-188
　y座標　-143(画像の下辺を画面にあわせる場合　-288　上辺は普通に　0)

但し、全画面に表示するエフェクトアニメーションは、近接攻撃を受けた際に反撃で使用されると表示がずれてしまうので注意が必要です。

画像ファイル差替前提でのアニメーション作成

せっかく頑張って作ったエフェクトアニメーションなので、動きはそのままで画像ファイルを差し替えてバリエーションを作りたいということがあると思います。

SRPGStudioでのアニメーションももちろん画像の差し替えはできるのですが、キー画像ファイルを変更(エフェクト名リストを右クリック　詳細設定から)すると、すべてのアニメーションのパラメータはリセットされ、追加スプライトなどの情報も消えてしまいます。

このため、画像の差し替えでバリエーションを作ることを考えている場合には、キー画像の変更はできませんので、動画編集や3DCGのアニメーション作成などでよく使われるヌルオブジェクトのような使い方で192×192の１コマの透明画像を作成してキー画像に設定し、キー画像は一切編集せず(スプライトを無効にするか、画面の隅に移動させる)追加スプライトでアニメーションを作っていく方法を取ります。

追加スプライト画像の変更は前述の「追加スプライトの作成」にある通り、「スプライトのプロパティ」から変更可能です。
アニメのパラメータは保持されるが、１コマずつ変えないといけないのが、なかなかたいへんですが……。

余談ですが、キー画像の拡大率や不透明度を変更すると追加スプライトの画像が表示されなくなることがあるようなので、注意していください。
編集画面上では問題なくとも、ゲーム画面上で確認すると画像が消えてしまうことがあります。
キー画像を表示したくない場合は「スプライトのプロパティ」で右クリックメニューから「スプライトの無効」を使用しましょう。

アニメーションのテスト表示

アニメーション編集画面の上部メニューには「戦闘テスト」というメニューがあるのですが、ユニットのアニメーション確認向けなのかエフェクトアニメーションの確認には使いにくいようです。
戦闘テスト用の味方ユニット設定がうまく反映されない？
ルート画面で普通に「テストプレイ」するのが良さそうです。

さて、作ったアニメーションを実際のゲーム画面で確認するには、ものによっていくつか方法があるのですが、今回は魔法エフェクトアニメーションとして設定し確認していきましょう。

まずは、新たな魔法を作っていきましょう。
ルート画面で「データ設定」＞「武器」タブを選択します。
デフォルトだと、ファイアストームの魔法が初めからあるので、これを複製して新たな魔法に設定していきます。
「コピー」と「貼付け」、「Ctrl+C」と「Ctrl+V」ですね。


複製したら、名前を変更して、アイコン画像部分をクリックします。


画像選択画面で「オリジナル」ボタンを押して、「アニメの選択」で作成したエフェクトアニメーションを設定します。


次にこの魔法を使用するキャラクターを作っていきましょう。
「データ設定」＞「プレイヤー」タブを選択します。
まあテスト用のキャラクターということで名前は適当に。
今回は魔法が使えるクラスである必要があるので、「クラス」をマージに設定し、所持「アイテム」に先ほど作成した魔法を設定します。


あとはすぐに戦闘が開始できるようなマップを作成してテストプレイします。

アニメーションファイルのエクスポート・インポート

SRPGStudioではオリジナルのキャラクターユニットやエフェクトのアニメーションをファイル出力できる機能があります。
詳しくはこちらをご確認ください。
アニメファイル｜SRPG Studio ～ シミュレーションRPG作成ソフト

まずはエクスポートについて、
アニメーションファイルをエクスポートする前にアニメファイルの製作者名を設定しておく必要があります。
「アニメ情報」＞「エディタ」タブ＞「アニメファイルの製作者名」で入力しておきます。


アニメーション編集画面の左のアニメーションリストで、エクスポートしたいアニメーション名を選択した状態で右クリックメニューから「アニメの保存」を選択します。


保存先とアニメーションファイルの名前を入力して、OKボタンを押します。


使用している画像ファイルなどもまとめて１つのアニメーションファイルとして出力されました。



インポート方法は、とても簡単でアニメーションファイル「*.sani」をSRPGStudioのウィンドウにドラッグ＆ドロップするだけです。
「アニメーション＞オリジナルエフェクト」で追加されているのを確認してください。


他にもルート画面の「リソース」＞「アニメファイル」＞「インポート」からも可能です。
ここで「エクスポート」することもできますが、キャラクターのアニメーションしか対応していないようです。



今回はぴぽやの既存エフェクト画像を使って、SRPGStudio用のエフェクトを作ってみましたので、せっかくですので配布させていただきます。
ただし効果音などはつけていませんので、各自で設定してください。

関連記事

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

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