「HPバー」をつくろう
さて、1回当たれば即アウトは厳しいので、HPの値を増やしましょう。そうすると、HPがいまいくつ残っているのか？がわかる必要があります、なのでHPバーを作りましょう。
ACTION GAME MAKERでは、SimpleGauge、ImageGaugeというノードを使ってゲージを表示することができます、今回はSimpleGaugeを使いましょう。
しかし、カメラが移動するようになっているのでプレイヤーと同じレイヤーに配置すると、HPバーがおいていかれてしまいます、HPバーのような常に表示をしたいものは、「UI」レイヤーを使います。
「UI」レイヤーについて
以前の説明を覚えているでしょうか？ACTION GAME MAKERのレイヤーは以下のような構成になっており、UIレイヤーと画面効果レイヤーは、「カメラに影響されない特殊なレイヤー」です。つまり、このレイヤーに配置されたノードは常に表示されますので、HPバーを配置するにはピッタリです。画面効果レイヤーは「画面効果」アクションに使う特殊なレイヤーなので、UIレイヤーに配置しましょう。
プレイヤーの「体力」「最大体力」の値を10にしよう。
1. プレイヤーのBaseSettingsノードを選択します。
2. インスペクターで「体力」「最大体力」の値を1から10に変更しましょう。
「SimpleGauge」ノードを追加・設定しよう。
1. シーンタブをstage1に切り替え、エディター画面をScriptから2Dに戻しましょう。
2. UIノードを選択します。
3. シーンウィンドウ左上の＋（子ノードを追加）ボタンをクリックします。
4. SimpleGaugeを選択して「作成」します。
5. まずは位置を調整します。現在は以下のように潰れた状態になっているはずです。
6. オレンジの点をドラッグして画像くらいのサイズにまで拡大してください。
7. UIレイヤーの表示範囲は、以下の細い青い線に囲まれた範囲です。範囲内の左上のあたりにゲージを移動しましょう。
8. 続いてこのゲージがプレイヤーのHPを表示するようにします。インスペクターウィンドウの変数タイプを「指定のオブジェクト」にしてください。
9. 新しく出現する「対象オブジェクトのパスを指定」の
マークをクリックしてください。
10. player.tscnを選択して「開く」をします。
11. 「変数名」欄はデフォルトでhpが入るはずなので変更不要です。この欄は「現在値」として使用する変数を指定する欄です。
12. 続いて、「最大値として変数を使用」のチェックをオンにしてください。
13. 9~10の手順を繰り返し、player.tscnを指定してください。
14. 最大値とする変数はobject_idというものが入っているはずなので、クリックしてmax_hpに変更します、これでゲージの最大値として最大HPが指定されました。
「HPバー」をテストしよう
テストプレイボタンを押してテストしてみましょう。うまく設定できていれば、敵にあたればダメージリアクションをしてHPバーが現象するはずです。
うまくいかないときのチェックリスト
ゲージが見えない：正しくSimpleGaugeがUIレイヤーの子になっているか、青い線の範囲内に配置されているか確認しましょう。
HPが最初から少ない: PlayerのBaseSettingsの「体力」の値が10に直してあるか確認しましょう。
HPが最大なのに一撃で0になる：BaseSettingsの「最大体力」の値が10になっているか、SimpleGaugeの「最大値とする変数」が正しく指定できているか確認しましょう。