Unityに関連する記事です

 以下の内容で順番に実装を進めていきます。

手順10 −的球のUI機能を実装−
19.的球ゲームオブジェクトの頭上に体力ゲージを作成して表示する
20.的球スクリプトを修正して、体力の数値と体力ゲージをリンクさせてアニメ表示する



 新しい学習内容は、以下の通りです。

・Sliderコンポーネントの設定と説明
・DoTweenの補間機能と実装例 OnCompleteメソッド、SliderのValueの値をDoTweenで制御する
・キャスト処理
・処理を書く場所について



19.的球ゲームオブジェクトの頭上に体力ゲージを作成して表示する

設計


 的球に体力が実装され、破壊されるようになりました。このままでも問題はありませんが、
ゲーム的には的となる敵の体力が画面上に見えていた方が、その体力を判断基準とし、次にどの的球を狙おうかという戦略性が生まれます。

 そこでここでは的球に体力ゲージを追加し、体力の値と同期してゲージが減少する機能を実装します。

 体力ゲージには、UnityのUI機能である Slider コンポーネントを活用します。こちらを設定後、的球のスクリプトを修正して
体力ゲージと体力の値とを紐づけて、体力の値に合わせて体力ゲージも減少していくようにする処理を追加します。

 このような情報があるかないかでゲーム性が大きく変わってきますので、UI要素もゲーム性の1つになっていることを学習していきましょう。


EnemyBallゲームオブジェクトに、Sliderゲームオブジェクトを追加する


 EnemyBallゲームオブジェクトをヒエラルキーで選択して右クリックをしてメニューを表示します。
UI => Slider を選択します。Sliderコンポーネントを持つゲームオブジェクトが一式、EnemyBallゲームオブジェクトの子として追加されます。

EnemyBallゲームオブジェクトのヒエラルキー画像



 Slider ゲームオブジェクトには始めから複数のゲームオブジェクトが子、孫として不随しています。
このうち、Handle Slide Area ゲームオブジェクトとその子オブジェクトである Handle ゲームオブジェクトについては今回は不要であるため、
削除して以下の画像のような状態にしてください。

EnemyBallゲームオブジェクトのヒエラルキー画像



Sliderゲームオブジェクトの各コンポーネントを設定する


 EnemyBallゲームオブジェクトの子オブジェクトである、Sliderゲームオブジェクトを選択してインスペクターを確認します。
RectTransformコンポーネントとSliderコンポーネントがアタッチされています。Sliderコンポーネントは変更箇所はありません。

 RectTransformコンポーネントのPositionのY軸の値を操作して、Slider ゲームオブジェクトが EnemyBallゲームオブジェクトの頭上に来る位置に調整してください。
また Sidth と Height の値も、的球の画像の大きさに合わせて適宜な大きさに調整してください。
下記の画像の位置を参考にしてください。あるいは、頭上の代わりに足元に Slider を表示して頂いても構いません。


SliderのRectTransform画像(頭上に来るように)


SliderのSceneビューでの画像



足元の場合のSliderのRectTransform画像画像


足元の場合のSliderのSceneビューでの画像



 Sliderコンポーネントについては変更ありません。(Handle Slide Areaゲームオブジェクトを削除しているため警告が出ますが問題ありません)
このコンポーネントの管理している Value の値を操作することで Slider(ゲージ)が動きます。ここをスクリプトから変更するように、あとで紐づけを行います。

 Valueの値は 0 - 1 の間です。0 のときはゲージは空の状態、1 が満タンの状態です。初期値は 0 のままで問題ありません。

Slider



検証動画 SliderのValue
https://gyazo.com/0a896d4d70ab93a06a3877e6072f1bd5


Backgroundゲームオブジェクトを設定する


 Backgroundゲームオブジェクトには、RectTransformコンポーネント、Canvas Renderer コンポーネント、Imageコンポーネントがアタッチされています。

 RectTransformコンポーネントは変更箇所はありません。

 Imageコンポーネントは、Raycast Target のチェックを外してください。
またColorのAlphaの値は適宜な数値に変更してください。そのままでも問題ありません。
こちらのSource Imageの色や画像が、ゲージの背景色になります。


Backgroundゲームオブジェクトのインスペクター画像



Fill AreaゲームオブジェクトとFillゲームオブジェクトの設定を行う


 Fill Areaゲームオブジェクトのインスペクターを確認します。
RectTransformコンポーネントのみになっていますので、left と Right の値をどちらも 0 に設定してください。
この値が 0 になっていないとゲージが完全に隠れません。

Fill Areaゲームオブジェクトのインスペクター画像



 Fillゲームオブジェクトのインスペクターを確認します。
RectTransformコンポーネント、CanvasRendererコンポーネント、Imageコンポーネントがアタッチされています。

 RectTransformコンポーネントの Width の値を 0 に設定してください。これも Fill Area と同じ理由です。

 Imageコンポーネントでは、Raycast Target のチェックを外してください。
Color の設定でゲージの色を変更できますので、任意の色や透明度に変更してください。
こちらで設定した色が動くゲージの色になります。
Source Image の画像は初期設定では UIImage に設定されていますが、任意の画像を設定することも出来ます。(今回は設定していません)


Fillゲームオブジェクトのインスペクター画像



20.的球スクリプトを修正して、体力の数値と体力ゲージをリンクさせてアニメ表示する

設計

 【19】で作成した体力ゲージですが、現在はまだ的球の体力の値との紐づけが行われていません。
そのため体力の値が減少しても、体力ゲージは動きません。

 的球のスクリプトを修正して、体力ゲージを管理している Slider コンポーネントの紐づけを行い、
体力の値が更新されるたびに、体力ゲージにも同じように更新の処理を入れて、双方がリンクして動作するように処理を実装します。

 体力ゲージはDoTweenを使って動作させますのでゲージがアニメ演出(徐々に減る)するようにします。

的球スクリプトを修正する


 宣言フィールドに変数を2つ追加します。1つは体力の最大値を管理するためのもの、もう1つは Slider コンポーネントを代入するためのものです。

 新しくUpdateHpGaugeメソッドを1つ追加し、このメソッドにて体力ゲージの表示の更新を行います。
他のメソッドからは、体力ゲージの表示更新を行いタイミングで、このUpdateHpGaugeメソッドを呼び出すだけでよい作りにします。
同じ処理が複数ある場合には、このようにメソッドを作って処理をまとめておくことで、役割が明確化・分担化されてます。同じ処理を書く必要もなくなります。

 そしてStartメソッドとOnCollisionEnter2Dメソッドを修正して、先ほど作成したUpdateHpGaugeメソッドを呼び出して体力ゲージの更新を行います。


EnemyBall.cs

 <= クリックすると開きます。




 スクリプトを修正したら、EnemyBallゲームオブジェクトのインスペクターを確認します。
新しく追加した変数のアサインができるようになっていますので、ヒエラルキーにあるEnemyBallゲームオブジェクトの子オブジェクトのSliderゲームオブジェクトを
ドラッグアンドドロップしたアサインします。これで紐づけが出来ました。

手順動画 Sliderのアサイン
https://gyazo.com/3cdf02aa97f6c88b893f5a452d2caa92


<SetEaseメソッドとOnCompleteメソッド>


  sequence.Join(transform.DOScale(startScale, 0.15f).SetEase(Ease.InCirc).OnComplete(() => {       
            // 体力の最大値を代入
            maxHp = hp;

            // 体力ゲージの表示を更新 => 的球が出現してからゲージが徐々に満タンになるアニメ演出
            UpdateHpGauge();
    }));
1.SetEaseメソッド
 SetEaseメソッドは他のDoTweenのメソッドに付随する処理です。このようにDoTweenではDoTweenのメソッド同士を1つの処理の塊として続けて処理を行うことができます。
処理を続ける場合には、前のメソッドの後にピリオド(ドット)を書くことで、次のメソッドを書くことが可能です。こういった処理をメソッドチェーンといいます。

 SetEaseメソッドではEaseというアニメーションさせる際のパターンを変更することができます。Easeはenum型で設定されており、Ease.タイプ の書式で記述します。
非常に多くの種類があります。今回は Ease.InCirc を使用しています。
 
参考サイト 
全Easeの種類がまとめられており、非常に分かりやすいです。
ゲームUIネット様
DOTweenのイージング一覧を世界一詳しく&分かりやすく説明する
https://game-ui.net/?p=835

2.OnCompleteメソッド

 OnCompleteメソッドも他のDoTweenメソッドに付随する処理です。この処理はコールバック処理になっており、一緒に処理しているメインのメソッドの処理の終了を待ちます。
その処理が終了してから、このOnCompleteメソッドの中に記述した処理を実行してくれます。

 今回はtransform.DOScaleメソッドによって元の大きさに的球が戻った後に、OnCompleteメソッドの処理が実行されるようになっています。
そのため、的球が画面に表示され終わるのを待ってから、体力ゲージが動いて満タンになる、という設計になっています。


<SliderのValueの値をDoTweenで制御する>


 DoValueメソッドは Slider コンポーネントに対して使用できるメソッドです。
その名前の通り、Sliderコンポーネントの持つ Value の値を補間処理を行ってくれます。

 第1引数には最終的な Value の値を入れます。この値に対して、第2引数の時間をかけて値を変更します。
そのため、計算結果の値になるまでに 0.5秒かけて Value の値を変更しています。

  hpSlider.DOValue((float)hp / maxHp), 0.5f);


<キャスト処理>


 今回のケースでは、 hp の値を maxHp で割って float型にキャスト(型変換)した値(0.0f - 1.0f)を Value の値としています。
Value の値は float 型ですので、int型である hp と maxHp の計算結果はそのままでは使えないため、ここではキャストを行っています。

 キャストとは型変換の処理のことです。今回はint型を変換していますが、他の型での変換も、型同士の変換処理はキャストと呼ばれます。
他にもよく使用している処理があります。それがToStringメソッドです。これはint型などの数字を扱う型を文字列であるstringに変換している処理です。


ゲームを実行して動作を確認する


 ゲームを実行して動作を確認します。的球が出現したあとに体力ゲージが空から満タンになるアニメ演出が追加されていれば成功です。
また、手球と接触した際にも体力ゲージがアニメしながら動いていけば問題ありません。両方確認しましょう。


実行動画 ‥球が出現してから、体力ゲージがアニメ演出しながら空から満タンになる
https://gyazo.com/04b729f1b1a86a13df175e52e677c3db


実行動画◆ー蟲紊叛椰┐靴榛櫃紡領魯押璽犬アニメしながら減少する
https://gyazo.com/bc71d7a99d8b054244fb179263ed96f9


<処理を書く場所について>


 OnCompleteメソッド内に記述している処理を、OnCompleteメソッドから出して、次の行に書いてみましょう。
敵の体力ゲージのアニメ演出に違いが出ます。

 
  sequence.Join(transform.DOScale(startScale, 0.15f).SetEase(Ease.InCirc).OnComplete(() => {
         
        // 体力の最大値を代入
        maxHp = hp;

        // 体力ゲージの表示を更新 => 的球が出現してからゲージが徐々に満タンになるアニメ演出
        UpdateHpGauge();
  }));

 処理の書く場所を変更する ↓

  sequence.Join(transform.DOScale(startScale, 0.15f).SetEase(Ease.InCirc));

    // 体力の最大値を代入
    maxHp = hp;

    // 体力ゲージの表示を更新 => 的球が出現してからゲージが徐々に満タンになるアニメ演出
    UpdateHpGauge();

検証動画 処理の書く場所を変えると?
https://gyazo.com/d502512106d174e55afeeff23cb8f80f


 処理を書く場所を変えると、的球が出現するとすでに体力ゲージが満タンの状態です。先ほどとは挙動が異なります。

 これは何故でしょうか。

 OnCompleteメソッドでは、Joinメソッド内のDoTweenの処理が終了するのを待ってから、OnCompleteメソッド内にある処理を実行しています。
つまり、的球が画面に出現するのを待って、体力ゲージの表示を更新しています。そのため、的球が出現してから体力ゲージが動きます。

 書き換えた処理には、この「処理が終わるまで待つ」という処理がありません。
つまり、Joinメソッドが実行されたあとは、すぐに体力ゲージの表示を更新する処理を行います。
そのため、的球が出現する頃には体力ゲージが動き終わっていて、すでに満タンになっているためです。

 
 このように、同じ処理であっても、記述する場所の内容によって大きく処理が異なってきます。
自分が考えている処理がどのような処理であるかを把握して、それをどこに書くべきか考え、適切な場所にコードを書きこんでいくことが大切になります。 



 
 以上でこの手順は終了です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます