今回は3Dアクションゲームの作り方講座の第11回です。前回はパーティクルシステムを用いたエフェクトとプレイヤーの消滅・コンティニュー処理を作成しました。
前回の記事：
第11回目はプレイヤーと敵のHPゲージ（HPバー）を表示し、視覚的にアクションゲームの状況をわかりやすくしていきます。
Unityスライダーを用いたHPゲージの実装
まずはHPゲージを作成してプレハブにしていきましょう。
スライダー作成
まずプレイヤーオブジェクトに空オブジェクトを作成して「HPBar」とします。この下にバーを作成していきます。
まず、HPバーの子に「UI/Canvas」を作成します。このキャンバスの値を調整しておきます。
先に「Canvas」オブジェクトに付与されている「Canvas」コンポーネントの「RenderMode」を「WorldSpace」に設定します。すると「RectTransform」がだいぶ大きい値になっていると思うので下記のように調整します。
|
1 2 |
Canvas コンポーネント RenderMode => WorldSpace |
|
1 2 3 4 5 6 |
RectTransform PosX = 0, PosY = 0, PosZ = 0 Width = 100, Hight = 100 Pivot ( 0.5, 0.5 ) Rotation( 0, 180, 0 ) Scale( 0.01, 0.01, 0.01 ) |
次に、「Canvas」の子に「UI/Slider」を作成しまずは「RectTransform」を下記のように調整します。
|
1 2 3 4 5 6 |
RectTransform PosX = 0, PosY = 0, PosZ = 0 Width = 100, Hight = 20 Pivot ( 0.5, 0.5 ) Rotation( 0, 0, 0 ) Scale( 1, 1, 1 ) |
ここで一旦「HPBar」（親の空オブジェクト）の位置を少し上に挙げてプレイヤーの上に来るように調整します。（Y = 1.2）あたり。
ここまで行うと画像のようになっています。
次にスライダーの値を調整していきます。本来スライダーは「Handle」と言われる丸い部分をクリックして動かすUIですがこれをHPバーにするためにまずはハンドルを消していきます。
現在スライダーは下記のような構造になっています。
|
1 2 3 4 5 6 |
Slider > Background > Fill Area >> Fill > Handle Slide Area >> Handle |
この一番下の「Handle」を消してしまいましょう。するとスライダーの丸部分が消えるかと思います。この状態だと端の部分に中途半端な空白ができてしまうのでスライダーの各パーツの「RectTransform」の値を変更していきます。
変更するのは「Fill Area」「Fill」「Handle Slide Area」でこれらすべての「RectTransform」の値をすべて０にします。
|
1 2 3 |
RectTransform Left = 0, Top = 0, PosZ = 0 Right = 0, Bottom = 0 |
すると、真っ白な状態になると思います。ここで一旦色を変えていきます。
「Background」を選択しInspectorの「Image」の色を黒に、「Fill」を選択しInspectorの「Image」の色を緑にします。
これで緑のバーになります。ここで一旦バーを動かしてみます。
「Slider」オブジェクトを選択し、Inspectorの「Slider」コンポーネントの下の方にある「Value」という値のスライダーを左右に動かしてみましょう。するとGameビューのスライダーも動きます。
下記のようになっているかと思います。
これでプレハブにするHPバーの完成ですので、Hierarchyの「HPBar」をProjectウインドウの「Assets/AppMain/Prefab」にドラック＆ドロップしてプレハブ化しましょう。
プレイヤーにはすでにありますので、敵のプレハブを開いて「HPBar」を追加しておきましょう。
敵のHPバーは、緑になっている「Image」を赤くしておくとわかりやすいかと思います。
ビルボードシステムを開発しよう
HPバーを作成しましたが、プレイヤーは移動するのでこのままだと横を向いたりすると見にくくなってしまいます。
そのためHPバーを常にカメラに向けるようにしていきます。このような処理のことを「ビルボード」といい、簡単なものですが３Dゲームではよく使われるので覚えておきましょう。
ここでは新しく「Billboard」というクラスを作成しておきビルボードしたいUIなどがあったらそのオブジェクトに付与して使うようにしていきます。
ソースコード全文は以下になります。
次回の記事 :
コメント