UE5でアクションガイドを実装する方法
こんにちは！ かにまろです。
UnrealEngine5でアクションガイドを実装してみましたので、やり方をご共有します！
⚠️実装のやり方を変えたので再投稿しました（2024/09/11）
注意事項
❗筆者はプログラミング初心者で、ゲームは開発中のものです
❗バグや不具合を含んでいる可能性があります
❗間違っている、非効率な実装方法である可能性があります
この記事を読んでほしい人
UnrealEngine初心者
画像つきで、初めてUnrealEngineを触る人にもわかりやすいように書いています。また、私がわかる範囲でではありますが、なぜそうしているのかも併記しています。
完成イメージ
全て完了したときの挙動イメージは動画の通りです！
PlayerがNPCに近づいたら、ボタン画像とアクション名が画面に表示されます。
実装を始める前に
アクションガイドの実装に取り組む前に、UnrealEngine5を導入してください。筆者が使っているバージョンは、UnrealEngine5.1.1です。プロジェクトブラウザから、「ゲーム＞サードパーソン」でプロジェクトを作ってください。
今回実装するもの
NPC：Playerが近づいたらアクションガイドを表示する。プレイヤーが離れたらアクションガイドを非表示にする。
アクションガイド：呼び出されたらUIを表示する。
NPCを作る
ブループリントクラスをつくる
まずは、NPCを作ります。
ゲーム内にあるものは概ねブループリントで制御しているので、NPCもNPC用のブループリントを作っていきます。
デフォルトで画面左下にある、コンテンツブラウザの「追加」ボタンを押して、「ブループリントクラス」を選びます。
ブループリントクラスを選ぶと画面が表示されます。
キャラクターっぽく動くものにしたいので「Character」を選択します。
できたブループリントに、好きな名前をつけてください。
ここでは、BP_NPCと命名して進めていきます。
メッシュを選ぶ
BP_NPCをダブルクリックして、中身を開いてください。
まずは、画面上部のビューポートで、NPCの見た目を作っていきます。
画面左のコンポーネントからBP_NPC（Self）を選択すると、画面右に詳細が出てきます。詳細の「メッシュ＞Skeltal Mesh Asset」の項目の「なし」を選択すると、最初から用意されているメッシュ（見た目）が表示されるので、好きなものを選んでください。
ここでは、SKM_Mannyを選びました。
メッシュを選択すると、左側のプレビューが更新されます。
元々あるカプセルと位置や向きを合わせたいので、画面右の「詳細＞トランスフォーム」から調整していきます。
高さを-80、向きを-90に調整しました。
ついでにアニメーションも設定しましょう。
これを設定しておくと、NPCを置いたときに待機モーションを取ってくれます。「詳細＞Animation」の「Anim Class」で設定します。先ほど、メッシュにSKM_Mannyを設定したので、「ABP_Manny」を選びました。
コリジョンを設定する
今回、アクションガイドはこんな挙動を目指して作っていきます。
PlayerがNPCに近づくと表示
PlayerがNPCから遠ざかると非表示
これを実現する方法として、NPCの周りにコリジョンを作っておき、
Playerがコリジョンの範囲内に入っているときは表示
Playerがコリジョンの範囲外にいるときは非表示
……というやり方で実現します。ここで使うコリジョンを設定していきます。
画面左上の「コンポーネント」の「追加」を押して、検索キーワードとして「collision」を入れます。判定はNPCを中心に円形に広がってほしいので、「Capsule Collision」を選びます。
「Capsule」が作られるので、コンポーネントでCalsuleを選択した状態で、画面右の詳細＞トランスフォームでCapsule Collisionの大きさを設定します。任意の数字で大丈夫です。ここでは、「拡大・縮小」を「4.0 4.0 2.5」に設定しました。
まだまだ設定すべきことはありますが、一旦ここまでにしてアクションガイド作りに移ります。
アクションガイドを作る
ウィジェットブループリントを作る
アクションガイドの見た目を作ります。
「コンテンツブラウザ」の「追加」から、「ユーザーインターフェース＞ウィジェットブループリント」を選びます。
画面が出てくるので、「User Widget」を選びましょう。
UIを作るときは、大体このウィジェットブループリントを使います。
ウィジェットブループリントが作られるので、好きな名前をつけましょう。ここでは、WBP_ActionGuideと命名して進めていきます。
Canvas Panelを追加する
アクションガイドの見た目を作っていきましょう。WBP_ActionGuideをダブルクリックして開いてください。
左上のパレットから「パネル＞Canvas Panel」を選んで、右側にドラッグ＆ドロップしてください。Canvas Panelがこれから追加していくUIのベースになります。
緑色の枠が画面いっぱい（1280x720）に表示されます。このままでも大丈夫ですが、私は画面サイズを1920x1080で作りたいので、枠の右下の矢印をドラッグして大きさを変えます。矢印を動かすと画面サイズの目安が出てくるので、1920x1080のところに合わせます。
テキストを追加する
次に、アクションガイドのテキスト（動画内での"話す"）を作りましょう。
左上のパレットから「一般＞テキスト」を選んで、Canvas Panelと同様に右側にドラッグ＆ドロップしてください。テキストは、UIとして文字を表示するときに使います。
テキストブロックという白文字が大きく表示されます。
なんとなくていいので、「Canvas Panel」を画面に見立てたときにアクションガイドを表示したい位置にテキストを移動しておきましょう。
画面右の詳細から、テキストの名前と表示するテキストを変えられます。
詳細の一番上のTextBlock_0を任意の名前にしてください。
ここでは、ActionGuideとして進めます。また、「コンテンツ＞Text」をアクションの名前に変えてください。話すの他、調べるとかでも良いです。
必須ではありませんが、テキストブロックが大きいので、「スロット＞Size To Content」にチェックを入れて、枠を小さくしておきましょう。
テキストの見た目を調整する
テキストの見た目を調整しましょう。
詳細の「アピアランス＞Color and Opacity」で文字色を変えられます。デフォルトで白になっている場所をクリックするとカラーパレットが出てくるので、好きな色にしましょう。
「アピアランス＞Size」でフォントサイズを変えることができます。
「アピアランス＞Font＞Font Family」からフォントを変えられます。デフォルトではRobotoしか選べないので、変えたい場合はフォントのデータをUE5に入れておく必要があります。使いたいフォントデータを、UE5のコンテンツブラウザにドラッグ＆ドロップしてください。出てくるウィンドウで「すべてはい」を選択すると、Font Familyからそのフォントが選べるようになります。
ボタン画像を表示する
テキストの左側に、ボタンの画像を表示しましょう。
画面左のパレットから「一般＞Image」を選択し、右側にドラッグ＆ドロップしてください。Imageは、画像を表示するときに使います。
白い箱が、画像が表示される場所になります。
箱の大きさや場所を、ボタンを表示したい位置に合わせて調整しましょう。
この白い箱に表示する画像を選びたいのですが、その前に画像データをUnrealEngineに読み込んでおく必要があります。作成済みのデータがあればそれでもかまいませんので、使いたい画像をフォントと同じようにコンテンツブラウザにドラッグ＆ドロップしておきましょう。
ここで使わせていただいている画像は、記事の最後にまとめておきます。
画像を読み込めていれば、詳細の「アピアランス＞Brush＞Image」から変更できます。
アクションガイドでやることは以上です。
画面左上のコンパイルをクリックしましょう。黄色のはてなマークが消えて、緑のチェックマークになっていれば大丈夫です。
🚫万一赤いマークが出た場合、何かを間違えているので手順を確認してみてください。
NPCのブループリントを設定する
後は、BP_NPCからアクションガイドを呼び出せればOKです。BP_NPCの設定に戻りましょう。
BP_NPCのブループリント全体像
いよいよ、設定した要素たちをブループリントで動かしていきます。これから作っていくブループリントがこちらです。1つ1つ解説していきます。
ゲーム開始時にアクションガイドを読み込み
ゲームを始めた瞬間にアクションガイドを読み込んでおきます。
画面上部の「イベントグラフ」を選択すると、このような画面が出ます。1番上の「イベント BeginPlay」が、（おおざっぱに言うと）ゲーム開始時と同時に呼び出されます。
画面にUIを表示するには、
UIを読み込む
UIを画面に呼び出す
という処理を入れる必要があります。
アクションガイドはNPCに近づいたときだけ表示したいので、今回はこれに加えて……アクションガイドを一時的に非表示にする
という処理をイベントBeginPlayに続けて入れていきます。
それではやっていきましょう！
※ActorBeginOverLapとTickは今回使わないので、消して大丈夫です。
必要なときに、ご自分で追加できます！
イベントBeginPlayの白い△から線を引っ張って、好きなところで話してください。イベントBeginPlayの次に入れられる処理の一覧が出てくるので、「ウィジェットを作成」を選択してください。
❓アクションガイドの表示/非表示を切り替えるのをNPCにしたほうが都合が良さそうなので、NPC側でウィジェットを作成しています。ただし、NPCが増えたときに全員が同じウィジェットを呼び出すことになるので、ThirdPersonCharacter側でウィジェットを呼び出しておいて、NPCから表示/非表示の切り替え指示を出したほうが良いかもしれません。
次に、何のウィジェットを読み込みたいかを指定します。
「クラスを選択」をクリックして、プルダウンから先ほど作ったWBP_ActionGuideを選択しましょう。
次に、アクションガイドを画面に呼び出しておきます。
「ウィジェットを作成」の右側のピン好きなほうを引っ張って好きなところで離し、「Add to Viewport」を追加してください。
「Add to Viewport」の左側のピンを、「ウィジェットを作成」右側の同じ色のピンにつなげます。
白いピンは処理の順番を示しています。最も左側にある「イベントBeginPlay」から始まり、次に「WBP Action Guide ウィジェットを作成」を行い、それが終わったら「Add to Viewport」が行われることになります。
青いピンは、「ウィジェットを作成」で読み込んだWBP_ActionGuideを「Add to Viewport」で表示するという意味です。
WBP_ActionGuideは、今後あちこちで使うので、いつでも呼び出しやすいようにしましょう。「WBP Action Guide ウィジェットを作成」のReturn Valueからピンを伸ばして、「変数へ昇格」を選択してください。
作ったアクションガイドを変数という箱に入れて大事に持っておき、必要なときにいつでも取り出せるようにしておくイメージの処理になります。
変数が追加されたので、わかりやすく名前を変えておきましょう。
画面左下の「マイブループリント＞変数＞コンポーネント」から、今追加した変数の名前を「ActionGuide」に変更します。
「Add to Viewport」の右側のピン△を、今出来上がった「セット」の左側ピン△につないでください。白線や青線は、線の途中をダブルクリックするとリルート（線を途中で曲げたり）できるので、見やすく調整してみてください。
最後に、呼び出したアクションガイドを一旦非表示にしておきましょう。
「セット」の後ろに、今までと同じ方法で「Set Visibility」を追加してください。追加したら、In Visibilityを「Hidden」にします。併せて、何を非表示にするかを示すターゲットに、「セット」の右側の青ピンをつなげてください。
PlayerがNPCに近づいたらアクションガイドを表示
次に、Playerがコリジョンと重なったらアクションガイドを表示にする処理を入れていきます。
ビューポートのコンポーネントからCapsuleを選択し、詳細の下のほうにある「イベント＞On Component Begin Overlap」のプラスボタンを押します。
すると、自動的に画面がイベントグラフに移り、画像のようなものが追加されます。これは、何者かがコリジョンと重なったら呼び出されるものです。これに続けて、アクションガイドを表示する処理を入れていきます。
「On Component Begin Overlap」のOther Actorで、何がコリジョンに触れた場合の処理にしたいかを指定します。ここではプレイヤーにしたいので、デフォルトでプレイヤーとして実装されているThirdPersonCharacterを呼び出します。
「On Component Begin Overlap」から線を伸ばして、
「Cast To BP_ThirdPersonCharacter」を追加します。
今のところ、BP_NPCとThirdPersonCharacterは縁もゆかりもないので、Other ActorにThirdPersonCharacterを入れる処理としてcastを入れておきます。
次に、画面左下の変数から「ActionGuide」を追加し、ピンを伸ばして「Set Visibility」を追加します。ここではアクションガイドを表示するので、In Visibilityは「Visible」のままにしておきましょう。「Set Visibility」と「Cast To BP_ThirdPersonCharacter」をつなげたら、一連の処理は完成です。
PlayerがNPCから離れたらアクションガイドを非表示
今度は、Playerがコリジョンに重なるのをやめたらアクションガイドを非表示する処理を入れていきます。
ビューポートのコンポーネントからCapsuleを選択し、詳細の下のほうにある「イベント＞On Component End Overlap」のプラスボタンを押します。
同じように画面がイベントグラフに移り、何者かがコリジョンと重なるのをやめたら呼び出されるものが追加されます。
これの後ろに、アクションガイドを表示する処理で追加した、「Cast To BP_ThirdPersonCharacter」「ActionGuide」「Set Visibility」をコピペして同じようにつなぎます。この時、「Set Visibility」のIn Visibilityを「Hidden」にしておきましょう。
これで一通りの作業が全て終わりましたので、左上のコンパイルを押してください。
実装確認
BP_NPCをレベルに配置
それでは、実際にゲームを動かして確認してみましょう。
コンテンツブラウザにあるBP_NPCを、画面中央のマップが移っている場所にドラッグ＆ドロップして配置してください。確認だけなので、適当な場所で大丈夫です。
配置したら、画面上部の再生ボタンを押してゲームを再生してみましょう。
マウスで視点移動、WASDキーで移動できます。配置したNPCに近づいたら、画面上にアクションガイドが出るようになっているはずです。
アクションガイドの表示位置を変えたい場合は、WBP_ActionGuideの画像と文字の位置をCanvas Panelの中でいろいろ変えてみてください！
最後に
お疲れ様でした！ アクションガイド周りの実装これで完了です。
ここから、アクションガイドを表示する場所や条件、挙動等を自分でカスタマイズしてみてください。最初は人のやり方を真似するだけでも大丈夫です。そのうち、自分が思い描いた機能にするために、嫌でも自分で考えなければならないときが来ます。この記事が、ゲーム制作を始めたばかりの人たちの最初の足掛かりになれば幸いです。
使わせていただいたリソース
どちらも無料で商用利用可です。（2024/09/08現在）
この記事が参加している募集
よろしければサポートをお願いいたします！ 泣いて喜びます😂