2DRPGの作り方18 2Dの攻撃エフェクトアニメーションで戦闘を盛り上げよう

Unity C# 2DRPGゲームの作り方 ~ドラクエ風レトロRPGを作ろう!~


Unity入門の森オリジナル本格ゲーム制作講座はこちら
5種類の本格ゲームの全ソースコード公開・画像&動画による解説付き

前回記事までで実際にRPGのターン制戦闘システムを作り上げました。

前回の記事:

2DRPGの作り方17 ターン制戦闘のコマンド入力をUnityとC#で実装する
前回の記事ではターン制戦闘システムに必要なアセットやGameObjectを作成し、基本となる戦闘画面の作成を行いました。 前回の記事: 今回の記事では敵オブジェクトの中身を作り、実際にプレイヤーと敵で戦闘できるようにコマンド「こうげ...

今回の記事では戦闘シーンに攻撃エフェクトを追加していきます。

Unityを用いて2D素材からエフェクトとアニメーションを作る方法をマスターしましょう。


【Line登録者限定のプレゼントもあるよ!】

戦闘時のアニメーションの追加

今回の記事ではプレイヤーが攻撃したときのアニメーションを作成していきます。

この記事では攻撃エフェクトの画像は次のものを使用します。お好みのものを用意してもOKです。

(※今回利用する画像はぴぽや倉庫様(https://pipoya.net/)の素材となります)

攻撃用の画像を用意してプロジェクトにインポートしてください。保存先はお好みでOKですが、記事ではAssets > Images > Effectsフォルダーの中に保存しています。

インポートできたら画像を適切に分割してください。

攻撃エフェクト用のプレハブの作成

次は攻撃エフェクトのアニメーションを再生するGameObjectを作成していきます。

次の手順を行ってください。

  • シーンの「BattleWindow」を選択した状態でメニューのGameObject > UI > Imageをクリックし新しい子GameObjectを追加してください。
  • 追加したGameObjectの名前は「AttackEffect」にしてください。
  • その後にプレハブ化してください。プレハブ名は「AttackEffect」でOKです。
  • プレハブの保存先はお好みでOKですが、記事ではAssets > Prefabsフォルダーの中に保存しています。
  • プレハブ化した後シーンにある「AttackEffect」は削除してください。
  • ただし、アニメーションを設定する際の確認として残すのもOKです。その時は再生するときに必ず削除するか非表示するようにしてください。

「AttackEffect」プレハブの設定内容は次のものにしてください。

AttackEffectプレハブ

攻撃エフェクト用のアニメーションの用意

攻撃エフェクトを再生するためのGameObjectができましたので、次は「AnimatorController」とそれに設定する「Animation」アセットを作成していきます。

まず、「AttackEffectAC」という名前の「AnimatorController」アセットを作成してください。保存先はお好みの場所でいいですが、この記事ではAssets > AnimatorContorllerフォルダーに保存しています。

作成したら「AttackEffect」プレハブに設定し、「Animator」タブを表示してください。

次に、攻撃エフェクトのアニメーションを表す「Animation」アセットを作成します。

「AttackEffect」という名前の「Animation」アセットを作成してください。保存先はお好みの場所でいいですが、この記事ではAssets > Animationsフォルダーに保存しています。

「AttackEffect」アセットのアニメーションパラメータは次のようにしてください。

攻撃エフェクトの画像分割は次のようにしています。

「AttackEffect」の設定が終わると次のようなアニメーションになります。

停止用のアニメーションを用意する

上の攻撃エフェクトのアニメーションのままだと、画像が表示されたまま停止するので停止時の状態を記録したアニメーションも作成していきます。

攻撃エフェクトのアニメーションの最終フレームに停止時のパラメータを設定することでも同じことはできますが、アニメーション毎に同じような設定を行う手間が省けるので、停止用のアニメーションを用意するのが便利です。

それでは「StopEffect」という名前の「Animation」アセットを作成してください。「AttackEffect」プレハブに紐づいている「AttackEffect」アニメーションの欄の左上を選択し、「Create New Clip」ボタンを押して作成できます。

保存先はお好みの場所でいいですが、この記事ではAssets > Animationsフォルダーに保存しています。

「StopEffect」アセットのアニメーションパラメータは次のようにしてください。

AnimatorControllerの設定

ここまででエフェクトのアニメーションを作成でいきましたので、最後に「AnimatorController」の方を設定していきます。

次のように「AttackEffectAC」アセットを設定してください。

ここまでできたら攻撃エフェクトを再生する準備が整ったので、あとはスクリプトを作成していくだけになります。

メッセージウィンドウにアニメーション再生を追加していく

必要なアセットが揃ったので、スクリプトで実際に攻撃エフェクトを再生していきましょう!

攻撃エフェクトの再生はメッセージウィンドウで行うようにします。

メッセージウィンドウに表示するテキストの中に選択肢の時と同じように<>から始まる行がある場合はその行をエフェクト再生だと判定するようにします。

エフェクト再生の行は実際には次のような行になります。

  •  <ANIMATION> <Effectsフィールドの添字> <Animatorのトリガー名>

それでは実際にスクリプトの方を修正していきましょう!

「MessageWindow」コンポーネントを次のように修正してください。

続きを読む

このコンテンツはパスワードで保護されています。 コンテンツを読みたい方はUnity入門の森ショップ(https://unityforest.stores.jp/)で講座閲覧権を取得してね。

まとめ

今回の記事では戦闘シーンに攻撃エフェクトを追加していきました。

その際にメッセージウィンドウをアニメーション再生に対応していきましたので、かなり汎用性が高いものになってきたかと思います。

今回のエフェクトの作り方や動かし方は戦闘シーン以外でも使用できます。ぜひ活用してみてください。

今回の内容を簡単にまとめると以下のようになります。

  • 戦闘用のアニメーションを追加した。
  • メッセージウィンドウで表示するテキストから「Animator」コンポーネントを制御できるようにしてエフェクト表示を実現した。

それでは次の記事に行ってみましょう!

次の記事:

2DRPGの作り方19 Unityで作るターン制戦闘の敵の種類と行動パターンAIを増やす
前回の記事ではターン制戦闘を盛り上げる攻撃エフェクトの付け方を解説しました。 メッセージウィンドウと連動してエフェクトを表示できるようになりましたね。 今回の記事では敵の種類を増やしたり、戦闘AIを実装していきます。 前回までの敵...

追記:

今回のエフェクトでのアニメーション処理は

で待ちを作っているため何かキーが押されてから次のメッセージが表示される形になっており、少しもっさりした動作になってます。自動でアニメーション終了時に処理を進めたい場合は以下の記事などが役に立つかもしれません。

 

Unityで作るRPGゲームの開発チュートリアル講座に戻る>>



Unity入門の森オリジナル本格ゲーム制作講座はこちら
5種類の本格ゲームの全ソースコード公開・画像&動画による解説付き


【Line登録者限定のプレゼントもあるよ!】

コメント

タイトルとURLをコピーしました