Unity:自機にHPを設定する~公式チュートリアル 2Dシューティングを改造

今回はUnity公式サイトに掲載されているチュートリアルの2Dシューティングを改造して自機にHPを設定してみました。

「公式チュートリアル 2Dシューティングに挑戦」の制作記事一覧

HPのUIオブジェクト

まずはゲーム画面に自機のヒットポイントバーを作成します。
[Hierarchy]ウィンドウ > [Create]ボタン > UI > Image を選択。名前をImage HealthBar に変更。このように Rect Transform のパラメータを設定しました。

[Scene]ビューで見るとこのようになっています。オブジェクトの右側に Pivot を設定しています。

作成したオブジェクトを複製して名前を Image HealthBar BG に変更。Image HealthBar BG を親にして親子階層を設定します。

Image HealthBar BG を選択して [Inspector]ウィンドウ > Image (Script) > Color を変更しておきます。今回はグレーにしました。自機が攻撃を受けると Image HealthBar のサイズこのように表示されます。

スクリプト HealthBar の作成

UIオブジェクト Image HealthBar の幅サイズを自機のヒットポイントに合わせて変化させる処理を行います。

空オブジェクトを作成してスクリプトを割り当てます。
[Hierarchy]ウィンドウ > [Create]ボタン > Create Empty を選択。して名前を HealthBar に変更。[Project]ウィンドウ > Scripts フォルダに移動して [Create] > C# Script を選択。名前を HealthBar に変更。作成したオブジェクト HealthBar に割り当てておきます。

自機のインスタンスはゲームスタート時のタイトル画面では存在しないので、Start() 関数の中で GameObject.Find() 関数を使って自機のインスタンスを参照しようとするとエラーが発生します。

そこで、スクリプト Manager の ゲーム実行中を判定するフラグ IsPlaying() 関数を参照することにしました。自機がシーンに無くゲームプレイ中の場合に GameObject.Find() 関数を使用してインスタンス Player(Clone) を参照しています。

スクリプトが完成したらオブジェクト HealthBarを選択して [Inspector]ウィンドウ > HealthBar (Script) コンポーネントの変数フィールドにImage HealthBar を割り当てます。

スクリプト Player の変更とヒットポイントの設定

自機のヒットポイント変数を作成。敵弾が当たるとすぐ自機を破壊する処理を変更して敵弾 Power を自機のダメージとして減算する処理を加えました。

スクリプトの変更ができたら プレハブ Player を選択。[Inspector]ウィンドウ > Player (Script) コンポーネント > Health フィールドの値を 400 (Image HealthBar の幅サイズと同じ値)に設定します。

EnemyBullet の設定

プレハブ EnemyBullet の Power 値が初期値の 1 のままなので、50 に変更しました。これで自機が8回被弾するとゲームオーバーになります。

スクリプト Manager の変更

こちらの記事 プレイヤーの移動制限とタイトル作成 ではゲームオーバーテキストオブジェクトを数秒表示してからタイトルテキストオブジェクトを表示する処理をしていました。

しかしこの処理では、ゲームオーバーテキストが表示されている間は、ゲームプレイ中を判定する処理 IsPlaying() 関数の戻り値が true のままで、自機が無いにもかかわらずヒットポイントバーの更新処理も継続されるのでエラーが発生します。

自機が破壊されたらゲームプレイ中を判定する処理 IsPlaying() 関数の戻り値が false になるようにスクリプト Manager を修正します。

テキストオブジェクトの階層変更とコンポーネントの設定

変更したスクリプト Manager に合わせてテキストオブジェクトの階層を変更します。

UIオブジェクト Text GameOver をText Title の子階層に移動します。

オブジェクト Manager を選択。[Inspector]ウィンドウ > Manager (Script) コンポーネントの変数フィールドにテキストコンポーネントを割り当てます。

自機の被弾アニメーション

最後に、自機が被弾した時のアニメーションを設定します。

プレハブ Player を[Hierarchy]ウィンドウにドラッグ&ドロップで配置。メニュー:Window > Animation > Animation を選択。[Animation]ウィンドウが開いたら左上にあるアニメーションファイル選択ボタンをクリックしてCreate New Clip を選択。

ファイル保存ウィンドウが開いたら、Assets > Animations > Player フォルダに移動してファイル名 Damage で保存。

[Animation]ウィンドウ > [Add Property]ボタン > Sprite Renderer > Color の右側の [+] をクリック。

残りの手順は公式チュートリアルの エネミーのHP、弾の攻撃力、アニメーションの追加 と同じです。

[Animator]ウィンドウの設定は、Invincible レイヤーに新しいステート Danger を作成してトランジョンを設定します。

[Project]ウィンドウ > Assets > Animations > Player > Invincible を選択。ファイルを複製して名前をDamage に変更します。

スクリプト Player に自機の被弾アニメーション処理の追加

スクリプト Player の OnTriggerEnter2D() 関数の被弾処理部分にアニメーション処理を追加します。

WebGL

今回の改造内容をWebGLでビルドしてみました。自機が一撃で破壊されなくなったのでゲームの難易度が下がってプレイしやすくなりました。
画像クリックで再生(ファイルサイズ:約7MB)