BakinでHPバー（HPゲージ）を表示
Bakinでゲーム制作をしていると、自分や味方のHPバーだけでなく、敵のHPバー（HPゲージ）も表示したいと思うときが出てくると思います。
ですが、ここら辺は公式Wikiを調べても、実装方法がイマイチ不明瞭な部分で、困っている人は案外多いと思います（私も結構困りました）。
そのため、本記事ではどうすれば、味方や敵のHPバーを表示できるのかについて解説したいと思います。
レイアウトツールを使おう
Bakinで画面表示に関わる設定を何か変えたいと思ったとき、最初に検討すべき方法が「レイアウトツール」を使って実現できるか否かです。
「レイアウトツール」はBakinのマスターメニュー画面にも表示されている、Bakinの中核機能の一つであり、主に画面レイアウト関連を詳細に設定できる機能です。
基本的には「レイアウトツール」を使えば大抵の画面表示に関わる問題はクリアできますが、要望によっては難しいものもありますので、そういった場合はイベントスクリプトで作り込む必要があります。
今回のテーマである、味方や敵のHPバー表示については、一部イベントスクリプトで補助しますが、ほとんどの部分は「レイアウトツール」で実現可能です。
主人公（プレイヤー）のHPバー（HPゲージ）の設定
それでは最初は主人公（プレイヤー）のHPバーの設定をしていきたいと思います。
まずはBakinのマスターメニューから「レイアウトツール」を開いてください。
そうすると、次のようにゲーム内で使用されている様々なデフォルトのレイアウト設定の画面が表示されていると思います。
用途に合わせてここで使用するレイアウトを改変していくのですが、デフォルトレイアウトは修正が出来ない設定になっています。
そのため、変更したいレイアウトがある場合は元のレイアウトをコピー＆ペーストして作成し、そのコピーしたレイアウトの方を修正するといった方法をとる必要があります。
例えばメニューの表示を変えたい場合は、「メニュー」というレイアウトを選択し、「MainMenu」というデフォルトレイアウトをコピー＆ペーストして、修正するといった感じです。
今回のHPバーも、どの画面に表示したいのか次第で修正先は考える必要がありますが、そういった個別のレイアウトとは別で、汎用的に使えるレイアウトも存在します。
それが、「ゲーム内演出」の中にある「イベント用フリーレイアウト」というレイアウトです。
この「イベント用フリーレイアウト」はイベントスクリプトから自由に呼び出せることが出来るため、イベントから呼び出す手間は掛かるものの、レイアウトの中では自由度がとても高いレイアウト形式です。
今回解説する味方と敵のHPバーについても、この「イベント用フリーレイアウト」を使って汎用的に使えるようにしたいと思います。
それでは、「イベント用フリーレイアウト」を選択した状態で、「割り当てるレイアウト」の個所に表示されている「レイアウト追加」のボタンを押してください。
そして、作成された新規レイアウトに好きな名前を付けます。今回は「味方のHPバー表示」とでもしておきます。
次に作成したレイアウトを選択した状態で、その下にある「レイアウトパーツ」の中にある「パーツ」と書かれたボタンを押してください。
すると、追加するレイアウトパーツを選択する画面が表示されますので、「描画コンテナ」を選択して、「OK」を押してください。
そうすると、プレビュー画面の方に追加したレイアウトパーツが表示されるようになりました。
この見えている紫色の部分が描画コンテナと呼ばれるもので、このコンテナ内にHPバー等を追加していきます。
ただし、現在の紫色の表示は今回の用途的に不要なので、右側の列にある「画像」の欄をクリックして、「なし」に変更しておきます。
これで余計な画像の表示は消えました。また、ついでにHPバーを表示する位置を左下にするために、「表示位置X」「表示位置Y」「横サイズ」「縦サイズ」も変更しておきます。
ここら辺の位置やサイズはご自身の好みに合わせて設定すれば良いかと思います。
次にこのコンテナ内に表示するHPバー用の項目を追加するため、「レイアウトパーツ」の「パーツ」ボタンを再度押してください。
表示された「レイアウトパーツ」の中から「スライダーパネル」を選択して、「OK」を押してください。
この「スライダーパネル」というレイアウトパーツこそが、様々な値をゲージ表示してくれる機能となります。
これでレイアウトとしてHPバー用のスライダーパネルが追加されました。
追加されたゲージは分かりやすい名前を付けて、先に作成した描画コンテナ内にドラッグ＆ドロップで移動させてください。
このスライダーパネルをHPバーとして使うためには、右列にある「スライダーに反映するパラメータ」の項目にプレイヤーのHPを設定する必要があります。
「スライダーに反映するパラメータ」の項目をクリックすると、次のようにどの値をゲージ表示するか選択できますので、partyhp[x]を押してください。
すると、上部の「パラメータ」欄に「partyhp[0]」と表示されたことが分かります。
「partyhp[0]」というのはパーティーメンバーの0番目である、主人公（プレイヤー）のHPという意味を持っています。
イベントから呼び出すときは主人公（プレイヤー）はパーティーの1番目として扱われるのですが、このレイアウトツールから呼び出すときは0番目ということを覚えておきましょう（揃えろよと言いたくなるかもしれませんが）。
また、実際にはプレイヤーのHPがそのまま値となっている訳ではなく、恐らくは100分率（%で表示された割合）が入っているものと思いますが、今回は意識する必要はありません。
とりあえず、「partyhp[0]」とパラメータに表示されていることを確認したら、「OK」をクリックしてください。
これでスライダーパネルが主人公のHPを表示するように設定されました。
ただ、デフォルトのままだと小さすぎるので「オフセットX」「オフセットY」「横サイズ」「縦サイズ」等を調整して、自分好みの大きさや位置に変更しましょう。
また、スライダーパネル（HPバー）の色も変更したい場合は、右列の「スライダー画像色」の項目をクリックすれば、自由に色を変えることが出来ます。
他にも右列の下の方にある「値でスライダーの色を変更」という項目も非常に便利です。
HPが多いときは緑色、HPが少し減ってきた場合は黄色、HPが少ない時は赤色、のような感じでHPバーの色を変更したいときは、「値でスライダーの色を変更」で調整できるのです。
次の画像のように「色の変更割合開始」を「70」で画像色を黄色にすることで、HPが残り7割を切ったら、緑色から黄色になるように設定できます。
また、「値でスライダーの色を変更2」で同じように割合を「30」で色を赤色にすれば、HPが残り3割を切ったら、HPバーが赤色になる動きを表現できます。
これで一旦HPバーのレイアウト設定は完了です。
レイアウトの左側に余っている方のスペースにプレイヤーの画像等を追加すると、ユーザからも更に分かりやすくなると思いますので、慣れたらそういったものも追加していってください。
次に今回設定したHPバーを実際の画面に表示する方法について解説します。
HPバーを画面に表示する
先ほど作成した「イベント用フリーレイアウト」のHPバーを画面に表示するためには、イベントとして呼び出す必要があります。
マスターメニューの「コモンイベント」もしくは、個別のキャストイベント等から、対象のイベントを呼び出すということです。
今回は「コモンイベント」から呼び出すようにしますので、マスターメニューから「コモンイベント」を開いてください。
そして、イベントを追加するための「＋」ボタンを押して、「画面演出」から「イベント用フリーレイアウトの表示」を選択して下さい。
尚、一番上にある「イベントの開始」については「自動的に開始（並列して繰り返し実行）」にしておきます。
使用するレイアウトの設定に今回作成したHPバー表示用のレイアウトを選択して下さい。
その下の表示方法は「追加して表示」を選んでください。「表示」だと他に合わせて表示したいレイアウトがあった際に丸ごと上書きされてしまうためです。
ちなみにレイアウトを非表示にしたい際は「選択したレイアウトを非表示」を選択すれば良いです。
これでレイアウトは表示されるようになりましたが、今回はHPバーが減った際の動きも確認したいので、時間経過でプレイヤーのHPを減らす処理もコモンイベントに追加します。
次のようにパーティーの1番目のHPを1ずつ減らす処理を入れます。
レイアウトのところで解説したように、イベントではパーティーの1番目が主人公（プレイヤー）になりますので、間違えないようにしましょう。
最後に「指定した時間を待つ」で少しのウェイトを入れておきます。
これを入れないと爆速でHPが減ってしまって確認が難しいためです。合わせてプレイヤーのHPも少し増やしておくと確認しやすいと思います。
これでゲームを動かしてみました。
そうすると、次の画像の推移のようにHPバーが徐々に減っていき、緑色から黄色、赤色と変化していき、最後はHPが0になると同時にゲームオーバーとなります。
このようにレイアウトツールを使うことで主人公（プレイヤー）のHPバーを表示させることが出来ますし、応用すればMPバーや主人公の画像も併せて表示することも簡単です。
主人公以外の味方のHPバー等についても同様の方法で、レイアウトやイベントの数字部分（0や1だった部分）を変更すれば表示することも出来ますので、色々試してみて下さい。
敵のHPバー（HPゲージ）を表示する
主人公側のHPバーの表示方法はこれまでの解説で分かったと思いますが、敵側のHPバーの表示は表示項目に存在しないため、同じ方法での実装は出来ません。
ですが、レイアウトツールのスライダーパネルは「変数」に対応しているため、敵側のHP変化を「変数」で管理することで、HPバーを実現することが出来ます。
具体的に言うと、対象の敵となる「キャスト」の「キャストイベント」の中で、「現在HP（%）」を「通常変数」に設定し、その「通常変数」をスライダーパネルで表示するという方法です。
難しいように聞こえるかもしれませんが、実際には大して難しい作業はありませんので、順に解説していきます。
先ずは今回の処理を組み込む敵側のキャストを用意します。今回はプロジェクト作成時に「ノーマル」のアセット量で用意されている、「スライム」のキャストを利用します。
マスターメニューの「データベース」から該当キャストを選択し、「キャストイベント設定」をクリックしてください。
このキャストイベントの中で、「通常変数」として「現在HP（%）」を作成し、「イベントの合計ステータス」の中で「現在のHP（%）」を設定してください。
変数の種類として「通常」や「ローカル」等の種類がありますが、スライダーパネルは「ローカル」の変数には対応できないので、「通常」での作成をお願いします。
また、「イベントの開始」は常に更新し続けたいので、「自動的に開始（並列して繰り返し実行）」を選択しておいてください。
キャストイベントの設定が終わったら、「レイアウトツール」の方で主人公のHPバーを表示した時と同様に、新規のレイアウトを作成してスライダーパネルを設置します。
色や大きさなどは自由に設定してください。今回は右下に紫色のHPバーを表示するようにしておきます。
それらの調整が一通り終わったら、「スライダーに反映するパラメータ」の項目を押してください。
今回は「スライダーに反映するパラメータ」の項目に設定する値として、キャストイベントで設定した変数を設定します。
次の画像のように「指定した変数の中身」を選択すれば、どの変数を設定するのか選べますので、「現在HP（%）」を設定してください。
そうすると、「パラメータ」にも選択した内容が反映されますので、問題なければ「OK」をクリックしてください。
あとはレイアウトの右側にある「数値の上限」の項目を「100」に変更してください。
今回は敵の現在HPの100分率（%表示した値）を変数に設定しているので、数値の上限を100にしておかないとゲージの上限と値の整合性が取れないためです（なぜプレイヤーの方は設定不要なのかは分かりません）。
最後に今回設定したレイアウトの動作を確認するために、スライムのキャストイベントにプレイヤーの時と同様の処理を入れて確認します。
実際にゲームを動かすと、プレイヤーのHPと敵のHPが画面表示されていることが分かります。
そのまま表示すると味気ないので、レイアウトツールに追加でプレイヤーの画像と敵の名前もテキストパネルで併せて表示するようにしました。
今回のHPバーの実装方法では複数の敵を管理するのは難しいのですが、そこもやり方次第で対応は可能です。
例えば、今回作った変数を5つくらい事前に作成しておき、攻撃の当たった順に優先して対象を上書きすることで、同時に5体までの敵キャラクターのHPを表示するといった応用が出来ます。
今回のは実装方法の一例ですので、応用や発展はいくらでも可能だと思いますので、後はそれぞれの開発者が工夫して自分の作りたいゲームのレイアウトを実現してもらえればと思います。
まとめ
今回はプレイヤーや敵キャラクターのHPバーを画面上に表示する方法について解説しました。
スライダーパネルはゲージを表示する際には非常に役立つ機能ですので、今後他のゲージ類を新設する際等に今回の方法は活用できると思います（例えばスタミナゲージや必殺ゲージなんかも）。
Bakinはこのように便利な機能が結構揃っているのですが、公式を見てもイマイチ実装方法が分からなかったりすることも多いので、私の方で記事にしておきました。
閲覧いただいている方の何らかの参考になれば幸いです。
今後もBakinでゲームを作成する方法は解説していきたいと思いますので、興味があれば閲覧ください。
コメント