執筆バージョン: Unreal Engine 4.27
|
第17回ぷちコンのテーマ「かいとう」にちなんで、“プレイヤーを検知する機能”を作成します。
ハンズオン形式で書いたので、ぜひ真似してつくってみてください。
完成イメージはこちら!
※ThirdPersonテンプレートを使っています。
目次
・準備
・検知機能の作成
・検知した時にアイコンを表示する
・完成
・おまけ
準備
作成に入る前に下記のものを用意します。
・作成したファイルをまとめておくフォルダ
・敵キャラクター
・プレイヤーを検知した時に表示するアイコン画像
■フォルダの作成
本記事で作成するファイルをまとめておくファルダを作成します。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_1.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_2.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_3.png)
フォルダ名は”EnemyBP”にしました。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_4-1024x419.png)
■敵キャラクターの作成
ThirdPersonCharacterをコピーして敵キャラクターに仕立て上げます。
Content→ThirdPersonBP→Blueprintsの”ThirdPersonCharacter”をコピー(Duplicate)します。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_5.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_6.png)
ファイル名は”Enemy”にしました。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_7.png)
EnemyをEnemyBPに移動します。
EnemyをEnemyBPにドラッグアンドドロップしてください。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_8.png)
Move Hereを選び、ファイルを移動させます。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_9.png)
Enemyを移動させることができました!
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_10.png)
敵キャラクターと認識しやすいように色を変更します。
適用されているマテリアルを変更することで色変更が可能です。
Enemyを開いて、適用されているマテリアルを確認しましょう。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_11.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_12.png)
適用されているマテリアル”M_Male_Body”を確認できました。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_13.png)
Enemyは、ThirdPersonCharacterをコピーしたものです。
なので、ThirdPersonCharacterもM_Male_Bodyが適用されています。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_14.png)
M_Male_Bodyの色を変更してしまうと、プレイヤーの色も変わってしまいます。
そこで、M_Male_Bodyをインスタンス化します。
※マテリアルインスタンスの使用方法についてはこちらをご覧ください。
[UE4]Material Instanceの基本的な使い方|株式会社ヒストリア
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_15.png)
ファイル名は”MI_Male_body”にしました。
Enemyのときと同じように、EnemyBPフォルダに移動させておいてください。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_16.png)
マテリアルインスタンスのBodyColorを変更して、色を決めます。
好きな色にしてみてください。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_17.png)
本記事では赤色にしています。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_18.png)
マテリアルインスタンスを適用して、色を変えてみましょう。
Enemyを開いて、今度は虫眼鏡ではなくマテリアル名をクリックしてください。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_19.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_20-1024x798.png)
最後に、EnemyのBlueprintから必要のないノード、コンポーネントを消して完成です!
※これらはThirdPersonCharacterに入っていたPlayerの操作に関する処理なので、Enemy側では消しましょう。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_21-1024x685.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_22-1024x686.png)
■アイコンの用意
頭上に表示するアイコンの画像を用意して、EnemyBPに追加しましょう。
ビックリマークや驚いたマークなど好きなアイコンをつかってみてください。
コンテンツ ブラウザ から [Import (インポート)] ボタンをクリックして、
使いたい画像を選択することでインポートが可能です。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_23-1024x794.png)
これで準備完了です!
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_24.png)
検知機能の作成
ここでは、検知機能は「Enemyの顔から真っすぐ先にプレイヤーが居たら検知する」という処理にします。
下記の画像の赤い線が、検知するための処理を可視化したものです。
こちらは「ライントレース」という機能を使って実装していきます。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_25-1024x576.png)
■ライントレースの実装
今回使用する「LineTraceByChannel」というノードは、始点と終点の位置を指定して、
始点から終点にレイ(光線)を飛ばして、当たったオブジェクトを返すノードです。
まずはEnemyのEventGraphを開いてください。
最初に判定線の長さを定義するための変数を作成します。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_26.png)
変数名は”Distance”にしました。
変数の型をFloatに変更します。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_27.png)
確認のため、一度コンパイルしてみましょう。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_28.png)
コンパイルすることで数値を入れられるようになります。
数値は後程入れるので、今は0のままで問題ありません。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_29.png)
冒頭で紹介した”LineTraceByChannel”を追加します。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_30.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_31-1024x576.png)
全体像はこのようになります。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_32-1024x453.png)
始点を決めている部分です。
Enemyの顔からライントレースを伸ばすために、Enemyの現在地にZの値(腰から顔までの距離)を足しています。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_33.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_69-1024x433.png)
終点を決めている部分です。「始点からEnemyの正面方向に離れた位置」が終点になります。
離れる距離は、Distanceの値で調整します。今回は、Distanceの値を”500”にしました。
正面方向に離れた位置を取得するために、GetActorForwardVectorにDistanceを掛け算します。
始点を原点にして、Distanceの値分離れた位置を終点にしたいので、計算の最後に始点の値と足し算します。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_35.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_36-1024x576.png)
ライントレースをデバッグ用に表示するために、LineTraceByChannelの「Draw Debug Type」を「For Duration」に変更してみましょう。
毎フレームこの部分の処理は通るので、1回の処理では一瞬表示されればよいので、「Draw Time」は「0.0」にしておきます。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_37.png)
レベルにEnemyを配置して、再生してみましょう。
Enemyから赤い線が伸びているはずです。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_38-1024x958.png)
確認ができたら、「DrawDebugType」は「None」に戻しておきましょう。
■検知したアクターをログ表示する
実際にライントレースが検知しているのか確認してみましょう。
ライントレースがヒットした時、画面左上にHit!の文字が表示されるように、”PrintString”を追加します。
表示される文字をチェックしやすいように、PrintStringのDurationを0.0にしてください。
ヒットしていないときは、Falseに処理が流れるので何も起こりません。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_70-1024x530.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_71.png)
プレイヤーを操作して、Enemyの前に立ってみてください。
プレイヤーにヒットしないと思います。
プレイヤーの当たり判定が、ライントレースを無視する設定になっているからです。
ライントレースが当たるように設定を変更します!
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_43-1024x447.png)
プロジェクトセッティングを開きます。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_44.png)
VisibilityのIgnore(無視)にチェックが入っていると思います。
これをBlockに変更することで、ライントレースに当たるようになりました。
もう一度プレイヤーを操作して、Enemyの前に立ってみてください。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_45-1024x604.png)
ライントレースがヒットするようになりました!
画面左上にもHit!の文字が表示されています。
しかし、このままでは壁などのプレイヤー以外のアクターも検知してしまいます。
次のセクションでは、検知している相手がプレイヤーなのかどうか判定する機能を作成します。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_72-1024x506.png)
■検知した相手がプレイヤーかどうか判断する
「プレイヤーにヒットした時だけ、アイコンを表示したい」ので、検知した相手がプレイヤーなのか判断する機能を作成します。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_74-1024x511.png)
OutHitからヒットした相手の情報を取得することができます。
LineTraceは、BreakHitResultとセットで使うことが多いです。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_40.png)
BreakHitResultからHitActorの情報を取得します。
ActorHasTagで”Player”というTagを持っているか確認することができます。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_41-1024x698.png)
ThirdPersonCharacterを開いて、Tagの設定をします。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_42-1024x295.png)
これで、プレイヤーだけEnemyの検知に引っかかるようになりました!
ライントレースが壁に当たるようにEnemyを移動して、確認してみてください。
※確認が取れたら、PrintStringは必要ないので消してください。
■検知機能完成!
これで検知機能の完成です!
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_48-1024x527.png)
検知した時にアイコンを表示する
プレイヤーを検知した時、敵キャラクターの頭上にアイコンを表示する機能を作成します。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_49.png)
EnemyBPにWidgetBlueprintを作成します。
ファイル名は”Icon_Exclamation”にしました。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_50-1024x533.png)
事前に用意していたアイコン画像を追加します。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_51.png)
追加したImageに用意した画像を設定します。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_52-1024x498.png)
潰れた画像を元に戻します。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_53.png)
Widgetの中心に画像を配置します。
Anchorsを中央にすることで、座標の原点が中央になります。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_54.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_55-890x1024.png)
Imageの基点は左上です。
なので、PositionX,Yで調整する必要があります。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_56.png)
Image Sizeの半分、位置をずらします。(例:200 → -100)
これでIcon_Exclamationは完成です!
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_57-1024x799.png)
■敵キャラクターにアイコンを追加する
Enemyに戻り、アイコンの大きさと位置の調整をしていきます。
Icon_Exclamationを表示するために、Widgetコンポーネントを追加してください。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_58-1024x557.png)
WidgetコンポーネントにIcon_Exclamationを設定します。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_59-1024x471.png)
用意した画像によっては大きすぎる場合があります。
その場合は、Icon_Exclamationに戻ってImageSizeを変更します。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_60-1024x512.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_61.png)
Widgetコンポーネントを頭上の位置に動かします。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_62.png)
プレイして、Enemyの頭上にアイコンが表示されているのを確認してみてください。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_75.png)
■アイコン表示機能を追加
アイコンの表示・非表示機能を作成します。
Visibleのオンオフで、コンポーネントの表示・非表示を決めることができます。
発見した時に表示したいので、デフォルトは非表示にします。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_63.png)
プレイして、Enemyの頭上にアイコンが消えているのを確認してみてください。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_76.png)
Playerタグで選別した先に処理を追加します。
タグを持っているかどうかで、Visibleが切り替わるようにします。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_64.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_65-1024x742.png)
これで、プレイヤーが検知に引っかかるとアイコンを表示するようになりました!
プレイして確認してみてください。
■アイコンの向きを整える
表示されたアイコンは、横から見ると見づらい状態です。
最後に、プレイヤーカメラに対してアイコンが正面を向くようにします。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_66-1024x736.png)
LineTraceの前に追加します。
Widgetがプレイヤーカメラの方を向くように、FindLookatRotationのTargetにプレイヤーカメラの位置を繋げます。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_67-1024x585.png)
完成
完成したノードの全容になります。
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/LineTrace_68-1024x223.png)
モデルを差し替えれば、監視カメラなんかも作れると思います。
是非、ぷちコンでお役立てください!
※今回は敵キャラクターの実装を想定して、ThirdPersonCharacterをコピーして作成しました。なので、BlueprintクラスがCharacterになっています。
ただ、Characterクラスでないと動かないような機能は実装していません。なので、監視カメラなどを作成する際、BlueprintクラスをActorで作ってもらって問題ありません。
おまけ①
今回、動かすロジックは組んでいません。
UnrealEngineには、AIキャラクターを作成するビヘイビアツリーという機能があります。
徘徊しながら、プレイヤーを見つけたら追いかけるといった機能も実装できます。
本記事の内容より少し難しくはなりますが、挑戦してみてください!
参考記事:[UE4] ビヘイビアツリー(BehaviorTree)の使い方 入門編|株式会社ヒストリア
おまけ②
ライントレースで検知できる範囲が狭すぎると感じた方もいらっしゃると思います。
そこで、扇形にライントレースを何本か飛ばす方法を紹介します。
難易度が上がりますが挑戦してみてください!
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/Bonus_1.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/Bonus_7.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/Bonus_4-2-1024x468.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/Bonus_5-2-1024x539.png)
![](https://historia.co.jp/wp/wp-content/uploads/2022/02/Bonus_6-1-1024x310.png)