ゲームではエネミーに対する攻撃などアニメーションを用いた演出が必要となる場面が多々あります。そこで今回はエネミーへの攻撃演出を例に、ゲーム画面にアニメーションを組み込む方法について説明したいと思います。
準備
イメージ
今回は前述のようにエネミーへの攻撃演出の作成を想定します。イメージとしては下図のように「攻撃」ボタンを押した際、エネミーの画像上に攻撃のアニメーションを表示させるようにします。ただし、Unity基礎11ではアニメーションを表示させるところまでを説明し、ボタンによるアニメーション演出は次回Unity基礎12にて説明します。
各オブジェクトの配置
イメージが掴めたところで、実際に各オブジェクトを配置してみましょう。詳細は省略しますが、今回は以下のようにボタンおよびイメージを配置しました。
上図におけるオブジェクトの名前と役割は以下の通りです。
EnemyImage:エネミーの画像を表示させるイメージオブジェクト
AttackButton:「攻撃」ボタン。エネミー画像の上から攻撃アニメーションを表示させる処理を行うトリガーとなる（ボタンを押すことでアニメーション 演出処理を実施する）ボタン
エネミー画像の設定
アニメーション を組み込む方法を説明する前にエネミーの画像を設定しておきます。
先ずは表示させるエネミーの画像を用意します。今回もUnity基礎8と同様、下記サイト様の無料素材を使用させていただきます。
URL:https://pipoya.net/sozai/
使用させて頂いた素材：ポップモンスター46セットURL:https://pipoya.net/sozai/assets/enemyillust/enemy-image/
素材がダウンロードできたら、下図のようにプロジェクトウィンドウのAssetsフォルダ直下にResourcesフォルダを作り、さらにその直下にImageフォルダを作って表示させたいエネミー画像をドラッグ＆ドロップします。
エネミー画像が用意できたら下図のようにEnemyImageオブジェクトのSourceImageに用意した画像をドラッグ＆ドロップし、エネミー画像を設定します。
ゲーム画面にアニメーション を組み込む方法
必要な準備が整ったので、ゲーム画面にアニメーション を組み込む方法について説明していきます。
STEP1：アニメーション用の画像を用意する
先ずはアニメーションに使用する画像を用意します。今回も先ほどと同様、下記サイト様の無料素材(pipo-btleffect121)を使用させていただきます。
URL:https://pipoya.net/sozai/
使用させて頂いた素材：戦闘エフェクトアニメ25URL:https://pipoya.net/sozai/assets/effects/effect-battle-monster-type/
素材がダウンロードできたら、下図のようにプロジェクトウィンドウのResourcesフォルダ直下にAnimationフォルダを作ってアニメーション用の画像をドラッグ＆ドロップします。
補足
上記画像はアニメーションに使用する画像セットが一つの画像ファイルにまとめられています。そのため画像ファイルを以下のように分割します。
①SpriteModeをMultipleに変更する
アニメーション用の画像(pipo-btleffect121)をプロジェクトウィンドウ上で選択し、インスペクターウィンドウのSpriteModeをMultipleに変更します。（下図参照）
②SpriteEditorをクリック
下図のようにインスペクターウィンドウでSpriteEditorボタンをクリックします。
③SpriteEditor上でSliceタブをクリック
下図のようにSpriteEditor上でSliceタブをクリックします。
④分割設定を行いSliceボタンをクリック
下図のように分割設定を行い、Sliceボタンをクリックします。なお、主なポイントは下記の通りです。
KeepEmptyRects:チェックを入れる（空白の画像も使用したいため）
⑤Applyボタンをクリック
最後に下図のようにApplyボタンをクリックします。
上記①～⑤を行うことで、下図のようにアニメーション画像の矢印ボタンを押すと分割された画像を個別に選択できるようになります。
STEP2：アニメーション 表示用オブジェクトの作成と配置を行う
次にアニメーションを表示させるImageオブジェクトを作成し、画面上に配置します。今回は下図のようにAnimationImageという名前でImageオブジェクトを作成し、エネミー画像に重なるように配置しました。
STEP3：アニメーションの作成と設定
続いてアニメーションの作成と各種設定を行います。
画面表示画像の設定
先ずはAnimationImageオブジェクトに対し、画面上に表示させる画像を設定します。今回は「攻撃」ボタンを押した時のみアニメーション関連の画像を表示させたいので、下図のように空の画像をAnimationImageのSourceImageに設定しました。
アニメーションの作成と設定
次にアニメーションの作成を行います。具体的には下記手順で行います。
①Animationウィンドウを表示させる
下図のようにヒエラルキーウィンドウでAnimationImageを選択した状態で、「Windowタブを選択→Animation→Animationをクリック」という手順を踏みます。
②Animationの作成
上記手順により、下図のようにAnimationウィンドウが表示されるのでCreateをクリックします。
③Animationの保存
そして下図を参考にAtttackAnimationをという名前で保存します
④アニメーション用Propertyの作成
下図を参考に、「AddProperty→Image→Spriteの+ボタン」の順に選択し、アニメーション画像設定用のPropertyを作成します。
⑤アニメーション用コマ送り画像の設定
下図のようにプロジェクトウィンドウからAnimationウィンドウに画像をドラッグ＆ドロップし、コマ送り順に画像を並べます。
⑥ループ設定の解除
今回はアニメーションを１度のみ表示させたいので、ループ設定を解除します。具体的には下図のようにプロジェクトウィンドウでAttackAnimationを選択し、インスペクターウィンドウでLoopTimeのチェックを外します。
⑦設定したアニメーションの確認
ここまで設定できたら下図のようにAnimationウィンドウ上でPlayボタンを押すことでも設定したアニメーションが想定どおり動いていることを確認します。
機能テスト
最後にPlayボタンを押してゲームを起動させ、処理が想定どおりに行われているか確認しましょう。実際に起動させてみた結果、下図のように一度のみ攻撃アニメーションが表示されることが確認できました。
今回はゲーム画面にアニメーション を組み込む方法について説明しましたがいかがだったでしょうか。アニメーションは作成したゲームをよりゲームらしくする重要な要素だと思います。今回の内容が皆さんのゲーム制作に少しでもお役に立てれば幸いです。次回は冒頭述べたように特定の条件下でアニメーションを呼び出す方法について説明いたしますので、そちらも合わせてご覧いただければと思います。
以上。
コメント