ドアを開ける

ブループリントと C++ を使って、接近すると開くようにドアを設定するためのタイムラインの使用例。

実装方法を選んでください。

Blueprints

C++

このチュートリアルでは、(Basics/Packs) で利用できるリソースを使って、Timeline ブループリントで接近すると開くドアの設定方法を紹介します。

image alt text

Door アクタを作成する

  1. Blueprint project based on ブランク テンプレートで スターター コンテンツ を有効して新しい ブループリント プロジェクトを作成して「TimelineDoorActor」と名前を付けます。

    クリックしてフルサイズで表示

  2. コンテンツ ブラウザ へ移動して、 [Add (+) (追加)] ボタンをクリックして新しいブループリントを作成します。

    ![image alt text](02_AddBPClass.png)

  3. [Actor (アクタ)] を親クラスとして選択し、ブループリントに「BP_DoorActor」という名前を付けます。

    ![image alt text](03_SelectParentClass.png)

  4. コンテンツ ブラウザ から BP_DoorActor アクタをダブルクリックして ブループリント エディタ で開いて Class Defaults を開きます。

    クリックしてフルサイズで表示

  5. 次に、[Components] タブから [Add (追加)] ボタンをクリックし [Static Mesh] を選択して Static Mesh Component を追加します。

    ![image alt text](05_AddStaticMeshComponent.png)

  6. StaticMesh を右クリックし、[Rename (名前を変更)] を選択して DoorFrame に名前を変更します。

    ![image alt text](06_NameStaticMeshComponent.png)

  7. 次に、[Components] タブから [Add (追加)] ボタンをクリックし [Static Mesh] を選択して Static Mesh Component を追加します。(Repeating step 3)

  8. StaticMesh を右クリックし、[Rename (名前を変更)] を選択して Door に名前を変更します。

    ![image alt text](07_AddStaticMeshDoor.png)

  9. [Components (コンポーネント)] タブ [Add (追加)] ボタンをクリックし、ドロップダウン メニューから [Box Collision] を選択して「Box」に名前を変更します。

    ![image alt text](08_AddBoxCollision.png)

  10. ブループリント エディタイベント グラフ を開いて グラフ を右クリックし、コンテキスト メニューから [Add Timeline (タイムラインを追加する)] を検索して追加します。タイムラインに DoorTimelineComponent と名前をつけます。

    ![](09_AddTimeLineComponent.png)

Door Static Mesh を設定する

次に、[Components] タブのアタッチメント階層を設定する必要があります。

DoorFrame スタティックメッシュ コンポーネントと Door スタティックメッシュ コンポーネントを視覚的に表示するスタティックメッシュ アセットも設定する必要があります。

  1. BP_DoorActor の [Component] タブから DoorFrame スタティックメッシュを選択し、それを DefaultSceneRoot コンポーネント にドラッグして新しい ルート コンポーネント にします。

    ![image alt text](11_DragAsRootComponent.png)

  2. [Components] タブで DoorFrame スタティックメッシュを選択し、[Details] パネルでスタティックメッシュを SM_DoorFrame に変更します。

    ![image alt text](12_SelectSMDoorFrame.png)

  3. 次に、[Components (コンポーネント)] タブから Door コンポーネントを選択します。

    ![image alt text](13_SelectDoor.png)

  4. [Details (詳細)] パネルに移動して**スタティックメッシュ を「SM_Door**」に変更します。

    ![image alt text](14_SelectSMDoor.png)

  5. Transform カテゴリに移動し、Y Location 値を 45.0 に変更します。

    ![image alt text](15_TransformSettingsBP.png)

  6. [Save (保存する)][Compile (コンパイルする)] をクリックしてこれらの変更を Bp_DoorActor に保存します。

![image alt text](26_CompileSaveButton.png)

Timeline Float Track を作成する

