Unreal Engine のアイテムバー：AI でクイック選択ホットバーを作る

Unreal Engine のアイテムバーは、3 つの小さな要素でできています。それぞれ見た目を持つスロットの列、選択中のスロットを表す 1 つの数字、そして各スロットに割り当てられた、その数字を切り替えるキーです。枠線、大きさ、暗さ、名前など、目に見えるものはすべて、その 1 つの数字に反応しているだけです。いちばん簡単な作り方は、ホットバー全体を 1 回の依頼で AI に作らせることです。

このチュートリアルでは、Ultimate Engine CoPilot が、1、2、3 のキーで選べる 3 スロットのクイック選択バーを作ります。実際に使ったプロンプト、AI がすべてのキーをどうテストしたか、そしてアイテムバーの仕組みのやさしい解説をお届けします。

完成したバーの動き

画面の左下に、赤い宝石、青い宝石、緑の宝石の 3 つの小さなスロットがあります。最初は 1 つ目が選択されていて、金色の枠がつき、ほかより少し大きく、上の名前は「Fire」です。2 を押すと、枠が青い宝石に移り、名前は「Frost」になります。3 を押すと、緑の宝石で「Heal」です。そして 1 を押すと、Fire に戻ります。

緑の Heal スロットを選択したバー：金色の枠、フルサイズ、ほかは暗く表示。

プロンプト

これをコピーして、色を変えたり 4 つ目のスロットを加えたりしながら、AI が何を作るか試してみてください。

Make a quick-select item bar. Create WBP_ItemBar in /Game/Series/EP38_ItemBar, a row of three square slots at the bottom left of the screen, above the existing ability bar and clear of it, each 72 pixels wide with the key number 1, 2 or 3 in the corner and a coloured gem in the middle: red for Fire, blue for Frost and green for Heal. The selected slot has a gold border and is scaled up to 115 percent, the other two are dimmed to 55 percent. Above the bar, show the name of the selected item, Fire, Frost or Heal. Create BP_ItemBarController in the same folder, an actor that I place once, that adds the widget on BeginPlay and listens for the keys 1, 2 and 3 to select the matching slot. The change animates over 0.15 seconds. Slot 1 is selected at the start. Keep the slot size and the animation time as variables. Place the actor near the player start. Then play test it: check slot 1 is selected at the start, press 2 and check slot 2 is selected and the name reads Frost, press 3 and check Heal, press 1 and check Fire, and fix anything that does not work.

2 つの数値に注目してください。115 パーセントと 55 パーセントです。「選択中のスロットを強調して」としか書かなければ、AI が適当に何かを選びます。数値を指定すれば、最初から望みどおりの見た目になります。もう 1 つ、細かい点があります。「above the existing ability bar and clear of it」（既存のアビリティバーの上で、重ならないように）という指定です。画面にすでに UI がある場合は、新しい UI をどこに置くかを必ず伝えましょう。

AI はどう作るのか

AI はまずプロジェクトと HUD を読み込み、アビリティバーがどこにあるかを確認します。するとアセットが現れます。アイテムバーのウィジェット、コントローラーの Blueprint、3 つの Enhanced Input アクション（IA_ItemSlot1、2、3）、そして入力マッピングです。アクターには生のキーイベントが使えないためです。

ウィジェットには小さな部品がたくさんあります。3 つのスロット、3 つの宝石、キーの番号、名前のテキスト、そして 3 つの選択アニメーションです。入力アクションはキーを消費しない設定になっているので、1、2、3 に割り当てられたほかの機能も、そのまま動きます。これは気の利いた配慮です。

コントローラーのグラフ：各キーが、自分の番号を渡して Select Slot を呼び出します。

プレイテスト

最初の実行で合格します。

• 開始時、コントローラーはスロット 1 を報告し、名前は Fire です。スクリーンショットでは、スロット 1 が金色の枠で大きくなり、ほかの 2 つは暗くなっています。
• 2 を押す：スロット 2、Frost になり、枠が移動しました。
• 3 を押す：スロット 3、Heal。
• 1 を押す：スロット 1、再び Fire。

4 項目のチェックがすべて通り、修正するところはありませんでした。

レポート

アセットは全部で 6 つ。計測しなかった項目の注意点も載っています。

レポートには、作成した内容が全部で 6 つのアセットとして並んでいます。ウィジェット、コントローラー、3 つの入力アクション、そしてマッピングです。計測しなかった項目についても、正直に書かれています。

• 0.15 秒のアニメーションは、プレイ中に時間を計っていません。各チェックはキーを押してから約 0.6 秒後に読み取ったため、確認できたのは最終状態だけです。
• テストのスクリーンショットでは、メインメニューがバーを覆っていたため、くすんで見えます。
• SlotSize を変えても、宝石とレイアウトのボックスは連動しません。スロットはサイズが変わりますが、宝石は 26 ピクセルのままで、バーのコンテナーも 320 × 130 に固定されているため、スロットをかなり大きくするとはみ出します。
• レベルは未保存です。

アイテムバーのしくみをやさしく解説

ウィジェットは、選択中のインデックスという 1 つの数字を保持します。コントローラーが 2 のキーを受け取ると、ウィジェットに「スロット 2 を選択して」と伝えます。ウィジェットはその数字を保存します。そのあと、スロットごとに 1 つだけ質問をします。自分が選択中のスロットか、です。そうなら、選択アニメーションを再生します。金色の枠、115 パーセントへの拡大、フル輝度です。そうでなければ、逆再生して 55 パーセントまで暗くします。名前のテキストはインデックスで選ばれます。スロットが 3 つで、名前も 3 つです。

アニメーションの時間とスロットのサイズは変数なので、2 つの数値を変えるだけで、きびきび動くバーにも、ゆっくり動くバーにもできます。

拡張のアイデア

• マウスホイールでスロットを切り替える。
• 実際に効果のあるアイテム。Fire は炎を投げ、Frost は敵を遅くし、Heal は体力を回復します。
• 各スロットに重ねるクールダウンの回転表示と、所持数のカウンター。アイテムの数え方は Unreal Engine インベントリシステム で紹介しています。

アイテムバープロンプトの 4 つのコツ

1. 選択時と暗くしたときの見た目を数値で指定する。
2. 既存の UI に対して、バーをどこに置くかを書く。
3. 開始時にどのスロットを選択しておくかを書く。
4. すべてのキーを、順番を入れ替えながらテストするよう AI に頼む。

よくある質問

Unreal Engine 5 でホットバーを作るにはどうすればよいですか？

ウィジェットに選択中のインデックスを 1 つ持たせ、スロットごとにそれを設定するキーを用意し、各スロットが自分が選択中かどうかにアニメーションで反応するようにします。

ここで AI が Enhanced Input アクションを使うのはなぜですか？

ツール経由では、アクターに使える生のキーイベントがないため、キーごとに入力アクションを 1 つと、マッピングを追加しました。入力を消費しない設定なので、それらのキーに割り当てられたほかの機能も動作します。

スロットのサイズは変更できますか？

SlotSize は変数ですが、宝石とコンテナーはそれに合わせて拡大されません。スロットをかなり大きくすると固定のコンテナーからはみ出すので、レイアウトも調整してください。

プロジェクトで試してみましょう

Ultimate Engine CoPilot で何が作れるかは 製品ページ でご覧いただけます。入手は Fab からどうぞ。AI Blueprint ジェネレーター のしくみもご覧ください。

このシリーズの他の作例： Unreal Engine インベントリシステム、Unreal Engine 遠距離武器、Unreal Engine メインメニュー。