FC2ブログ
ぴぽやフレンズについて

SRPGStudio用 魔法エフェクトアニメーションの作成

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


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

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


画像素材のインポート


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

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

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

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

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


このような画像ファイルになります。
pipo-btleffect103a.png


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

srpge_image002.png

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

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

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


アニメーションの作成


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


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

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

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

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

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

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

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

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


追加スプライトの作成


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

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

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

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

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

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

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

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

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


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

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

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

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


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


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

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

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


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


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

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

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

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

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


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


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

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

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

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

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

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

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

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


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


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

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

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

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

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


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


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

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

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

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

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

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

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


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


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

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

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

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

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


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

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


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

ダウンロード ぴぽや 素材 利用規約
関連記事

この記事へのコメント

非公開にする :

トラックバック

URL :

プロフィール

ぴぽ

管理人:ぴぽ
フリーのグラフィックデザイナーという傍ら、「ゲームを作りたいなぁ♪」と奮闘中です!

TwitterYoutubeチャンネルtwitchチャンネル
Fantia-ぴぽやフレンズCi-en ぴぽやフレンズ

▼運営サイト
・ぴぽや倉庫
 公開した素材のまとめ

・ぴぽやリンク
 素材配布サイトリンク集
・はじめてのウディタ
 ウディタお勉強wiki

ご感想・ご連絡


カテゴリ
最新コメント
リンク

リンクして頂ける場合はこちらのバナー画像をお使いください。
※バナー画像なしでも構いません。

RSS
広告
おすすめ有料素材
同人誌、同人ゲーム、同人ソフトのダウンロードショップ - DLsite.com

タイルセット
ねくらファンタジーマップチップ素材集
ねくらレトロフューチャーマップチップ素材集
普通シティ 現代日本都市タイルセット
ファミコン風RPG基本マップ素材セット

背景イラスト
みにくる背景CG素材集『ファンタジー編』part01
みにくる背景CG素材集『ファンタジー編』part02
みにくる背景CG素材集『ファンタジー編』part03
砂漠の戦闘背景 サファイアソフト素材 Vol2
雪の戦闘背景 サファイアソフト素材 Vol1

エネミーイラスト
イラスト素材集-baroque-
イラスト素材集-異界のアリス-
RPG制作に使えるデフォルメ素材集~モンスター娘編~ Vol.3

キャラチップ
ぴぽやキャラチップ素材集 乗り物10種
どうぶつキャラクターチップセット3

キャラ立ち絵
中世ファンタジーRPG風2Dキャラクターパック【キャラクター画像素材】
立ち絵素材男女
【立ち絵素材】Aさんのバイト服
【立ち絵素材】現代人まとめ (女子生徒・男子生徒・一般女性・一般男性・少女)

エフェクトアニメ
物理攻撃エフェクト素材集1 71点収録
ぴぽやゲームエフェクト素材集01-斬撃- &02-属性斬撃- セット

アイコン
イラストアイコン素材集Vol.1
ゲーム製作用アイコン集#01
ぴぽや感情&状態アイコンアニメ素材集
ファンタジーゲーム向けアイコン素材1

ゲーム制作ソフト
SMILE GAME BUILDER
SRPG Studio
ティラノビルダー PRO