spine-ue4ランタイムドキュメント

ライセンスについて

Spineランタイムをアプリケーションに組み込む前に、Spine Runtimes Licenseをご覧ください。

はじめに

インストール方法

Unreal Engineプロジェクトでspine-ue4ランタイムを使用するには、以下の手順に従ってください :

  1. バージョン4.21以降のUnreal Engine 4をダウンロード及びインストールしてください。
  2. お使いのオペレーティングシステムに応じて、Visual Studio 2015 / 2017 / 2019 Communityまたは最新のXcodeをダウンロード及びインストールしてください。Visual Studioのどのバージョンにすれば良いかがわからない場合は、こちらのリストに従って選択してください。また、Visual Studioをインストールして設定する際には、こちらのガイドの「Unreal Engine用に Visual Studio をセットアップする」セクションを参照してください。
  3. Unreal Engineエディタで、新しい空のコードプロジェクトを作成します。C++ または Blueprints を使用して、spine-ue4 ランタイムと連携することができますが、プラグインを置くにはコード プロジェクトが必要です。
  4. spine-runtimesのGitリポジトリをクローンしてください。もしGitを使用したくない場合は、最新バージョンをZIPでダウンロードして解凍してください。
  5. プロジェクトフォルダ内にPluginsというサブフォルダを作成してください。
  6. spine-runtimes/spine-ue4/Plugins/の中身を、プロジェクトのPlugins/フォルダにコピーしてください。
  7. spine-runtimes/spine-cpp/spine-cppフォルダを、プロジェクトのPlugins/SpinePlugin/Source/SpinePlugin/Public/フォルダにコピーしてください。
  8. C++またはBlueprintsを使用して、プロジェクトでspine-ue4ランタイムを使用します。

C++コードでSpineプラグインを操作する場合は、UE4プロジェクトのBuild.csファイルも以下のように変更する必要があります:

  1. SpinePluginPublicDependencyModuleNamesに追加します。
  2. SpinePlugin/PublicSpinePlugin/ClassesPublicIncludePathsに追加します。

Build.csのサンプルをご覧ください。

Unreal Engineエディタでプロジェクトを開き、File -> Open Visual StudioまたはFile -> Open Xcodeを選択すると、ゲームとspine-ue4ランタイムの両方のC++コードを確認することができます。

サンプル

spine-runtimes/spine-ue4ディレクトリは、Unreal Engineエディタですぐに開くことができるプロジェクトになっています。

spine-ue4ランタイムのサンプルを確認するには:

  1. バージョン4.21以降のUnreal Engine 4をダウンロード及びインストールしてください。

  2. お使いのオペレーティングシステムに応じて、Visual Studio 2015 / 2017 / 2019 Communityまたは最新のXcodeをダウンロード及びインストールしてください。Visual Studioのどのバージョンにすれば良いかがわからない場合は、こちらのリストに従って選択してください。また、Visual Studioをインストールして設定する際には、こちらのガイドの「Unreal Engine用に Visual Studio をセットアップする」セクションを参照してください。

  3. spine-runtimesのGitリポジトリをクローンしてください。もしGitを使用したくない場合は、最新バージョンをZIPでダウンロードして解凍してください。

  4. spine-runtimes/spine-cpp/spine-cppフォルダをspine-runtimes/spine-ue4/Plugins/SpinePlugin/Source/SpinePlugin/Public/フォルダにコピーしてください。

  5. Unreal Engineエディタで、プロジェクトspine-runtimes/spine-ue4/SpineUE4.uprojectを開きます。このプロジェクトは、「Unreal Project Brower」の「Recent Projects(最近のプロジェクト)」にはまだ表示されていないので、「More(さらに表示)」を選択し、「Browse(ブラウズ)」でSpineUE4.uprojectファイルを指定します。

  6. コンテンツブラウザのContent/GettingStartedフォルダにあるさまざまなサンプルマップを確認してみましょう。それぞれのマップには、実行方法や表示される内容の説明がテキストで記載されています。

    補足: エディタでスケルトンをレンダリングするためには、ビューポートでRealtime(リアルタイム)モードをオンにしてください。

Unreal Engineエディタでプロジェクトを開き、File -> Open Visual StudioまたはFile -> Open Xcodeを選択することで、サンプルとspine-ue4ランタイムの両方のC++コードを確認、修正することができます。

spine-ue4ランタイムのアップデート

プロジェクトのspine-ue4ランタイムをアップデートする前に、Spineエディターとランタイムのバージョンの管理に関するガイドをご覧ください。

最新のspine-ue4ランタイムにアップデートしたいことを確信したら以下を行なってください :

  1. 最新のspine-ue4ランタイムを入手するには、Git経由でspine-runtimesのGitリポジトリから最新の変更点をプルするか、最新版をZIPでダウンロードして解凍します。
  2. Unreal Engineエディタ及びVisual Studio/Xcodeは閉じてください。
  3. Unreal EngineプロジェクトからPlugins/SpinePluginフォルダを削除します。
  4. spine-runtimes/spine-ue4/Plugins/の中身を、プロジェクトのPlugins/フォルダにコピーします。
  5. spine-runtimes/spine-cpp/spine-cppフォルダを、プロジェクトのPlugins/SpinePlugin/Source/SpinePlugin/Public/フォルダにコピーしてください。
  6. Unreal Engineエディタでプロジェクトを開き、Windowsの場合はFile -> Generate Visual Studio project files、macOSの場合は File -> Generate Xcode project filesを選択します。
  7. プロジェクトのソースコードとプラグインのソースコードを再コンパイルしてください。

注意: spine-ue4ランタイムは、汎用spine-cppランタイムをベースにしています。そのため、spine-ue4とspine-cppランタイム両方の変更点をGitHubで確認してください。よくあるアップデートの失敗例として、上記(5.)で説明したプラグインのspine-cpp部分のアップデート(コピー)を忘れてしまうことがあります。

spine-ue4を使用する

概要

spine-ue4 ランタイムは、Spineで作成されたアニメーションの再生と操作をサポートする Unreal Engine プラグインです。spine-ue4ランタイムはC++で書かれており、汎用spine-cppランタイムをベースにしています。spine-ue4 ランタイムは、spine-cpp の構造体と関数をラップし、コードと Unreal Engine Blueprints の両方で公開します。また、spine-ue4ランタイムは、Spineエディターからエクスポートされたファイルをインポートし、Unreal Engine のカスタムアセットタイプに格納します。

Spineランタイムのアーキテクチャの詳細については、Spineランタイムガイドをご覧ください。

アセットのマネージメント

Unreal Engine用にエクスポートする

以下の実行方法については、Spineユーザーガイド内で紹介されています :

  1. スケルトン&アニメーションデータのエクスポート
  2. スケルトンの画像を含むテクスチャアトラスのエクスポート

スケルトンのデータとテクスチャアトラスをエクスポートすると、以下のファイルが得られます:

  1. skeleton-name.jsonまたはskeleton-name.skel: スケルトンとアニメーションのデータを含みます。
  2. skeleton-name.atlas: テクスチャアトラスの情報を含みます。
  3. 1つまたは複数の.pngファイル: スケルトンが使用するパックイメージを含むテクスチャアトラスの各ページを表しています。

spine-ue4ランタイムは、これらのファイルをUnreal Engineの特別なアセットタイプにインポートすることができます。

注意: 現在、spine-ue4ランタイムは、乗算済みアルファ(pre-multiplied alpha)を使用してエクスポートされたアトラスをサポートしていません。

Unreal Engineへのインポート

  1. Unreal Engineエディタでご自身のUnreal Engineプロジェクトを開いてください。
  2. コンテンツブラウザのImportをクリックしてください。
  3. Spineエディタからエクスポートした.jsonまたは.skelファイルを選択してください。

アセット インポーターは、スケルトン データとテクスチャ アトラス用の Unreal Engine アセットを自動的に作成します。インポーターは、スケルトンの.jsonまたは.skelファイルの隣に .atlasおよび.pngファイルが置かれていることを想定しています。

テクスチャアトラスファイルの名前がスケルトンデータの.jsonまたは.skelファイルと同じ名前でない場合は、コンテンツブラウザでImportをクリックし、.atlasファイルを選択して、テクスチャアトラスファイルを手動でインポートします。

インポートを行うと、以下が作成されます:

  1. スケルトンデータファイル(.json, .skel)用のSpineスケルトンデータ
  2. テクスチャアトラスファイル(.atlas)用のSpineテクスチャアトラスアセット
  3. 各テクスチャアトラスページ用のテクスチャアセット(.png)。これはテクスチャアトラスアセットの隣にあるTexturesというコンテンツフォルダ内に置かれます

Spineアセットの更新

開発中、Spineのスケルトンデータやテクスチャアトラスファイルを頻繁に更新したい時があります。その場合は、単にSpineから再エクスポートを行なって、これらのソースファイル(.json.skel.bytes.atlas.txt.png)を上書きするだけで更新できます。

Unreal Engineエディタはこれらのソースファイルの変更を検出し、これらのソースファイルからアセットを再インポートをあなたに促します。再インポートすると、以前にインポートした Spineアセットへの参照はすべてそのままで、最新のソースデータが使用されます。

注意: 時々、Unreal Engineエディタがソースファイルの変更を認識できないことがあります。そのような場合、コンテンツブラウザで Spineスケルトンデータまたはテクスチャアトラスアセットを探してダブルクリックし、新しく開いたウィンドウのメニューからAsset(アセット) -> Reimport(再インポート)を選択してください。

Skeleton Data Asset

スケルトンデータアセットには、スケルトンを構成するボーンの階層、スロット、表示順序、アニメーション、その他のデータに関する情報が保管されています。spine-ue4ランタイムが提供する他のコンポーネントは、このスケルトンデータアセットを参照・共有して、Unreal Engineのアクタ インスタンスの一部としてスケルトンをアニメーションさせて表示します。

スケルトンデータアセットでは、アニメーションのミックスタイムを指定することができます。コンテンツブラウザでアセットをダブルクリックし、デフォルトのミックスタイムを入力するか、アセットのMix Dataプロパティの+マークをクリックして特定の2つのアニメーションのミックスタイムを定義します。

スケルトンデータアセットを使用するコンポーネント(スケルトンアニメーションコンポーネントなど)は、アニメーションを再生する際にこのミックスタイムを使用します。

スケルトンデータアセットの詳細ビューには、アセットに含まれるすべてのボーン、スロット、アニメーション、スキン、イベントも表示されます。

Texture Atlas Asset

テクスチャアトラスアセットには、スケルトンで使用されるイメージに関する情報が含まれています。すなわち、どのテクスチャアトラスページにイメージが保存されているかや、テクスチャアトラスページ上のUVテクスチャ座標が含まれています。

コンテンツブラウザでアセットをダブルクリックすると、テクスチャアトラスのページのテクスチャを見ることができます。

補足: テクスチャアトラスアセットが参照するテクスチャを変更することもできます。その場合、UVテクスチャ座標が有効であることを確認してください。

コンポーネント

spine-ue4ランタイムは、Spineからエクスポートされたスケルトンの表示、アニメーション、および修正を可能にするコンポーネントのセットを提供します。これらのコンポーネントは、前述のようにインポートされたスケルトンデータとテクスチャアトラスアセットを参照します。

スケルトンをレベルに追加する

Unreal EngineプロジェクトでSpineスケルトンを素早く表示するには:

  1. 前述のように、スケルトンデータとテクスチャアトラスをインポートします。
  2. レベルに空のアクタを作成します。
  3. 作成したアクタの詳細ビューにSpine Skeleton Animationコンポーネントを追加し、スケルトンデータとテクスチャアトラスプロパティをアセットに設定します。
  4. アクタにSpine Skeleton Renderer Componentを追加します。

これで、ブループリントまたはコンポーネントのC++ APIを使って、スケルトンをアニメーションさせたり、アニメーションによって引き起こされるイベントに反応させたりすることができます。詳細については、後述のコンポーネントのドキュメントを参照してください。

補足: エディタでスケルトンをレンダリングするには、ビューポートでRealtime(リアルタイム)モードをオンにしてください。

Skeletonコンポーネント

Skeletonコンポーネントは、スケルトンデータとテクスチャアトラスアセットへの参照を保存し、Tick()ごとに各ボーンのワールドトランスフォームを更新します。これはSkeletonAnimationコンポーネントや独自のカスタムコンポーネント用のベースコンポーネントとして機能します。

注意: 通常は、後述のSkeletonAnimationコンポーネントを使用します。これはスケルトンにアニメーションを適用することができます。独自のSkeletonコンポーネントを作成したい場合にこのプレーンなSkeletonコンポーネントをベースにしてください。

スケルトンデータとテクスチャアトラスの設定

Skeletonコンポーネントは、スケルトンのボーン階層、スロットなどの情報を得ることができるスケルトンデータアセットへの参照と、スケルトンで使用されるイメージの情報を取得できるテクスチャアトラスアセットへの参照を必要とします。

スケルトンデータとテクスチャアトラスを設定するには

  1. アクタの詳細ビューでコンポーネントを選択し、
  2. AtlasおよびSkeleton Dataのプロパティ設定を設定してください

注意: コンポーネントが正しく機能するためには、スケルトンデータとアトラスアセットの参照の両方が設定されている必要があります。一方または両方が未定義の場合、コンポーネントは、C++およびブループリントによるすべてのインタラクションを無視します。

ライフサイクル

スケルトンコンポーネントは、UActorComponent::Tick()メソッドを実装しており、スケルトンのすべてのボーンのワールドトランスフォームを更新します。

このコンポーネントは、マルチキャストデリゲートのBeforeUpdateWorldTransformAfterUpdateWorldTransformをプロパティとして公開しており、すべてのボーンのワールドトランスフォームが計算される前と後に、このライフサイクルをインターセプトする(割り込ませる)ことができます。これらのデリゲートにバインドすることで、アクタやコンポーネントの更新順序を気にすることなく、ボーンの位置やスケルトンの他の側面を修正することができます。

C++

ライフサイクルをインターセプトすべきクラスでは、以下のようにクラスのヘッダーファイルにUFUNCTION宣言を追加します:

UFUNCTION()
void BeforeUpdateWorldTransform(USpineSkeletonComponent* skeleton);

注意: メソッドをUFUNCTIONとしてマークすることが重要です。そうしないとデリゲートにバインドすることができません。

次に、この関数の定義をクラスの.cppファイルに追加します:

void MyClass::BeforeUpdateWorldTransform(USpineSkeletonComponent* skeleton) {
... modify the skeleton here ...
}

最後に、アクタやコンポーネントのBeginPlay()などで、メソッドをデリゲートにバインドします。スケルトン・コンポーネントを含むAActorへの参照を持っているとします:

AActor* actor = ...
USpineSkeletonComponent* skeletonComponent = static_cast<USpineSkeletonComponent*>(Actor->GetComponentByClass(USpineSkeletonComponent::StaticClass()));
skeletonComponent->BeforeUpdateWorldTransform.AddDynamic(this, &USpineBoneDriverComponent::BeforeUpdateWorldTransform);

AfterUpdateWorldTransformデリゲートへのバインディングも同様に動作します。

ブループリント

スケルトンコンポーネントを含むアクタのブループリントがあるとして

  1. ブループリントエディタでブループリントを開きます。
  2. コンポーネントビューで、Skeletonコンポーネントを選択します。
  3. Skeletonコンポーネントの詳細ビューで、Before Update World TransormまたはAfter Update World Transform+をクリックします。
  4. 他のブループリントノードをイベントの実行ピン(Exec)に接続し、カスタムアップデートロジックを実装してください。

AfterUpdateWorldTransformイベントへのバインディングも同様です。

スキンの設定

Spineのスケルトンには、どのアタッチメントをどのスロットに装着するかを定義する複数のスキンを持つことができます。スケルトンコンポーネントは、スキンを切り替える簡単な方法を提供します。

C++
bool success = skeletonComponent->SetSkin(FString(TEXT("skinName"));
Blueprint

アタッチメントの設定

アタッチメントを設定するには、スロットとアタッチメント名を入力してください。

C++
bool success = skeletonComponent->SetAttachment(FString(TEXT("slotName")), FString(TEXT("attachmentName"));
ブループリント

セットアップポーズへのリセット

プロシージャルアニメーションでは、ボーンやスロットをセットアップのポーズに戻すことが必要な場合があります。

C++
skeletonComponent->SetToSetupPose();
skeletonComponent->SetBonesToSetupPose();
skeletonComponent->SetSlotsToSetupPose();
ブループリント

スケルトンの反転

スケルトンを垂直または水平に反転させることで、アニメーションを再利用することができます。例えば、左向きの歩行アニメーションを右向きでも再生することができます。

C++
bool isFlippedX = skeletonComponent->GetScaleX() < 1;
skeletonComponent->SetScaleX(-1);
bool isFlippedY = skeletonComponent->GetScaleY() < 1;
skeletonComponent->SetScaleY(-1);
ブループリント

ボーンのトランスフォームを取得・設定する

スケルトンコンポーネントでは、ボーンのトランスフォームを設定・取得できるので、IKによる地形追従を実装したり、パーティクルシステムなどの他のアクタやコンポーネントにスケルトンのボーンを追従させることができます。すべてのトランスフォームは、相互作用を容易にするためにワールド座標系で与えられます。

注意: ボーンのローカルトランスフォームを変更する必要がある場合は、C++コードでspine-cppランタイムAPIを使用してください。

注意: ワールドトランスフォームの更新のライフサイクルの一部として、新しいボーンの位置を適用するようにしてください。そうしないと、修正した内容がアニメーションで上書きされてしまう可能性があります。

補足: SpineのSkeleton FollowerとSkeleton Driverコンポーネントの方が、ボーンをより簡単に操作することができます。

C++
FTransform boneWorldTransform = skeletonComponent->GetBoneWorldTransform(FString(TEXT("boneName"));
skeletonComponent->SetBoneWorldPosition(FString(TEXT("boneName"), FVector(x, y, z));
ブループリント

Skeleton Animationコンポーネント

Skeleton Animationコンポーネントは、spine-ue4ランタイムの心臓部です。Spineのスケルトンをアクタに追加し、それをアニメーションさせたり、アニメーションイベントに反応させたりすることができます。

補足: Skeleton Animationコンポーネントは、Skeletonコンポーネントをベースにしているため、前述のスケルトンコンポーネントの機能をすべて継承しています!

ライフサイクル

スケルトンのアニメーションコンポーネントは、UActorComponent::Tick()メソッドを実装しています。このメソッドでは、デルタタイムに基づいて基礎となるAnimationStateを更新し、そのAnimationStateをスケルトンに適用し、スケルトンのすべてのボーンのワールドトランスフォームを更新します。

Skeleton AnimationコンポーネントはSkeletonコンポーネントをベースにしているので、上述のようにBeforeUpdateWorldTransformAfterUpdateWorldTransformにバインドすることができます。

Skeleton AnimationコンポーネントはAnimationState APIをブループリントと C++ の両方に公開します。このセクションでは、トラック、トラック エントリ、ミックス タイム、アニメーション キューイングなどの概念について、Spineランタイムガイドのアニメーションの適用の項で説明されている内容を前提として説明します。

Time Scale

Skeleton AnimationコンポーネントのTime Scaleを設定することで、アニメーションの再生を遅くしたり、速くしたりすることができます。例えば、タイムスケールが0.5の場合、アニメーションは通常の半分の速度になり、タイムスケールが2の場合、アニメーションは通常の2倍の速度になるというように、アニメーションの進行に使用されるデルタタイムは、単純にタイムスケールを乗じたものになります。

C++
float timeScale = animationComponent->GetTimeScale();
animationComponent->SetTimeScale(0.5);
ブループリント

アニメーションの設定

アニメーションを設定するには、トラックインデックス、アニメーション名、アニメーションをループさせるかどうかを指定します。

C++
USpineSkeletonAnimationComponent* animationComponent = ... fetch from actor ..
UTrackEntry* entry = animationComponent->SetAnimation(trackIndex, FString(TEXT("walk")), true);
ブループリント

アニメーションのキューイング

アニメーションをキューに入れるには、トラックのインデックス、アニメーションの名前、アニメーションをループさせるかどうか、このアニメーションがトラックで再生を開始するまでの遅延時間を秒単位で指定します。

C++
UTrackEntry* entry = animationComponent->AddAnimation(trackIndex, FString(TEXT("run")), true, 2);
ブループリント

空のアニメーションの設定とキューイング、トラックの消去(クリア)

SkeletonAnimationコンポーネントには、空のアニメーションを設定したり、空のアニメーションをキューに入れたり、1 つまたはすべてのトラックをクリアするためのメソッドやブループリントノードも用意されています。これらはすべて、前述のメソッドやノードと同様に動作します。

C++
UTrackEntry* entry = animationComponent->SetEmptyAnimation(trackIndex, mixDuration);
entry = animationComponent->AddEmptyAnimation(trackIndex, mixDuration, delay);
animationComponent->ClearTrack(trackIndex);
animationComponent->ClearTracks();
ブループリント

トラックエントリ

すべてのメソッド/ノードからTrackEntryを受け取り、この特定のアニメーションの再生をさらにカスタマイズしたり、Track Entry固有のイベントのデリゲートにバインドしたりすることができます。後述のAnimationStateイベントの処理を参照してください。

注意: 返されたトラックエントリは、対応するアニメーションが基礎となるアニメーションステートから削除されるまでのみ有効です。Unreal Engineのガベージコレクターが自動的にこれらを解放します。トラック エントリに対して dipose イベントを受信した後は、もう保存もアクセスもしないようにしてください。基盤となるspTrackEntryの C++ ラッパーは、不正なアクセスを防止します。

C++
UTrackEntry* entry = ...
entry->SetEventThreshold
(2);
float trackEnd = entry->GetTrackEnd();
ブループリント

AnimationStateイベントの処理

アニメーションがAnimationStateによって再生されている間、様々なイベントが発行され、リスナーに以下を通知します:

  1. アニメーションが開始された(start)
  2. トラックをクリアしたり、新しいアニメーションを設定するなどして、アニメーションが中断された(interrupt)
  3. アニメーションが完了した(complete)。※ループしている場合は複数回発生
  4. アニメーションが終了した(end)
  5. アニメーションとそれに対応するTrackEntry破棄された(dispose)
  6. ユーザーが定義したイベント(event)が発生した。

スケルトンアニメーションコンポーネントは、C++コードやブループリントがバインドできるデリゲートを提供し、すべてのトラックでキューイングされたすべてのアニメーションについて、これらのイベントに反応できるようにします。リスナーは、特定のTrackEntryのみの対応するデリゲートにバインドすることもできます。

C++

AnimationStateイベントに反応するクラスでは、クラスのヘッダーファイルに、取得したいイベントのUFUNCTION宣言を追加します:

UFUNCTION()
void AnimationComplete(UTrackEntry* entry);

UFUNCTION()
void UserDefinedEvent(UTrackEntry* entry, FSpineEvent evt);

対応する.cppの実装ファイルに、以下の定義を追加します:

void MyClass::AnimationComplete(UTrackEntry* entry) {
... react to complete event here ...
}

void MyClass::UserDefinedEvent(UTrackEntry* entry, FSpineEvent evt) {
... react to user defined event here ...
}

最後に、USkeletonAnimationComponentUTrackEntryの対応するデリゲートにバインドします:

USpineAnimationComponent* animationComponent = ...
animationComponent->AnimationComplete.AddDynamic(this, &MyClass::AnimationComplete);

UTrackEntry* entry = ...
animationComponet->AnimationEvent.AddDynamic(this, &MyClass::UserDefinedEvent);
ブループリント

SkeletonAnimationコンポーネントのAnimationStateイベントにバインドするには:

  1. ブループリントを開きます。
  2. アクタのSkeletonAnimationコンポーネントを選択します
  3. 詳細表示で、反応させたいイベントの横にある+ボタンをクリックします。

特定のTrackEntryのデリゲートにバインドするには:

  1. Set AnimationAdd AnimationSet Empty AnimationAdd Empty Animationの戻り値ピンをブループリント内の空きスペースにドラッグします。
  2. ポップアップのComponents -> Spine -> TrackEntryカテゴリからAssign Animation XXXを選択します。
  3. Bind Event toノードが実行されるように接続されていることを確認してください。

ビューポートプレビュー

UE4エディタのビューポートでアニメーションとスキンをプレビューするには、SkeletonAnimationコンポーネントのPreview AnimationPreview Skinを使用します。使い方は、アニメーションとスキンの名前を入力するだけです。

http://esotericsoftware.com/img/blog/Unreal-Engine-4-quality-of-life-improvements/preview.gif

アニメーションやスキンをリセットするには、それぞれのプロパティに空のテキストを設定します。

Skeleton Rendererコンポーネント

Skeleton Rendererコンポーネントは、SkeletonまたはSkeletonAnimationコンポーネントの現在の状態を、同じアクタ上に描画する役割を果たします。レンダリングは、プロシージャルメッシュによって行われます。このコンポーネントは、スケルトン(アニメーション)コンポーネントが参照するテクスチャアトラスアセットを使用して、スケルトンのアタッチメントの描画に必要なテクスチャを探します。

Materials

Skeleton Rendererコンポーネントには4つのマテリアルプロパティがあり、Spineでサポートされているブレンドモードごとに1つずつあります。デフォルトでは、これらの4つのマテリアルは、spine-ue4プラグインの一部であるunlitマテリアルに設定されています(プラグインのContentsフォルダを参照)。

すべてのSkeleton Rendererコンポーネントが使用するマテリアルを変更するには、プラグインのデフォルトマテリアルを変更します。

特定のSkeleton Rendererコンポーネントで使用するマテリアルを変更するには、新しいマテリアルを作成し、Skeleton Rendererコンポーネントのマテリアルプロパティに割り当てます。

いずれの場合も、Skeleton Rendererコンポーネントがテクスチャソースを設定できるように、パラメーター化されたマテリアルを提供する必要があります。デフォルトでは、このコンポーネントはテクスチャパラメーターの名前を"SpriteTexture"と想定しています。Skeleton Rendererコンポーネントでパラメータ名をカスタマイズすることができます。

深度オフセット

アタッチメントは、Skeleton Rendererコンポーネントによってx/z平面上で前後にレンダリングされます。各アタッチメントは、カスタマイズ可能な深度オフセット値によってY軸方向にオフセットされ、Zファイティング(z-fighting)を回避します。深度オフセットは、C++ とブループリントの両方で自由にカスタマイズできます。

Skeleton Followerコンポーネント

このコンポーネントは、Skeleton(及びSkeletonAnimation)コンポーネントのボーンを参照し、Tickごとに自分のトランスフォームをボーンのトランスフォームに設定します。

パーティクルシステムなどのオブジェクトが、スケルトン上の特定のボーンを追いかけるようにするには、これを使います。

Skeleton Driverコンポーネント

このコンポーネントは、Skeleton(及びSkeletonAnimation)コンポーネントのボーンを参照し、Tickごとにボーンの位置を自分の位置に設定します。なお、このコンポーネントは、Skeleton(及びSkeletonAnimation)コンポーネントがワールドトランスフォームを更新する前に、ボーンの位置を設定します。

これは、ユーザーがスケルトンのボーンをドラッグして移動させるようなユースケースに使用します。

UMG UI用Spineウィジェット

Spine 3.8以降、spine-ue4ランタイムは、SpineのスケルトンをUMG UIに統合するためのSpineウィジェットを提供しています。このウィジェットは、SkeletonAnimationコンポーネントと同じインターフェイスを持ち、ブループリントとC++コードの両方に対応しています。アタッチメント間の深度オフセットの設定や、スケルトンのレンダリングに使用されるマテリアルの変更が可能です。詳細については、これら2つのコンポーネントのセクションを参照してください。

UMG UI に Spine スケルトンを追加するには、まず新しいWidget ブループリントを作成します。ブループリントを開いて、パレットから Spine ウィジェットを追加します。

次に、Spineウィジェットにアトラスとスケルトンデータアセットを設定し、ビジュアル デザイナで必要に応じてサイズを変更します。

スケルトンは、アスペクト比を維持しながら自動的にリサイズされ、ウィジェット内の可能な限り多くのスペースを埋めます。Scaleプロパティを使用して、さらに拡大または縮小することができます。

ウィジェットエディタウィンドウでDesign(デザイナ)モードからGraph(グラフ)モードに切り替えた後、ウィジェットのブループリントを変更することができます。こちらがブループリントの例です:

Constructイベントが発生したときのRaptor Widgetの初期アニメーションを設定しています。また、TickイベントとウィジェットのTick関数を連携させ、アニメーションさせる必要があります。

最後に、レベルのブループリントを開き、UMGウィジェットをビューポートに追加する必要があります:

ブループリントでは、まず、クラス名で指定されたウィジェットを作成し、それをビューポートに追加します。

モーションブラーのポストプロセッシングについて

spine-ue4のデフォルトマテリアルは、Unreal EngineでサポートされているTranslucent Blend モードを使用しています。この Blend モードをモーションブラーのポストプロセッシングで使用するには、マテリアルの詳細でOutputVelocityオプションを有効にしてください。