【UE5】自動ドアの作成方法|左右開閉ドア

ue5自動ドアアイキャッチ画像 UE5 基礎

はじめに

 Unreal Engine 5で自動ドアの開閉処理を実装します。このチュートリアルでは、当たり判定の設定、ドアの開閉処理までを詳しく説明します。

※この記事ではUE5.3.2を使用しています。

今回は、このような処理を作成します。

自動ドアの開閉処理の作成方法

「 StarterContent 」の準備

透明なドアにしたいので、今回は「 StarterContent 」内の「M_Glass」マテリアル(ガラス)を使用します。まず、「 StarterContent 」がコンテンツ内のフォルダにあるか確認してください。

UE5水面作成画像35

ない場合は、「 + 追加 」を押して、「機能またはコンテンツパックを追加…」を選択してください。

UE5水面作成画像33

コンテンツ」、「 StarterContent 」、「プロジェクトに追加」を押してください。

UE5水面作成画像34

Blueprintの作成

今回は、コンテンツ内にブループリントを作成します。「コンテンツ」を選択した状態で「 + 追加 」をクリックしてください。

ue5自動ドア画像01

ブループリントクラス」を選択、「 Actor 」をクリックします。

ue5自動ドア画像02
動く床説明画像03

名前を「 BP_AutomaticDoor 」にします。

BP_AutomaticDoor 」をダブルクリックして、ブループリントの編集画面を表示します。

ue5自動ドア画像03

ビューポート」を項目を選択。「 DefaultSceneRoot 」を選択した状態で「 + 追加」をクリックして「 キューブ 」を追加します。

ue5自動ドア画像05
ue5自動ドア画像04

DefaultSceneRoot 」を選択した状態で、キューブを作成すると「 DefaultSceneRoot 」の下の階層に自動で追加されます。名前を「 Door_R 」に変更します。

ue5自動ドア画像06

DefaultSceneRoot 」を選択した状態で「 + 追加」をクリックして、もう一つ「 キューブ 」を追加します。名前を「 Door_L 」に変更します。

ue5自動ドア画像07

Door_L 」を選択した状態で、トランスフォームの位置を「Y:-50」、拡大・縮小を「0.05」「1.0」「2.0」変更します。

ue5自動ドア画像08

次に「 Door_R 」を選択した状態で、トランスフォームの位置を「Y:50」、拡大・縮小を「0.05」「1.0」「2.0」変更します。

ue5自動ドア画像09

当たり判定の作成

DefaultSceneRoot 」を選択した状態で「 + 追加」、検索で「coll」を入力して「 Box Collision 」を追加します。

ue5自動ドア画像10
ue5自動ドア画像11

Box」を選択した状態で、拡大・縮小:「 5.0 」、「 4.0 」、「 4.0 」にします。

ue5自動ドア画像29

Box 」を右クリックして、「 On Component Begin Overlap 」と「 On Component End Overlap 」を追加してください。

ue5自動ドア画像12

イベントグラフ」に切り替わり、ブループリントのノードが追加されます。

On Component Begin Overlap 」は、何かが重なった時、「 On Component End Overlap 」は、離れた時に実行される処理です。

ue5自動ドア画像13

On Component Begin Overlap 」の実行ピンから「Add Timeline」ノードを追加します。

ue5自動ドア画像14

Add Timeline 」の名前を「Gate」に変更します。「Gate」をダブルクリックしてタイムラインの編集画面を表示します。

ue5自動ドア画像15

長さを「1.5」、「最終キーフレームを使用」をクリックします。

ue5自動ドア画像16

+ トラック」をクリックして、「ベクタートラックを追加」を選択します。

ue5自動ドア画像17

追加したトラックの名前は「RightGate」にしました。次にXとZの値は必要ないので、目のマーク鍵のマーククリックして使用しないようにします。

ue5自動ドア画像18

ここでは、2つのキーを追加していきます。

右クリックして「Yにキーを追加」を選択してください。

ue5自動ドア画像19

時間を「0」値を「50」に設定します。

ue5自動ドア画像20

もう一度右クリックして、「Yにキーを追加」を選択します。

時間を「1.5」値を「120」に設定します。時間を「1.5」にすると、1.5秒かけて移動します。

※今回の自動ドアの場合、Yの値を「50」の位置から「120」の位置まで移動させることができます。

ue5自動ドア画像21

「イベントグラフ」に戻って「Gate」の「Update」ピンから「Set Relative Location (Door_R)」を追加します。

ue5自動ドア画像22

Gate」の「Right Gate」ピンと「Set Relative Location (Door_R)」の「New Location」ピンを繋ぎます。これで「Door_R」の初期位置(Y:50)から「Y:120」の位置まで「1.5」秒かけて移動します。

ue5自動ドア画像23

Set Relative Location (Door_R)」の実行ピンから検索して「Set Relative Location (Door_L)」を追加して繋げます。

ue5自動ドア画像24

Gate」の「Right Gate」のピンから「*」を入力して「Multiply」を追加します。

ue5自動ドア画像25

Multiply」のピンから「Set Relative Location (Door_L)」の「New Location」ピンに繋ぎます。

Multiply」のYの値を「-1.0」に設定します。これにより「Door_R」とは逆の位置に動くようになり、ドアが左右に開くようになります。

ue5自動ドア画像26

On Component End Overlap 」と「Reverse」を繋ぎ、離れた時にドアが閉まるようにします。

Reverse」は、逆に動作する処理です。

ue5自動ドア画像27

これでブループリントは完成です。

ue5自動ドア画像28

最後にガラスのマテリアルをドアに設定します。「Door_L」を選択した状態で、右の詳細欄、マテリアルのプルダウンメニューをクリックします。

ue5自動ドア画像30

検索で「glass」と入力して「M_Glass」を選択します。表示されない場合は、目次の「 StarterContent 」の準備」を参照してください。

ue5自動ドア画像31

Door_R」を選択した状態で、右の詳細欄、マテリアルのプルダウンメニューから「M_Glass」を設定します。

ue5自動ドア画像32

作成したブループリントをレベルに配置します。

ue5自動ドア画像33

ゲームプレイして確認してみましょう。

まとめ

今回は自動ドアの開閉処理を実装する手順を解説しました。

当たり判定の設定、ブループリントの作成など、基本的なステップを理解できたと思います。

書籍で学びたい方はこちら >> UE5 おすすめ本 3選!初心者必見!

コメント

タイトルとURLをコピーしました