【Unity基礎11】ゲーム画面にアニメーション を組み込む方法

Unity基礎

ゲームではエネミーに対する攻撃などアニメーションを用いた演出が必要となる場面が多々あります。そこで今回はエネミーへの攻撃演出を例に、ゲーム画面にアニメーションを組み込む方法について説明したいと思います。

準備

イメージ

今回は前述のようにエネミーへの攻撃演出の作成を想定します。イメージとしては下図のように「攻撃」ボタンを押した際、エネミーの画像上に攻撃のアニメーションを表示させるようにします。ただし、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フォルダを作って表示させたいエネミー画像をドラッグ&ドロップします。

今回は特にスクリプトを使用して画像を呼び出す処理は行わないため、あえてResourcesフォルダを作る必要はないですが、アニメーションの画像と区別しやすくするためにフォルダを作っています。

エネミー画像が用意できたら下図のように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ボタンをクリックします。なお、主なポイントは下記の通りです。

Column&Row:Cを5,Rを2に設定(今回の画像が列方向に5、行方向に2分割したいため)
KeepEmptyRects:チェックを入れる(空白の画像も使用したいため)

⑤Applyボタンをクリック

最後に下図のようにApplyボタンをクリックします。

上記①~⑤を行うことで、下図のようにアニメーション画像の矢印ボタンを押すと分割された画像を個別に選択できるようになります。

STEP2:アニメーション 表示用オブジェクトの作成と配置を行う

次にアニメーションを表示させるImageオブジェクトを作成し、画面上に配置します。今回は下図のようにAnimationImageという名前でImageオブジェクトを作成し、エネミー画像に重なるように配置しました。

今回はエネミーの上に攻撃アニメーションを表示させる目的でエネミー画像と重なるようにAnimation用のオブジェクトを配置しましたが、目的や好みに合わせて変更してください。

STEP3:アニメーションの作成と設定

続いてアニメーションの作成と各種設定を行います。

画面表示画像の設定

先ずはAnimationImageオブジェクトに対し、画面上に表示させる画像を設定します。今回は「攻撃」ボタンを押した時のみアニメーション関連の画像を表示させたいので、下図のように空の画像をAnimationImageのSourceImageに設定しました。

アニメーションの作成と設定

次にアニメーションの作成を行います。具体的には下記手順で行います。

①Animationウィンドウを表示させる

下図のようにヒエラルキーウィンドウでAnimationImageを選択した状態で、「Windowタブを選択→Animation→Animationをクリック」という手順を踏みます。

②Animationの作成

上記手順により、下図のようにAnimationウィンドウが表示されるのでCreateをクリックします。

③Animationの保存

そして下図を参考にAtttackAnimationをという名前で保存します

④アニメーション用Propertyの作成

下図を参考に、「AddProperty→Image→Spriteの+ボタン」の順に選択し、アニメーション画像設定用のPropertyを作成します。

ヒエラルキーウィンドウ上でAnimationImageが選択された状態でないとAnimationの編集が行えないため編集がうまくできないときは確認してみてください。
⑤アニメーション用コマ送り画像の設定

下図のようにプロジェクトウィンドウからAnimationウィンドウに画像をドラッグ&ドロップし、コマ送り順に画像を並べます。

今回はアニメーション開始時に画像を表示させないようにしたいため、最初の画像を空ものに設定しています。また、アニメーションのコマ送りは0.03秒間隔にしていますが表示させたい演出等に合わせて変更してください。

⑥ループ設定の解除

今回はアニメーションを1度のみ表示させたいので、ループ設定を解除します。具体的には下図のようにプロジェクトウィンドウでAttackAnimationを選択し、インスペクターウィンドウでLoopTimeのチェックを外します。

⑦設定したアニメーションの確認

ここまで設定できたら下図のようにAnimationウィンドウ上でPlayボタンを押すことでも設定したアニメーションが想定どおり動いていることを確認します。

機能テスト

最後にPlayボタンを押してゲームを起動させ、処理が想定どおりに行われているか確認しましょう。実際に起動させてみた結果、下図のように一度のみ攻撃アニメーションが表示されることが確認できました。

今回はゲーム画面にアニメーション を組み込む方法について説明しましたがいかがだったでしょうか。アニメーションは作成したゲームをよりゲームらしくする重要な要素だと思います。今回の内容が皆さんのゲーム制作に少しでもお役に立てれば幸いです。次回は冒頭述べたように特定の条件下でアニメーションを呼び出す方法について説明いたしますので、そちらも合わせてご覧いただければと思います。

以上。

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

スポンサーリンク
HelloAnotherWorld
HelloAnotherWorld
¥120
posted withアプリーチ
Unity基礎
シェアする
ソフィーのUnity講座

コメント

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