キーとカーブ

ブループリントのタイムライン エディタ内でキーとカーブを使用する方法の概要。

Choose your operating system:

Windows

macOS

Linux

ブループリントのタイムライン エディタ内でキーとカーブを使用する方法の概要。

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

Blueprints

C++

カーブ は一定範囲を評価するために補間ポイントのカーブを定義します。カーブは、ベクター (vector)浮動小数点 (floats)カラー (colors) です。各トラックには、時間と値を定義する キー をいくつでも持つことが出来ます。データは、これらのキーの間を補間して、タイムライン間のいずれかの時点の値を計算することができます。

キーとカーブを使用する

この例では、一定範囲を評価するために補間された浮動小数点のカーブを定義する Curve Float を作成します。

  1. 新しい アクタ ブループリント クラスを作成するには、コンテンツ ブラウザ に移動して、[Add (+) (追加 (+))] > [Blueprint Class (ブループリント クラス)] をクリックします。

    ![](01_AddBPClass.png)

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

    ![](02_SelectActor.png)

  3. Timeline Component をクリックして Timeline Editor を開きます。

  4. イベントグラフ ウィンドウに移動して グラフ を右クリックし、Add Timeline ノードを検索、選択します。タイムライン ノードをダブルクリックして Timeline Editor ノードを開きます。

    ![](03_TimelineNode.png)

  5. [Track(+)] > [Add Float Track] の順にボタンをクリックして、CurveFloat を Timeline Component に追加します。

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

  6. 作成した CurveFloat の Timeline Editor は以下のようになります。

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

キーを追加する

キーを追加するには、Shift キーを押しながらグレーのバーをクリックする、またはグレーのバーを右クリックしてドロップダウン メニューからアクション [Add Key To CurveFloat] を選択します。

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

キーの編集

キーの時間と値を設定するには、キーをクリックし、トラック上部付近のフィールドにそれぞれの値を入力します。

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

キーを削除する

選択したキーを削除するには、キーボード上の [Delete (削除)] キーを押すか、削除したいキーの上で右クリックして、コンテキスト メニューから [Delete (削除)] アクションを選択します。

キーを移動させる

タイムラインに沿ってキーを移動させるには、キーを選択、クリック、そしてドラッグします。Ctrl キーを使用すると、一度に複数のキーを選択できます。水平にドラッグするとキーの Time 値が更新され、垂直にドラッグすると Value が更新されます。

![image alt text](MovingKeysBP.gif)(w:740 h:440 convert:false)

キーの補間

キーを右クリックすると、選択したキーの補間タイプを選択するためのコンテキスト メニューが表示されます。

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

キーの補間は、ユーザーが補間したキーとその次のキーの間のカーブにのみ影響を及ぼします。たとえば、他のすべてのキーを Linear に設定した状態で、そのセンターのキー (オレンジで表示) を Auto に設定すると、次の画像のようになります。

![image alt text](09_InterpolationExample.png)

以下は利用可能な補間タイプです。

  • Auto

    ![image alt text](10_AutoInterpolation.png)

  • User

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

  • Break

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

  • Linear

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

  • Constant

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

外部のカーブ

メイン キー エリアの左側のフィールドに、コンテンツ ブラウザ から外部のカーブアセットをそのトラックに追加することができます。

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

外部カーブ アイコン

説明

![image alt text](16_ExtCurveButton1.png)

このトラックに対して コンテンツ ブラウザ で選択したカーブを使用します。

![image alt text](17_ExtCurveButton2.png)

このトラックに対するカーブを選択するには コンテンツ ブラウザ をブラウズします。

![image alt text](18_ExtCurveButton3.png)

インポートした外部カーブを内部カーブに変換し、キーとカーブを編集できるようにします。

ただし、任意のカーブ上で (少なくとも 1 つのキーを選択した状態で) 右クリック して Create External Curve を選択することもできます。

![image alt text](19_CreateExtCurve.png)

その結果、コンテキスト ウィンドウが表示され、そこでカーブアセットを保存するパスを編集できます。こうすることで、他のタイムラインでこのカーブを使用できます。

![image alt text](20_CreateExtCerveWindow.png)

カーブ (UCurveBase) は一定範囲を評価するために補間ポイントのカーブを定義します。カーブは、ベクター (vector)浮動小数点 (floats)カラー (colors) です。各トラックには、時間と値を定義する キー をいくつでも持つことが出来ます。データは、これらのキーの間を補間して、タイムライン間のいずれかの時点の値を計算することができます。

キーとカーブを使用する

この例では、一定範囲を評価するために補間された浮動小数点のカーブを定義する UCurveFloat を作成します。

以下の手順に従って UCurveFloat を作成し、Timeline Component にインスタンス化します。

  1. コンテンツ ブラウザ で「C++ Classes」フォルダをクリックし、Add (+) (追加) ボタンをクリックして [New C++ Class] を選択します。

    ![](01_AddCppClass.png)

  2. アクタ親クラス として選択します。

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

  3. 作成さしたアクタに「ExampleTimelineComponent」という名前をつけます。

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

  4. 新しいアクタを作成すると、Visual Studio では自動的に「ExampleTimelineComponent.h」と「ExampleTimelineComponent.cpp」ファイルが開かれます。「ExampleTimelineComponent.h」ファイルに移動して、以下を #include セクションに追加します。

    ExampleTimelineComponent.h

    #include "Components/TimelineComponent.h"
  5. 次に、ExampleTimelineComponent クラスの定義に次のコードを追加します。

    ExampleTimelineComponent.h

    protected:
    
        UPROPERTY(EditAnywhere, BlueprintReadWrite)
        UTimelineComponent* ExampleTimelineComp;
    
    public:
    
        UPROPERTY(EditAnywhere)
        UCurveFloat* ExampleTimelineCurve;
  6. コードをコンパイルします。

  7. コンテンツ ブラウザ[Add (+)] > [Miscellaneous] > [Curve] を選択します。

    ![image alt text](04_AddCurveAsset.png)

  8. [CurveFloat] を選択してアセットの名前を「ExampleFloatTrack」にします。

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

  9. コンテンツ ブラウザExampleTimelineComponent クラスのフォルダへ移動し、Create Blueprint Class based on ExampleTimelineComponent をクリックして選択します。「BP_ExampleTimelineComponent」と名前をつけます。

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

  10. BP_ExampleTimelineComponent クラス デフォルトを開き、[Detail] パネルへ移動して、ExampleFloatTrackExample Timeline Curve を割り当てます。

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

  11. コンテンツ ブラウザで Example Float Track をダブルクリックして Timeline Editor を開きます。

キーを追加する

キーを追加するには、Enter キーを押すか、グレーのバーを右クリックして、コンテキスト メニューからアクション [Add Key] を選択します。

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

キーの編集

キーの時間と値を設定するには、キーをクリックし、トラック上部付近のフィールドにそれぞれの値を入力します。

![image alt text](09_SetFloat.png)

キーを削除する

選択したキーを削除するには、キーボード上の [Delete (削除)] キーを押すか、削除したいキーの上で右クリックして、コンテキスト メニューから [Delete (削除)] アクションを選択します。

キーを移動させる

タイムラインに沿ってキーを移動させるには、キーを選択、クリック、そしてドラッグします。Ctrl キーを使用すると、一度に複数のキーを選択できます。水平にドラッグするとキーの Time 値が更新され、垂直にドラッグすると Value が更新されます。

![image alt text](MovingKeysCpp.gif)(w:740 h:440 convert:false)

キーの補間

キーを右クリックすると、選択したキーの補間タイプを選択するためのコンテキスト メニューが表示されます。

![image alt text](10_InterpolationOptions.png)

キーの補間は、ユーザーが補間したキーとその次のキーの間のカーブにのみ影響を及ぼします。たとえば、他のすべてのキーを Linear に設定した状態で、そのセンターのキー (オレンジで表示) を Cubic-Auto に設定すると、次の画像のようになります。

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

以下は利用可能な補間タイプです。

  • Auto

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

  • User

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

  • Break

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

  • Linear

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

  • Constant

    ![image alt text](16_ConstantInterpolation.png)