Language:
Page Info
Engine Version:

2.ヘルス、エネルギー、弾薬を表示する

ビジュアル:ヘルス、エネルギー、弾薬

ここでは、HUD のビジュアル面のセットアップを開始します。

  1. HUD Widget ブループリントを開き、ウィジェット ブループリント エディタ にアクセスします。

    Step2_6.png

    ウィジェット ブループリント エディタ 内で HUD の視覚的レイアウトとスクリプト化された機能を与えることができます。

    ウィジェット ブループリン トエディタに関する様々な側面の詳細は、Widget ブループリント をご覧ください。

  2. [パレット] ウィンドウの[パネル]Horizontal Box[Hierarchy(階層)] ウィンドウの [キャンバスパネル] にドラッグします。

    Step2_7.png

    Panel ウィジェットは他のウィジェットのコンテナのようなものであり、その中にあるウィジェットに追加の機能を与えます。

  3. [パネル] で 2 つの Vertical BoxHorizontal Box にドラッグします。

    Step2_8.png

  4. Common で、2 つの テキスト ウィジェットを 1 つめの Vertical Box に、2 つの Progress Bars を 2 つめの Vertical Box にドラッグします。

    Step2_9.png

  5. Horizontal Box を選択し、グラフ内でボックスをサイズ調整して配置し、ウィンドウの左上隅に配置します。

    Step2_10.png

    進捗バーは非常に小さく見えますが、次で修正するので気にしないでください。

  6. Progress Bars を両方とも選択し、[詳細] パネルで、両方とも SizeFill に設定します。

    Step2_11.png

  7. Progress Bars が含まれている Vertical Box を選択し、それも Fill に設定します。

    Step2_12.png

  8. 再度 Horizontal Box を選択して、バーがテキストとぴったりと合うようにサイズ調整します。

    Step2_13.png

  9. [Hierarchy] ウィンドウの一番上の Text ウィジェットを選択します。次に、 [詳細] パネルの ContentHealth : と入力します。

    Step2_14.png

    他の Text ウィジェットに対しても同じことを行いますが、グラフが以下の画面のようになるように Energy という名前を付けてください。

    Step2_15.png

  10. ヘルスの隣の Progress Bar を選択し、[詳細] パネルで、Fill Color and Opacity を緑色に設定します。

    UMGColorPicker1.jpg

    色を割り当てたときに進捗バーの色が変わらないことがあるかもしれません。これは、バーを満たすパーセント値が 0.0 に設定されているからです (別の色でテストするためにこれを変更することができます。後でこれをキャラクターのヘルス値にリンクします)。

  11. Energy バーの Fill Color も設定してください (ここではオレンジ色を選択しました)。

  12. Ammo (弾薬) を表示するために上記の方法を使用して、 Hierarchy にウィジェットを追加して以下のようなレイアウトになるようにします。

    Step2_16.png

  13. 弾薬情報を含む Horizontal Box が選択された状態で、サイズ調整し、右上隅に配置します。

    Step2_17.png

  14. Horizontal Box を選択したままの状態で、[詳細] パネルで [Anchors] をクリックして右上の Anchor を選択します。

    Step2_18.png

    これで、メダル形状のアンカーが画面右上隅に移動します。

    Step2_19.png

    ウィジェットを 固定する と、画面サイズとは関係なく、メダル形状のアンカーの位置に相対的に配置された位置にウィジェットが表示されることを示します。つまり、画面サイズが変わると、ウィジェットをメダル形状のアンカー位置から同じ距離だけ離して移動します (この例では、画面右上隅から同じ距離だけ離します)。

    グラフ内で プレビューサイズ オプションをクリックして変更することで、異なる画面サイズでテストすることができます。

スクリプト:ヘルス、エネルギー、弾薬

視覚的レイアウトが終わったので、HUD エレメントの機能を提供するためのフックを追加することができます。

  1. [Widget Blueprint Editor] ウィンドウの右上隅にある [グラフ] ボタンをクリックします。

    Step2_20.png

  2. グラフ 内の Event Construct右クリック し、Get Player Character ノードを追加します。

  3. Return Value ピンを引き出して、Cast to FirstPersonCharacter を選択します。

    Step2_21.png

    プレイヤー キャラクターが使用している Character ブループリントが実際に First Person Character ブループリントであるかをチェックしています。

  4. As First Person Character ピンからドラッグして、 Promote to Variable (変数に昇格) (My Character と名前を付けます) を選択し、以下のように接続します。

    Step2_22.png

    これにより FirstPersonCharacter ブループリント内の変数にアクセスすることができます。

  5. ツールバーの [Compile (コンパイル)] をクリックし、スクリプトをコンパイルします。

  6. Designer タブに戻り、Health の隣の Progress Bar を選択します。

  7. [詳細] パネルの Progress で、Percent の隣にある Bind オプションをクリックします。次に MyCharacter から Health を使用するように設定します。

    HealthProgress.jpg

    これは、進捗バーの値を First Person Character ブループリント内の Health 変数にバインドします。これで Character ブループリントでヘルス値が変更するたびに HUD でも自動的に更新されるようになります。バインド後に進捗バーが変化しないことがあるかもしれません。これは、 Event Construct で起こるようにしたからです (または HUD が構築される場合、これはゲーム開始時に起こります)。

  8. エネルギーの隣にある Progress Bar を選択し、上記のプロセスを繰り返し、 MyCharacter から PercentEnergy にバインドします。

    EnergyProgress.jpg

  9. Ammo テキストの後に 25 を選択します。次に、 Text[詳細] パネルで BindCreate Binding をクリックします。

    CreateBinding.jpg

    以前に Sub-Object Properties を使用して同じタイプのプロパティをバインドしたように、独自のカスタム バインディングを作成することもできます。ここでは、First Person Character ブループリントから Text プロパティを Integer プロパティにバインドし、現在の Ammmo を表示します。

  10. 作成され、自動的に開いた関数内で、 Ctrl を押したまま、MyCharacter 変数をグラフにドラッグします。

    Step2_27.png

  11. MyCharacter のピンを引き出してget Ammo を選択します。

  12. Ammo ピンを、Return NodeReturn Value に接続します。

    Step2_28.png

    接続時に To Text 変換ノードが自動的に作成されます。

  13. 他の 25 のテキストに対しても上記のプロセスを繰り返し、"Max Ammo" テキストのバインディングを作成します。

    Step2_29.png

    Max Ammo が同じ状態を保つならこれを行う必要はおそらくないでしょうが、変更することが可能です。

  14. Compile をクリックし、Save をクリックします。次に、Play ボタンをクリックしてエディタで再生します。

    ヘルス、エネルギー、弾薬の値が HUD に表示されるようになり、Character ブループリントからの現在の値を反映します。スペース を押すと、キャラクターがジャンプし、エネルギーが消耗します。左マウスボタン を押すと、武器が発砲し、弾薬が減ります。F を押すとヘルスを失う原因になります (これは後でダメージ システムに接続可能です)。 次のセクションでは、セットアップしたゲームに読み込むために使用できるメインメニューを作成します。