Timeline Component では移動アニメーションを記述するために Timeline Curve を必要とします。それぞれのカーブには、時間と値を定義する複数のキーが含まれています。カーブはこれらのキーを補間して、タイムライン中の任意のポイントの値を計算します。

  1. まず、イベントグラフDoorTimelineComponent をダブルクリックして Timeline エディタ を開いて、Track > Add Float Track をクリックして新規カーブをトラックに追加します。

    クリックしてフルサイズで表示

  2. カーブに「DoorRotationZ」という名前を付けます。

    クリックしてフルサイズで表示

  3. 右クリックして Float カーブ トラックにキーを 2 つ追加します。値は (0, 0) ともう 1 つは (5, 90) にします。

    クリックしてフルサイズで表示

  4. Shift キーを押して両方のキーを選択し、[Key Interpolation (キー補間)] ドロップダウン メニューから [Auto (自動)] 補間を選択します。

    クリックしてフルサイズで表示

  5. すべてを調節すると、float トラックは以下のようになります。Float トラックを保存します。

    クリックしてフルサイズで表示

イベント トラック ロジックを更新する

次に、Door スタティックメッシュを回転させるための更新ロジックを作成する必要があります。

  1. BP_DoorActor[Components] タブに移動し、Door スタティックメッシュを イベントグラフ にドラッグします。

    Copy Node Graph

    ![](21_DragDoorCompToGraph.png)

  2. Door ピンを引き出し、アクション コンテキスト メニューから SetRelativeRotation ノードを選択します。

    Copy Node Graph

    ![](22_BPScript1.png)

  3. イベント グラフ を右クリックして、アクション コンテキスト メニューから Make Rotator ノードを検索して追加します。

    Copy Node Graph

    ![](23_BPScript2.png)

  4. DoorTimelineComponent ノードから Door Rotation Z float ピンを引き出して Make Rotator ノードの Z(Yaw) ピンにつなぎます。

    ![image alt text](24_BPScript3.png)

  5. DoorTimelineComponent ノードから Update ピン を引き出して SetRelativeRotation ノードの入力 実行 ピンにつなぎます。Make Rotator ノードの Return Value ピンを SetRelativeRotation ノードの New Rotation ピンに接続します。ブループリントは次のようになります。

    Copy Node Graph

    ![](25_BPScript4.png)

  6. [Compile (コンパイル)][Save (保存)] ボタンを順にクリックします。

    ![image alt text](26_CompileSaveButton.png)

Binding Box Collision Overlap イベントを作成する

アクタがコリジョン領域に出入りするときに Box コンポーネントが反応する機能が必要です。

  1. BP_DoorActor[Components] タブで Box コンポーネントから Box コンポーネントを選択します。

    ![image alt text](27_SelectDoorComponent.png)

  2. [Details (詳細)] パネルで [Events (イベント)] カテゴリまでスクロールして、On Component Begin Overlap イベントの隣にある [+] アイコンをクリックします。

    ![image alt text](28_AddEventBeginOverlap.png)

  3. BP_DoorActor[Components] タブで Box コンポーネントを選択します。

    ![image alt text](29_SelectBoxComponent.png)

  4. [Details] パネルの Events カテゴリを下にスクロールし、On Component End Overlap イベントの横にある [+] アイコンをクリックします。

    ![image alt text](30_EventEndOverlap.png)

  5. On Component Begin Overlap(Box) ノードの 実行**ピンを DoorTimelineComponent ノードの Play ピンにつなぎます。On Component Begin Overlap(Box) ノードの 実行**ピンを DoorTimelineComponent ノードの Reverse ピンにつなぎます。ブループリント スクリプトは次のようになります。

    Copy Node Graph

    ![](31_BPScriptFinal.png)

  6. [Compile (コンパイル)][Save (保存)] ボタンを順にクリックします。

    ![image alt text](26_CompileSaveButton.png)

アクタをレベルに配置する

  1. コンテンツ ブラウザBP_DoorActor を選択して レベル にドラッグします。[Detailed] パネルで Box コンポーネントを選択して、Transform セクションで [Location][Scale] を以下のように調整します。

    クリックしてフルサイズで表示

  2. [Play (PIE)] ボタンをクリックします。

    image alt text

    WASD キーを使って、スペクテイター ポーンを制御することができます。DoorActor のコリジョン領域へ移動すると、ドアが開いた時にタイムラインがプレイするのが分かります。領域に存在している時は、タイムラインが反対にプレイすることがわかります。

完成したブループリント

BP_DoorActor

Copy Node Graph

![](31_BPScriptFinal.png)

Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル