Unityのアクションゲームで与えたダメージを与えた場所にUIで表示する

主人公が敵に攻撃を与えた時に

Unityで敵キャラクターのHPを表すUIを頭上に表示してキャラクターと一緒に移動するようにします。

で敵のHPのメーターを減らすという事をしました。

今回は敵のHPのメーターを減らすのではなく敵に与えたダメージを表示するようにしてみます。

また、敵が攻撃を受けた体の部位にダメージのUIを表示するようにし、UIを上の方に動かしながら段々見えなくなるようにし、ダメージUIの表示が邪魔にならないようにします。

今回の機能を作成すると、

↑のような感じでダメージを与えた場所からダメージUIが登場し、ダメージUIが常にカメラの方向を向くようになっています。

スポンサーリンク

攻撃を受ける簡易的な敵キャラクターの作成

まずは簡易的な敵キャラクターを作成していきます。

ダメージUI1

上のようにヒエラルキーで右クリック→Create Emptyで空のゲームオブジェクトを作成し、名前をKakasiとします。

Kakasiの子要素にヒエラルキーで右クリック→3D Objectで頭、体、右手、左手、右足、左足をSphereとCapsuleで作成します。

それぞれ名前をHead、Body、RightHand、LeftHand、RightFoot、LeftFootとします。

簡易的な敵キャラクターはご自由に作成してください。普通の人型3Dオブジェクトを使用し、コライダを分けて作成してもOKです。

かかしの設定

KakasiにはAdd Component→Physics→CharacterControllerを取りつけます。

またTakeDamageスクリプトを作成し取り付けておきます。

かかしの体のコライダのIs Triggerにチェックを入れ物理的に当たらないようにします。

かかしのBodyのインスペクタ

上がKakasiの子要素のBodyのインスペクタです。

Enemyという新しいタグを作成し、Bodyのタグを変更します。

Kakasiの他の子要素も同じようにタグをEnemyに設定しておきます。

ダメージUI4

上が出来上がった敵キャラクター「かかし君」です。

人型キャラクター全体を覆うCharacterControllerのコライダと体の部位ごとにコライダが設定されています。

ここで作成した「かかし君」はその場に立っているだけにしておきます。

かかしに設定するTakeDamageスクリプトの作成

かかしが主人公の攻撃を受けた時の処理をTakeDamageスクリプトに書きます。

インスペクタにはダメージ用のUIを設定します(後で作成します)。

主人公から攻撃を受けた時にDamageメソッドを呼び出しますが、その中でダメージ用のUIをインスタンス化し、受け取ったコライダの中心からカメラ向きに0.2移動した地点で登場させます。

ダメージを表示するUIの作成

次にダメージを与えた時に表示するダメージUIを作成していきます。

ダメージUI5

ヒエラルキーで右クリック→UI→Canvasでキャンバスを作成し、名前をDamageUIとします。

子要素に右クリック→UI→Textとしダメージ用のテキストを作ります。

ダメージ用UIのインスペクタ

RectTransformのScaleを調整してUIの大きさを変更します。

DamageUIのインスペクタのCanvasのRender ModeをWorld Spaceに変更し、Add Componentから新しいスクリプトDamageUIを作成し取りつけます。

Render ModeをWorld Spaceに変更するとUIが他のゲームオブジェクトと同じように扱う事が出来ます。

DamageUIスクリプトはUIの移動やカメラの方向を向かせたり、UIの透明度を変更したりします。

スクリプトは後で作成します。

DamageUIの子要素のText

DamageUIの子要素のTextには初期テキストとして100を設定します。

ダメージUI8

上が出来上がったダメージ用UIです。

「かかし君」の辺りに表示されていますが、これはかかし君のサイズとUIのサイズを合わせる為です。
ダメージUIを表示する位置はスクリプトで行うので位置を厳密に設定する必要はありません。

DamageUIが出来上がったらAssetsフォルダにドラッグ&ドロップをしてプレハブ化しておきます。

DamageUIの作成

DamageUIスクリプトを作成します。

ダメージ表示のテキストの不透明度を1から少しづつ下げ透明にしていきます。

UIの角度はカメラの角度の方向を向くようにし、位置はmoveValueの速さで上に進んでいくようにします。

alpha値が0より下になったらDamageUIインスタンスを削除します。

Colorは

Color(R, G, B, A)

でRはRed、GはGreen、BはBlue、AはAlphaをfloatで指定します。

つまり白はColor(1, 1, 1, 1)で黒はColor(0, 0, 0, 1)、青はColor(0, 0, 1, 1)となります。

主人公の攻撃が当たったかどうか

次に主人公の武器が「かかし君」に当たったかどうかの処理ですが、この辺りの処理は

Unityで主人公キャラが剣を振って敵キャラを攻撃出来るようにする機能を作成します

を参考に作成してください。

アニメーションイベント、コライダのOn・Offの機能を作成しておいてください。

主人公が装備している武器や攻撃時の手足にコライダを設定しIsTriggerにチェックを入れます。

最初は攻撃判定をさせないので当たり判定のコライダ(SphereCollider等)の名前の横のチェックを外しておきます。

武器や手足などの当たり判定箇所にAttackという新しいスクリプトを取りつけます。

武器や手足のコライダが他のコライダと接触した時にOnTriggerEnterイベントが発生するので、接触した相手にEnemyタグを設定したコライダがあった時に、そのコライダのルート(Kakasi)に設定しているTakeDamageスクリプトのDamageメソッドを呼び出します。

その際に接触したコライダの情報も渡します。

ダメージUIが正しく動作するか確認してみる

これで機能が出来たので主人公で「かかし君」を攻撃しダメージが表示されるかどうか確認してみましょう。

ダメージUI9

上のようにうまくいきました。

敵キャラクター「かかし君」を動かすとずれる

「かかし君」を少し動かしてみましょう。

上のようなスクリプトをKakasiに設定します。

X軸を行ったり来たりするようになります。

ダメージUI10

「かかし君」が動き出した事で上のようにDamageUIと「かかし君」との位置がずれてしまいます。

こういう仕様でいいという人はいいんですが、DamageUIも「かかし君」とともに動かしたい方もいると思います。

DamageUIを「かかし君」の子要素にする

TakeDamageスクリプトを修正します。

DamageUIを作成した時に親要素を引数で受け取ったコライダのゲームオブジェクトにします。

この場合はDamageUIの親要素がかかしのダメージを受けた部位が親要素になります。

DamageUIは「かかし君」の子要素の部位なので、「かかし君」が移動するとDamageUIも一緒に動くようになります。

それではUnityの実行ボタンを押して確認してみましょう。

ダメージUI11

上のようにDamageUIがKakasiと共に動くようになりました。

これでUnityのアクションゲームで与えたダメージを与えた場所にUIで表示する機能が完了しました。

本機能とは関係なく当たり判定で気になる事

今回の機能を作成していて武器と敵の接触判定は気をつけなければいけないなと思いました。
剣を振るアニメーションが速いと敵との接触判定(OnTriggerEnter)がスルーされる事が多いです。

アニメーション再生スピードを落とせば問題はないんですが・・・、
見た目的に武器が敵に当たっているのに当たり判定がされない!?という状況になってしまう可能性もあります。

当たり範囲のコライダを大きくしたりアニメーションのスピードを下げたりして回避するのがいいのかな?
ここら辺もうまく出来るようにしなきゃいかんですね(-.-)

そこら辺の対処は

Unityで速い攻撃モーションの時に武器と敵との当たり判定がされない事があります。そこで自分でメッシュを生成しそれをコライダに設定する事で対処出来るようにします。

を参照してください。

スポンサーリンク

記事をシェアして頂ける方はこちら

フォローして頂くとやる気が出ます

コメント

  1. vabi より:

    『結果(gif動画)』を頭に持ってくる意味はこれからやろうとしている事が読者に対して直感的に理解出来る事と、いわば今回やろうとしている事のフォーカスにもなるます。結果にたどり着くまでに必要なプロセスを読者自身も考える間が出来ると言う事かな。
    あと結論を見るためのページ送りをしなくて済むから。(この一手間がバカに出来ない→頻繁に見ようと思わなくなる→結果見なくなる。)
    見る側としての意見としてブログの見やすさという点ではまだまだ改善の余地がありそうかなと思った次第です。
    あとは、好きなゲームネタ放り込んだらいいんじゃないですか?
    裾野を広げる意味で。ゲームブログなんだから。(読者も増える→UNITyユーザーも増えるかも)