Unreal Engine のコンパスバー：AI でコンパス HUD を作る

Unreal Engine のコンパスバーは、3 つの小さな要素でできています。カメラが向いている方向を表す角度、それぞれが本来の角度の位置に置かれた文字の列、そして中央付近の文字だけを見せる表示窓です。カメラを回すと、文字の列がスライドします。いちばん簡単な作り方は、この HUD 要素全体を 1 回の依頼で AI に作らせることです。

このチュートリアルでは、Ultimate Engine CoPilot が、画面上部に金色の N、E、S、W を並べたコンパスバーを作ります。実際に使ったプロンプト、AI が 4 方向すべてをどうテストしたか、そしてコンパスバーの仕組みのやさしい解説をお届けします。

完成したコンパスの動き

画面の上部にある細いバーが、いま向いている方向を示します。カメラを回すと、ゲームでよく見るコンパスのように、文字が横にスライドします。金色の N に続いて E、S、W が現れ、マーカーの下の小さな数字が、方位を度数で表示します。

Blizzard のボックスの下にあり、カメラに合わせて動くコンパスバー。

プロンプト

これをコピーして、表示する角度の範囲や色を変えながら、AI が何を作るか試してみてください。

Make a compass bar. Create WBP_CompassBar in /Game/Series/EP37_Compass, a thin horizontal bar at the very top of the screen, 600 pixels wide and centred, below the existing Blizzard box. It shows the direction the player's camera is facing as letters that slide sideways as the camera turns: N, NE, E, SE, S, SW, W, NW, with a small white triangle marker in the middle. The letters for the main directions N, E, S and W are larger and gold, the in-between ones smaller and white. Also show the heading in degrees as a number under the marker, for example 90. Create BP_CompassController in the same folder, an actor that I place once, that adds the widget to the screen and updates it every frame from the player camera's yaw. Treat world +X as North and world +Y as East. Keep the bar width and the number of visible degrees as variables. Place the actor near the player start. Then play test it: turn the camera to face +X and check the heading reads 0 with N in the middle, turn it to +Y and check 90 with E, turn it to -X and check 180 with S, turn it to -Y and check 270 with W, and fix anything that does not work.

重要なのは、セットアップの最後の部分にある「Treat world +X as North and world +Y as East」（ワールドの +X を北、+Y を東として扱う）という一文です。Unreal には北という概念はなく、軸があるだけです。どの軸が北かを伝えないと、AI がどれかを選ばなければならず、方向がずれたコンパスになってしまうかもしれません。必ず指定しましょう。

AI はどう作るのか

AI はまずプロジェクトを読み込みます。HUD の上部にある Blizzard のボックスを見つけ、その下端の位置を測って、バーをすぐ下に置けるようにします。するとアセットが現れます。コンパスバーのウィジェットと、コントローラーの Blueprint です。

コントローラーの処理は次のとおりです。Begin Play でウィジェットを追加し、Tick でカメラのヨーを読み取って文字を動かします。文字はバーの両端に近づくとフェードアウトするので、突然現れたり消えたりしません。

コントローラーのグラフ：ウィジェットを追加し、その後は Tick ごとにカメラの向きから更新します。

プレイテスト

AI はまずカメラを回す必要があるので、その方法を探します。そのうえで、4 つの方向を確認します。

• +X を向く：方位は 0 で、中央に N が来ます。
• +Y を向く：90 と E。
• -X を向く：180 と S。
• -Y を向く：270 と W。

数字はコントローラーから、文字はスクリーンショットから読み取り、N の両側に NW と NE が並ぶように、隣の文字も正しい位置にあります。4 つとも合格です。

さらに、スクリーンショットから小さな問題が見つかりました。マーカーの三角形が、中央の文字の上端に触れていたのです。そこで AI はバーの高さを 40 から 46 ピクセルへ少し高くし、文字を下へ移動しました。

レポート

作成した内容と、知っておくべき点。

バーの幅（600）と表示される角度の範囲（180）は、配置したアクター上の変数です。レポートは、いくつかの点についても正直に書いています。

• 最後の変更であるバーの高さの調整は、別のプレイセッションではテストされていません。レイアウトはコンパイルできますが、それ以上の実行は行っていません。
• バーは、パネルからテキストがはみ出している Blizzard のボックスを避けるため、固定の高さ（y=150）に置かれています。このオフセットは HUD と連動していないので、ボックスを動かしても、コンパスは動きません。
• レベルは未保存です。
• メインメニューのせいで、スクリーンショットは暗くなっていました。動画で、ぐるりと一周回る実際のプレイも見せているのは、そのためです。

コンパスバーのしくみをやさしく解説

コントローラーは毎フレーム、カメラのヨーを取り出し、0 から 360 の方位に変換します。0 は +X で、これを北と決めました。各文字には角度があり、N は 0、E は 90、というように続きます。

コントローラーは文字ごとに、方位からどれだけ離れているかを計算し、それをバー上のピクセル位置に変換します。表示される角度の範囲の外にある文字は隠され、両端に近い文字はフェードアウトします。バーの幅と表示される角度の範囲は変数なので、2 つの数値を変えるだけで、幅の広いコンパスにも、狭いコンパスにもできます。

拡張のアイデア

• コンパス上のマーカー。たとえば、バーに沿ってスライドするクエストマーカー。Unreal Engine 目標マーカー をご覧ください。
• マーカーの下に表示する、マーカーまでの距離（メートル）。
• カメラを動かしていないときにフェードアウトするバー。

コンパスプロンプトの 4 つのコツ

1. どのワールド軸が北かを書く。
2. バーの大きさと、置く場所を書く。
3. 大きい文字と小さい文字を指定する。
4. 4 方向すべてをテストするよう AI に頼む。

よくある質問

Unreal Engine 5 でコンパスバーを作るにはどうすればよいですか？

カメラのヨーを毎フレーム 0 から 360 の方位として読み取り、各文字の角度と方位の差に応じて文字の列を配置し、表示窓の外にある文字は隠します。

Unreal Engine では、どの方向が北ですか？

Unreal に北はなく、軸があるだけです。1 つ選んで、依頼文に書いてください。この例では +X が北、+Y が東です。

AI はなぜバーを高くしたのですか？

スクリーンショットで、マーカーの三角形が中央の文字の上端に触れていました。AI はバーを 40 から 46 ピクセルに高くし、文字を下へ移動しました。

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

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

このシリーズの他の作例： Unreal Engine 目標マーカー、Unreal Engine ファストトラベル、Unreal Engine ズーム。