２Ｄタップシューティングゲーム 手順１７
最終更新：
orika_ex_miyako 2021年01月22日(金) 21:39:03履歴
エネミーのHPにもゲージを用意し、HPの値の増減に合わせて、HP用のゲージをアニメ演出させて徐々に変化させる制御を実装します。
以下の内容で順番に実装を進めていきます。
＜実装動画 エネミーの頭上にHP用のゲージをアニメ演出して制御する＞
動画ファイルへのリンク
手順１７ ーエネミーのHPゲージの作成とスクリプトによる制御の実装ー
新しい学習内容は、以下の通りです。
３４．エネミー用ゲームオブジェクトの頭上にHP用ゲージを作成して表示する
１．設計
この手順ではエネミーの残りの Hp をユーザーに伝えるための情報として、Hp のゲージ用のゲームオブジェクトを製作していきます。
このゲームオブジェクトはエネミーに関連するゲームオブジェクトになりますので、
エネミーのゲームオブジェクトである EnemySet ゲームオブジェクトの子オブジェクトとしてゲージ用のゲームオブジェクトを作成していきます。
ゲージには拠点の耐久力のゲージと同じように、Slider ゲームオブジェクトを利用しましょう。
そのため、今回作成するゲームオブジェクトや、スクリプトの修正などは、前回の学習内容の復習にもなっています。
参考にして構いませんので、是非自分で、どんな風にすればHp用のゲージが作れるのか、どうすればゲージをスクリプトから操作できるのか、
処理を考えて実装を進めてみてください。
２．EnemySet ゲームオブジェクトの子オブジェクトとして、Slider ゲームオブジェクトを作成する
EnemySet ゲームオブジェクトをヒエラルキーで選択して右クリックをしてメニューを表示します。
UI => Slider を選択します。Slider コンポーネントを持つ Slider ゲームオブジェクトが一式、EnemySet ゲームオブジェクトの子として追加されます。
Slider ゲームオブジェクト ヒエラルキー画像
Sceneビュー画像
Slider ゲームオブジェクトには始めから複数のゲームオブジェクトが子、孫として不随しています。
このうち、Handle Slide Area ゲームオブジェクトとその子オブジェクトである Handle ゲームオブジェクトについては
今回は不要であるため、削除して以下の画像のような状態にしてください。
ヒエラルキー画像
Sceneビュー画像
それでは Slider ゲームオブジェクト、および子オブジェクトと孫オブジェクトの設定を行います。
３．Slider ゲームオブジェクトの設定を行う
Slider ゲームオブジェクトのサイズがゲージのサイズになりますので、この手順ではサイズの変更を行います。
Slider ゲームオブジェクト 初期インスペクター画像
横幅(Width)は 200 前後、縦幅(Height)は 60 前後に設定してください。
また、高さ(Position Y) を 65 前後して、エネミーの頭上にくるように調整してください。
これは画像によって多少変わるとおもいます。
Slider ゲームオブジェクト インスペクター画像��(参考値)
続いて、Slider コンポーネントの設定を行います。
初期インスペクター画像
基本的に、拠点の耐久力のゲージを作成した場合と同じ設定です。
まずは見ずに、自分で設定を行えるか、拠点の Slider を参考にしながら設定してみてください。
Slider の方向は横方向にスライダーのゲージを変化するようにし、ゲージの最大値を右側に設定します。
これは Slider の初期設定値になっていますので、この設定は変更なしでそのまま利用できます。
今回も Value の値をスクリプトから操作することによって、エネミーのHpの値に合わせてゲージの位置を制御させます。
Slider の機能に関しては変更がありませんので、上記の部分をしっかりと確認して、自分で動かしてみてください。
最後に、Interractable のチェックを外してオフの状態にしておいてください。
各機能は前回までに学習済ですが、不明点については手順をさかのぼって復習しておきましょう。
設定後のインスペクター画像
SceneビューとGameビュー画像
以上でこのゲームオブジェクトの設定は完了です。
９．Background ゲームオブジェクトの設定を行う
Slider ゲームオブジェクトの子オブジェクトである、Background ゲームオブジェクトの設定を行います。
Image コンポーネントの Raycast Target のスイッチを外してオフの状態にしてください。
そのほか、サイズや画像などは特に変更しなくても問題ありません。
この画像を変更すると、ゲージの外枠の画像を設定することが出来ます。そのままでもよいですし、自由に変更していただいて構いません
Background ゲームオブジェクト インスペクター画像
以上でこのゲームオブジェクトの設定は完了です。
１０．Fill Area ゲームオブジェクトの設定を行う
スライダー(ゲージ)の動く範囲を設定します。
RectTransfom コンポーネントの Left と Right の値をそれぞれ 0 に設定してください。
この値が 0 にすることで、スライダーのゲージを一番左端からスタートさせる(Value が 0 のとき)ことが出来ます。
Fill Area ゲームオブジェクト インスペクター画像
以上でこのゲームオブジェクトの設定は完了です。
１１．Fill ゲームオブジェクトの設定を行う
実際にゲージとして動く部分のゲームオブジェクトです。
画像を設定すると、その画像をゲージとして利用することが出来ます。
最初に RectTransfom コンポーネントの Width の値を 0 に変更してください。
理由は Fill Area ゲームオブジェクトとおなじで、ゲージの位置を左端からスタートするためです。
続いて、Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックを入れてオンの状態にしてください。
最後の Image コンポーネントの設定です。
今回は画像の変更はせずに、色のみ赤系の色に変更しています。ですが、画像、色ともに、自由に設定してください。
色の設定後は Image コンポーネントの Raycast Target のチェックを外してオフの状態にしてください。
Fill ゲームオブジェクト インスペクター画像
１２．Slider の Value を操作して動作を確認する
以上で Slider ゲームオブジェクト関連の設定は完了です。
Slider コンポーネントの Value の値を操作して、Gameビュー の エネミーのゲージが動くことを確認してください。
Sceneビュー画像とGameビュー画像
＜検証動画 Value の値を操作してゲージが動くことを確認する＞
動画ファイルへのリンク
完成したら、次はスクリプトを修正して、Slider コンポーネントの Value の値を制御する処理を実装します。
３５．EnemyController スクリプトを修正して、バレットに接触した際に HP のゲージをアニメ演出しながら徐々に移動させる制御処理を実装する。成功したら EnemySet ゲームオブジェクトをプレファブ化する
１．設計
ゲージ用のゲームオブジェクトが出来ましたので、このゲージを操作する処理をスクリプトに記述して実装していきます。
エネミーのゲームオブジェクトの子オブジェクトですので、管理しやすいように、EnemyController スクリプトに処理を追加する設計を考えます。
Hp 用のゲージの操作処理を実装するには、耐久力用のゲージの際にも利用した、 DOTween の DOValue メソッドを利用します。
また、ゲージに情報を反映するタイミングも、耐久力用のゲージとほとんど同じです。
ゲームスタート時、それと、Hp の値が変動(現在であれば、バレットにぶつかって Hp が減算)した後が、ゲージ操作のタイミングになります。
Hp の値もマイナス方向になってしまう恐れがありますので、値の制限処理も Mathf.Clamp メソッドを利用することで、同じように実装出来ます。
前回の実装を見ながら、どんな手順で、どんな変数を用意し、どのように利用しているかを確認しながら、自分で処理を考えて実装に挑戦してください。
２．EnemyController スクリプトを修正し、Slider コンポーネントの Value の値を制御する処理を追加する
設計を元に処理を記述します。
全体的に前回の DefenseBase スクリプトで利用した変数や処理、また DOTween の処理も同じ要領で実装できます。
どんな処理があれば、Hp のゲージが制御できるようになるか、DefenseBase スクリプトを確認しながら考えてみてください。
今までと同じように、まずは日本語で処理を記述する場所にコメントを書いてみましょう。
EnemyController.cs
スクリプトを修正したらセーブします。
EnemySet ゲームオブジェクトのインスペクターを確認して、新しく public 修飾子で宣言した変数が表示されているか確認します。
EnemySet ゲームオブジェクト インスペクター画像
３．EnemySet ゲームオブジェクトの設定を行う
EnemySet ゲームオブジェクトのインスペクターより、EnemyController スクリプトを確認し、slider 変数に必要な情報をアサインします。
どのゲームオブジェクトのどの情報が必要なのか、判断をしてアサインしてください。
EnemySet ゲームオブジェクト インスペクター画像
４．ゲームを実行して動作を確認する
設定が完了したのでゲームを実行して、スクリプトによって Slider コンポーネントが制御されているか確認します。
ゲームがスタートすると、空である Hp 用のゲージがアニメ演出しながら徐々に満タンになります。
また、バレットがエネミーにぶつかって Hp の値が減算された場合にも、減算後の Hp の値になるまで、アニメ演出しながら徐々にゲージが減っていきます。
＜実行動画 エネミーの頭上にHP用のゲージをアニメ演出して制御する＞
動画ファイルへのリンク
以上で実装完了です。
５．EnemySet ゲームオブジェクトをプレファブにする
挙動に問題がなければ、エネミーのゲームオブジェクトをスクリプトから生成させることも念頭に入れて
EnemySet ゲームオブジェクトをプレファブにしておきます。
ヒエラルキーにある EnemySet ゲームオブジェクトを Project 内の Prefabs フォルダに ドラッグアンドドロップしてください。
ゲームオブジェクトがプレファブ化されます。ヒエラルキーにある EnemySet ゲームオブジェクトはプレファブから作られたクローンになるため、
ゲームオブジェクトのアイコンと文字色が青くなり、プレファブであることが判別出来るようになります。
ヒエラルキー画像
無事にプレファブになったら、ヒエラルキーにある EnemySet ゲームオブジェクトは削除してください。
EnemySet ゲームオブジェクトを選択して右クリックをしてメニューを表示し、Delete を選択するか、キーボードの Delete ボタンを押すことで削除できます。
その後、Prefabs フォルダ内の プレファブになった EnemySet ゲームオブジェクトを選択して、インスペクターの一番上にある Opne Prefab ボタンを押してプレファブ編集モードにします。
インスペクター画像
Transform の Position の値をすべて (0, 0, 0)にしておいてください。
このとき、Transform コンポーネントの Reset をかけると、設定してある Scale の値も 1 に戻ってしまうため、Position の値だけを 0 にしてください。
EnemySet ゲームオブジェクト プレファブにした際のインスペクター画像
この EnemySet ゲームオブジェクトはCanvas 下で作成しているため、編集モードないのヒエラルキーは Canvas の子として表示されていますが、実際には１つの独立したゲームオブジェクトです。
RectTransfom コンポーネントを持つゲームオブジェクトをプレファブにした場合には、Canvas ありきで利用するため、このように表示されます。
実際にこのプレファブのゲームオブジェクトをヒエラルキーにドラッグアンドドロップして設置してみると分かりますが、Canvas ゲームオブジェクトが一緒に生成されることはありません。
EnemySet ゲームオブジェクト 編集モード画像
以上でこの手順は終了です。
次は 手順１８ −エネミーの自動生成処理の実装− です。
http://matorierunormal.sblo.jp/article/187233424.h...
https://qiita.com/azumagoro/items/6d8d22f0793f2799...
以下の内容で順番に実装を進めていきます。
＜実装動画 エネミーの頭上にHP用のゲージをアニメ演出して制御する＞
動画ファイルへのリンク
手順１７ ーエネミーのHPゲージの作成とスクリプトによる制御の実装ー
３４．エネミー用ゲームオブジェクトの頭上にHP用ゲージを作成して表示する ３５．EnemyController スクリプトを修正して、バレットに接触した際に HP のゲージをアニメ演出しながら徐々に移動させる制御処理を実装する。成功したら EnemySet ゲームオブジェクトをプレファブ化する
新しい学習内容は、以下の通りです。
・復習しながら、自分で処理を書いてみる
３４．エネミー用ゲームオブジェクトの頭上にHP用ゲージを作成して表示する 
１．設計
この手順ではエネミーの残りの Hp をユーザーに伝えるための情報として、Hp のゲージ用のゲームオブジェクトを製作していきます。
このゲームオブジェクトはエネミーに関連するゲームオブジェクトになりますので、
エネミーのゲームオブジェクトである EnemySet ゲームオブジェクトの子オブジェクトとしてゲージ用のゲームオブジェクトを作成していきます。
ゲージには拠点の耐久力のゲージと同じように、Slider ゲームオブジェクトを利用しましょう。
そのため、今回作成するゲームオブジェクトや、スクリプトの修正などは、前回の学習内容の復習にもなっています。
参考にして構いませんので、是非自分で、どんな風にすればHp用のゲージが作れるのか、どうすればゲージをスクリプトから操作できるのか、
処理を考えて実装を進めてみてください。
２．EnemySet ゲームオブジェクトの子オブジェクトとして、Slider ゲームオブジェクトを作成する
EnemySet ゲームオブジェクトをヒエラルキーで選択して右クリックをしてメニューを表示します。
UI => Slider を選択します。Slider コンポーネントを持つ Slider ゲームオブジェクトが一式、EnemySet ゲームオブジェクトの子として追加されます。
Slider ゲームオブジェクト ヒエラルキー画像
Sceneビュー画像
Slider ゲームオブジェクトには始めから複数のゲームオブジェクトが子、孫として不随しています。
このうち、Handle Slide Area ゲームオブジェクトとその子オブジェクトである Handle ゲームオブジェクトについては
今回は不要であるため、削除して以下の画像のような状態にしてください。
ヒエラルキー画像
Sceneビュー画像
それでは Slider ゲームオブジェクト、および子オブジェクトと孫オブジェクトの設定を行います。
３．Slider ゲームオブジェクトの設定を行う
Slider ゲームオブジェクトのサイズがゲージのサイズになりますので、この手順ではサイズの変更を行います。
Slider ゲームオブジェクト 初期インスペクター画像
横幅(Width)は 200 前後、縦幅(Height)は 60 前後に設定してください。
また、高さ(Position Y) を 65 前後して、エネミーの頭上にくるように調整してください。
これは画像によって多少変わるとおもいます。
Slider ゲームオブジェクト インスペクター画像��(参考値)
続いて、Slider コンポーネントの設定を行います。
初期インスペクター画像
基本的に、拠点の耐久力のゲージを作成した場合と同じ設定です。
まずは見ずに、自分で設定を行えるか、拠点の Slider を参考にしながら設定してみてください。
Slider の方向は横方向にスライダーのゲージを変化するようにし、ゲージの最大値を右側に設定します。
これは Slider の初期設定値になっていますので、この設定は変更なしでそのまま利用できます。
今回も Value の値をスクリプトから操作することによって、エネミーのHpの値に合わせてゲージの位置を制御させます。
Slider の機能に関しては変更がありませんので、上記の部分をしっかりと確認して、自分で動かしてみてください。
最後に、Interractable のチェックを外してオフの状態にしておいてください。
各機能は前回までに学習済ですが、不明点については手順をさかのぼって復習しておきましょう。
設定後のインスペクター画像
SceneビューとGameビュー画像
以上でこのゲームオブジェクトの設定は完了です。
９．Background ゲームオブジェクトの設定を行う
Slider ゲームオブジェクトの子オブジェクトである、Background ゲームオブジェクトの設定を行います。
Image コンポーネントの Raycast Target のスイッチを外してオフの状態にしてください。
そのほか、サイズや画像などは特に変更しなくても問題ありません。
この画像を変更すると、ゲージの外枠の画像を設定することが出来ます。そのままでもよいですし、自由に変更していただいて構いません
Background ゲームオブジェクト インスペクター画像
以上でこのゲームオブジェクトの設定は完了です。
１０．Fill Area ゲームオブジェクトの設定を行う
スライダー(ゲージ)の動く範囲を設定します。
RectTransfom コンポーネントの Left と Right の値をそれぞれ 0 に設定してください。
この値が 0 にすることで、スライダーのゲージを一番左端からスタートさせる(Value が 0 のとき)ことが出来ます。
Fill Area ゲームオブジェクト インスペクター画像
以上でこのゲームオブジェクトの設定は完了です。
１１．Fill ゲームオブジェクトの設定を行う
実際にゲージとして動く部分のゲームオブジェクトです。
画像を設定すると、その画像をゲージとして利用することが出来ます。
最初に RectTransfom コンポーネントの Width の値を 0 に変更してください。
理由は Fill Area ゲームオブジェクトとおなじで、ゲージの位置を左端からスタートするためです。
続いて、Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックを入れてオンの状態にしてください。
最後の Image コンポーネントの設定です。
今回は画像の変更はせずに、色のみ赤系の色に変更しています。ですが、画像、色ともに、自由に設定してください。
色の設定後は Image コンポーネントの Raycast Target のチェックを外してオフの状態にしてください。
Fill ゲームオブジェクト インスペクター画像
１２．Slider の Value を操作して動作を確認する
以上で Slider ゲームオブジェクト関連の設定は完了です。
Slider コンポーネントの Value の値を操作して、Gameビュー の エネミーのゲージが動くことを確認してください。
Sceneビュー画像とGameビュー画像
＜検証動画 Value の値を操作してゲージが動くことを確認する＞
動画ファイルへのリンク
完成したら、次はスクリプトを修正して、Slider コンポーネントの Value の値を制御する処理を実装します。
３５．EnemyController スクリプトを修正して、バレットに接触した際に HP のゲージをアニメ演出しながら徐々に移動させる制御処理を実装する。成功したら EnemySet ゲームオブジェクトをプレファブ化する
１．設計
ゲージ用のゲームオブジェクトが出来ましたので、このゲージを操作する処理をスクリプトに記述して実装していきます。
エネミーのゲームオブジェクトの子オブジェクトですので、管理しやすいように、EnemyController スクリプトに処理を追加する設計を考えます。
Hp 用のゲージの操作処理を実装するには、耐久力用のゲージの際にも利用した、 DOTween の DOValue メソッドを利用します。
また、ゲージに情報を反映するタイミングも、耐久力用のゲージとほとんど同じです。
ゲームスタート時、それと、Hp の値が変動(現在であれば、バレットにぶつかって Hp が減算)した後が、ゲージ操作のタイミングになります。
Hp の値もマイナス方向になってしまう恐れがありますので、値の制限処理も Mathf.Clamp メソッドを利用することで、同じように実装出来ます。
前回の実装を見ながら、どんな手順で、どんな変数を用意し、どのように利用しているかを確認しながら、自分で処理を考えて実装に挑戦してください。
２．EnemyController スクリプトを修正し、Slider コンポーネントの Value の値を制御する処理を追加する
設計を元に処理を記述します。
全体的に前回の DefenseBase スクリプトで利用した変数や処理、また DOTween の処理も同じ要領で実装できます。
どんな処理があれば、Hp のゲージが制御できるようになるか、DefenseBase スクリプトを確認しながら考えてみてください。
今までと同じように、まずは日本語で処理を記述する場所にコメントを書いてみましょう。
EnemyController.cs
スクリプトを修正したらセーブします。
EnemySet ゲームオブジェクトのインスペクターを確認して、新しく public 修飾子で宣言した変数が表示されているか確認します。
EnemySet ゲームオブジェクト インスペクター画像
３．EnemySet ゲームオブジェクトの設定を行う
EnemySet ゲームオブジェクトのインスペクターより、EnemyController スクリプトを確認し、slider 変数に必要な情報をアサインします。
どのゲームオブジェクトのどの情報が必要なのか、判断をしてアサインしてください。
EnemySet ゲームオブジェクト インスペクター画像
４．ゲームを実行して動作を確認する
設定が完了したのでゲームを実行して、スクリプトによって Slider コンポーネントが制御されているか確認します。
ゲームがスタートすると、空である Hp 用のゲージがアニメ演出しながら徐々に満タンになります。
また、バレットがエネミーにぶつかって Hp の値が減算された場合にも、減算後の Hp の値になるまで、アニメ演出しながら徐々にゲージが減っていきます。
＜実行動画 エネミーの頭上にHP用のゲージをアニメ演出して制御する＞
動画ファイルへのリンク
以上で実装完了です。
５．EnemySet ゲームオブジェクトをプレファブにする
挙動に問題がなければ、エネミーのゲームオブジェクトをスクリプトから生成させることも念頭に入れて
EnemySet ゲームオブジェクトをプレファブにしておきます。
ヒエラルキーにある EnemySet ゲームオブジェクトを Project 内の Prefabs フォルダに ドラッグアンドドロップしてください。
ゲームオブジェクトがプレファブ化されます。ヒエラルキーにある EnemySet ゲームオブジェクトはプレファブから作られたクローンになるため、
ゲームオブジェクトのアイコンと文字色が青くなり、プレファブであることが判別出来るようになります。
ヒエラルキー画像
無事にプレファブになったら、ヒエラルキーにある EnemySet ゲームオブジェクトは削除してください。
EnemySet ゲームオブジェクトを選択して右クリックをしてメニューを表示し、Delete を選択するか、キーボードの Delete ボタンを押すことで削除できます。
その後、Prefabs フォルダ内の プレファブになった EnemySet ゲームオブジェクトを選択して、インスペクターの一番上にある Opne Prefab ボタンを押してプレファブ編集モードにします。
インスペクター画像
Transform の Position の値をすべて (0, 0, 0)にしておいてください。
このとき、Transform コンポーネントの Reset をかけると、設定してある Scale の値も 1 に戻ってしまうため、Position の値だけを 0 にしてください。
EnemySet ゲームオブジェクト プレファブにした際のインスペクター画像
この EnemySet ゲームオブジェクトはCanvas 下で作成しているため、編集モードないのヒエラルキーは Canvas の子として表示されていますが、実際には１つの独立したゲームオブジェクトです。
RectTransfom コンポーネントを持つゲームオブジェクトをプレファブにした場合には、Canvas ありきで利用するため、このように表示されます。
実際にこのプレファブのゲームオブジェクトをヒエラルキーにドラッグアンドドロップして設置してみると分かりますが、Canvas ゲームオブジェクトが一緒に生成されることはありません。
EnemySet ゲームオブジェクト 編集モード画像
以上でこの手順は終了です。
次は 手順１８ −エネミーの自動生成処理の実装− です。
http://matorierunormal.sblo.jp/article/187233424.h...
https://qiita.com/azumagoro/items/6d8d22f0793f2799...
コメントをかく