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

> **ライセンスについて**
>
> Spineランタイムをアプリケーションに組み込む前に、必ず[Spine Runtimes License](/spine-runtimes-license)を確認してください。

# はじめに

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

1. [Unreal Engine](https://www.unrealengine.com/)をダウンロード及びインストールしてください。*現在のところ互換性があるのはUE 4.27以上です。**Unreal Engine 5.3以上を使用する場合は「 [UE 5.3以上へアップデートする際の注意点](#UE--5.3以上へアップデートする際の注意点)」セクションを確認してください！**
2. お使いのオペレーティングシステムに応じて、[Visual Studio 2022 Community](https://www.visualstudio.com/downloads/)または最新の[Xcode](https://developer.apple.com/xcode/)をダウンロード及びインストールしてください。どのバージョンのVisual Studioにすればいいか分からない場合は、[こちら](https://docs.unrealengine.com/ja/ProductionPipelines/DevelopmentSetup/VisualStudioSetup/index.html)のリストに従って選択してください。また、Visual Studioをインストールして設定する際には[こちら](https://docs.unrealengine.com/ja/ProductionPipelines/DevelopmentSetup/VisualStudioSetup/index.html)のガイドの「*新しい Visual Studio のインストール オプション*」セクションを参照してください。
3. Unreal Engineエディタで、新しい空のC++コードプロジェクトを作成します。実際の開発中はコードを書かずにブループリントだけでもspine-ueランタイムと連携することはできますが、プラグインを置くためにC++コードプロジェクトである必要があります。
4. [spine-runtimesのGitリポジトリ](https://github.com/esotericsoftware/spine-runtimes)をクローンしてください。Gitを使用したくない場合は、[最新バージョンをZIPでダウンロード](/git/spine-runtimes/archive)して解凍してください。
5. ご自身のプロジェクトフォルダ内に`Plugins`というサブフォルダを作成してください。
6. `spine-runtimes/spine-ue/Plugins/`の中身を、プロジェクトの`Plugins/`フォルダにコピーしてください。
7. `spine-runtimes/spine-cpp/spine-cpp`フォルダを、プロジェクトの`Plugins/SpinePlugin/Source/SpinePlugin/Public/`フォルダにコピーしてください。
8. プロジェクトの`Build.cs`ファイルの`PublicDependencyModuleNames`に`SpinePlugin`を追加してください。

最終的な状態の例は、こちらの[Build.csのサンプル](/git/spine-runtimes/blob/spine-ue/Source/SpineUE/SpineUE.Build.cs#L9)をご覧ください。

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

> **注意:** spine-ueは、スロットの乗算(Multiply)およびスクリーン(Screen)ブレンド、乗算済みアルファ(Premultiplied Alpha)アトラス、2色ティントをサポートしていないことに注意してください。

## サンプル

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

spine-ueランタイムのサンプルを確認するには:
1. [Unreal Engine](https://www.unrealengine.com/)をダウンロード及びインストールしてください。*互換性があるのはUE 5.5以上です。*
2. お使いのオペレーティングシステムに応じて、[Visual Studio 2022 Community](https://www.visualstudio.com/downloads/)または最新の[Xcode](https://developer.apple.com/xcode/)をダウンロード及びインストールしてください。どのバージョンのVisual Studioにすればいいか分からない場合は、[こちら](https://docs.unrealengine.com/ja/ProductionPipelines/DevelopmentSetup/VisualStudioSetup/index.html)のリストに従って選択してください。また、Visual Studioをインストールして設定する際には[こちら](https://docs.unrealengine.com/ja/ProductionPipelines/DevelopmentSetup/VisualStudioSetup/index.html)のガイドの「*新しい Visual Studio のインストール オプション*」セクションを参照してください。
3. [spine-runtimesのGitリポジトリ](https://github.com/esotericsoftware/spine-runtimes)をクローンしてください。Gitを使用したくない場合は、[最新バージョンをZIPでダウンロード](/git/spine-runtimes/archive)して解凍してください。
4. `spine-runtimes/spine-cpp/spine-cpp`フォルダを`spine-runtimes/spine-ue/Plugins/SpinePlugin/Source/SpinePlugin/Public/`フォルダにコピーしてください。
5. Unreal Engineエディタで、プロジェクト`spine-runtimes/spine-ue/SpineUE.uproject`を開きます。このプロジェクトは、「Unreal Project Brower(プロジェクトブラウザ)」の「*Recent Projects(最近のプロジェクト)*」にはまだ表示されていないので、「*More(さらに表示)*」を選択し、「*Browse(ブラウズ)*」から`SpineUE.uproject`ファイルを指定します。
6. コンテンツブラウザの`Content/GettingStarted`フォルダにあるさまざまなサンプルマップを確認してみてください。それぞれのマップには、実行方法や表示される内容の説明がテキストで記載されています。

	> **補足:** エディタでスケルトンをレンダリングするためには、ビューポートでRealtime(リアルタイム)モードをオンにしてください。
![](/img/spine-runtimes-guide/spine-ue/realtimemode.png)

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

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

最新のspine-ueランタイムにアップデートする準備が整ったら以下を行なってください:

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

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

## UE  5.3以上へアップデートする際の注意点
Unreal Engine 5.3から、`UAssets`の扱いに関するEpicによる破壊的変更が導入されており、`.skel`、`.json`、`.atlas`ファイルが拡張子の前に同じ名前を共有することができなくなってしまいました。例えば、`skeleton.skel`と`skeleton.atlas`があるとうまくいかず、`skeleton-data.skel`と`skeleton.atlas`のようになっていればうまくいきます。

Unreal Engineバージョン5.3より以前に作成されたプロジェクトの場合、残念ながら既にインポート済みのアセットを自動的にアップグレードさせることができません。そのため、もしそのようなプロジェクトをUnreal Engine 5.3以上にアップグレードすると、Epicによって導入されたこのリグレッションの影響でコンテンツブラウザがそれらのインポート済みのスケルトンデータ及びアトラスリソースを表示しなくなってしまいます。プロジェクトをUnreal Engine 5.3以上にアップグレードするには、全てのスケルトンデータと.atlasファイルの名前変更、再インポート、再紐付けを手動で行ってください。

当社は既に、Unreal Engine 5.3のリリース後すぐにEpicにバグ報告を行っていますが、残念ながら現在のところ返答がありません。そのため、このリグレッションは修正されず、そのまま今後も制限として残り、上記の回避策が必要になる可能性があると見ています。

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

Spineランタイムのアーキテクチャの詳細については、[Spineランタイムガイド](/spine-runtimes-guide)をご覧ください。

## アセットのマネージメント
### Unreal Engine用にエクスポートするには
![](/img/spine-runtimes-guide/spine-ue/export.png)
以下の実行方法については、Spineユーザーガイド内で紹介されています :

1. [スケルトン＆アニメーションデータのエクスポート](/spine-export)
2. [スケルトンの画像を含むテクスチャアトラスのエクスポート](/spine-texture-packer)

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

![](/img/spine-runtimes-guide/spine-ue/exported-files.png)

1. `skeleton-name.json`または`skeleton-name.skel`：　これはスケルトンとアニメーションのデータを含んでいます。
2. `skeleton-name.atlas`：　これはテクスチャアトラスの情報を含んでいます。
3. １つまたは複数の`.png`ファイル：　これはテクスチャアトラスの各ページで、スケルトンが使用するイメージを含んでいます。

**各アセットファイルが拡張子前に同じ名前を共有していない**ことを確認してください。例えば:

```
skeleton.skel
skeleton.atlas
```

このように、2つのファイルが同じ名前`skeleton`を共有しているとうまくいきません。代わりに、以下のように名前を変更してください:

```
skeleton-data.skel
skeleton.atlas
```

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

> **注意:**　現在のところ、spine-ueランタイムは、乗算済みアルファ(pre-multiplied alpha)を使用してエクスポートされたアトラスをサポートしていないので注意してください。

### Unreal Engineへのインポート
![](/img/spine-runtimes-guide/spine-ue/import-general.png)
1. Unreal Engineエディタでご自身のUnreal Engineプロジェクトを開いてください。
2. コンテンツブラウザの`Import`をクリックしてください。
3. Spineエディタからエクスポートした`.json`または`.skel`ファイル、および`.atlas`ファイルを選択してください。

アセット インポーターは、スケルトン データとテクスチャ アトラス用の Unreal Engine アセットを自動的に作成します。

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

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

![](/img/spine-runtimes-guide/spine-ue/imported-files.png)

### Spineアセットの更新
開発中にSpineのスケルトンデータやテクスチャアトラスファイルを更新したい時は、単純にSpineから再エクスポートを行なって、これらのソースファイル（`.json`、`.skel`、`.atlas.txt`、`.png`）を上書きするだけで更新できます。

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

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

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

![](/img/spine-runtimes-guide/spine-ue/skeletondataasset.png)

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

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

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

![](/img/blog/Unreal-Engine-4-quality-of-life-improvements/details-view.png)

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

![](/img/spine-runtimes-guide/spine-ue/textureatlasasset.png)

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

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

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

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

1. 前述のように、スケルトンデータとテクスチャアトラスをインポートします。
2. レベルに空のアクタを作成します。
3. 作成したアクタの詳細パネルに`Spine Skeleton Animation`コンポーネントを追加し、スケルトンデータとテクスチャアトラスプロパティをアセットに設定します。
![](/img/spine-runtimes-guide/spine-ue/addanimationcomponent.png)
5. アクタに`Spine Skeleton Renderer Component`を追加します。
![](/img/spine-runtimes-guide/spine-ue/addrenderercomponent.png)

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

> **補足:**　エディタでスケルトンをレンダリングするには、ビューポートでRealtime(リアルタイム)モードをオンにしてください。
![](/img/spine-runtimes-guide/spine-ue/realtimemode.png)

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

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

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

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

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

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

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

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

##### **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`デリゲートへのバインディングも同様に動作します。

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

1. ブループリントエディタでブループリントを開きます。
2. Componentsウィンドウで、Skeletonコンポーネントを選択します。
![](/img/spine-runtimes-guide/spine-ue/selectskeletoncomponent.png)
3. Skeletonコンポーネントの詳細パネルで、`Before Update World Transorm`または`After Update World Transform`の`+`をクリックします。
![](/img/spine-runtimes-guide/spine-ue/addbeforeupdateworldevent.png)
4. 他のブループリントノードをイベントの実行ピン(Exec)に接続し、カスタムアップデートロジックを実装してください。
![](/img/spine-runtimes-guide/spine-ue/beforeupdatenode.png)

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

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

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

##### **Blueprint**
![](/img/spine-runtimes-guide/spine-ue/setskin.png)

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

##### **C++**
```
bool success = skeletonComponent->SetAttachment(FString(TEXT("slotName")), FString(TEXT("attachmentName"));
```

##### **ブループリント**
![](/img/spine-runtimes-guide/spine-ue/setattachment.png)

#### セットアップポーズへのリセット
[プロシージャルアニメーション](/spine-runtime-skeletons#プロシージャルアニメーション)では、ボーンやスロットをセットアップのポーズに戻すことが必要な場合があります。

##### **C++**
```
skeletonComponent->SetToSetupPose();
skeletonComponent->SetBonesToSetupPose();
skeletonComponent->SetSlotsToSetupPose();
```

##### **ブループリント**
![](/img/spine-runtimes-guide/spine-ue/setsetuppose.png)

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

##### **C++**
```
bool isFlippedX = skeletonComponent->GetScaleX() < 1;
skeletonComponent->SetScaleX(-1);
bool isFlippedY = skeletonComponent->GetScaleY() < 1;
skeletonComponent->SetScaleY(-1);
```

##### **ブループリント**
![](/img/spine-runtimes-guide/spine-ue/flip.png)

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

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

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

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

##### **C++**
```
FTransform boneWorldTransform = skeletonComponent->GetBoneWorldTransform(FString(TEXT("boneName"));
skeletonComponent->SetBoneWorldPosition(FString(TEXT("boneName"), FVector(x, y, z));
```

##### **ブループリント**
![](/img/spine-runtimes-guide/spine-ue/worldtransform.png)



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

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

#### ライフサイクル
Skeleton Animationコンポーネントは、`UActorComponent::Tick()`メソッドを実装しています。このメソッドでは、デルタタイムに基づいて基礎となる[AnimationState](/spine-applying-animations#AnimationState-API)を更新し、その`AnimationState`をスケルトンに適用し、スケルトンのすべてのボーンのワールドトランスフォームを更新します。

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

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

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

##### **C++**
```
float timeScale = animationComponent->GetTimeScale();
animationComponent->SetTimeScale(0.5);
```

##### **ブループリント**
![](/img/spine-runtimes-guide/spine-ue/timescale.png)

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

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

![](/img/spine-runtimes-guide/spine-ue/setanimationnode.png)

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

##### **C++**
```
UTrackEntry* entry = animationComponent->AddAnimation(trackIndex, FString(TEXT("run")), true, 2);
```

##### **ブループリント**
![](/img/spine-runtimes-guide/spine-ue/addanimationnode.png)

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

##### **C++**
```
UTrackEntry* entry = animationComponent->SetEmptyAnimation(trackIndex, mixDuration);
entry = animationComponent->AddEmptyAnimation(trackIndex, mixDuration, delay);
animationComponent->ClearTrack(trackIndex);
animationComponent->ClearTracks();
```

##### **ブループリント**
![](/img/spine-runtimes-guide/spine-ue/cleartrack.png)

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

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

##### **C++**
```
UTrackEntry* entry = ...
entry->SetEventThreshold(2);
float trackEnd = entry->GetTrackEnd();
```

##### **ブループリント**
![](/img/spine-runtimes-guide/spine-ue/trackentry.png)

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

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

Skeleton Animationコンポーネントは、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 ...
}
```

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

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

UTrackEntry* entry = ...
animationComponet->AnimationEvent.AddDynamic(this, &MyClass::UserDefinedEvent);
```

##### **ブループリント**
SkeletonAnimationコンポーネントの`AnimationState`イベントにバインドするには:

![](/img/spine-runtimes-guide/spine-ue/listenercomponent.png)

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

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

![](/img/spine-runtimes-guide/spine-ue/listenertrackentry.png)

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

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

![](/img/blog/Unreal-Engine-4-quality-of-life-improvements/preview.gif)

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

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

#### マテリアル
![](/img/spine-runtimes-guide/spine-ue/materials.png)

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

すべてのSkeleton Rendererコンポーネントが使用するマテリアルを変更したい場合は、プラグインのデフォルトマテリアルを変更してください。

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

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

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

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

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

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

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

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

UMG UI に Spine スケルトンを追加するには、まず新しい[Widget ブループリント](https://docs.unrealengine.com/ja/InteractiveExperiences/UMG/UserGuide/WidgetBlueprints/)を作成します。ブループリントを開いて、パレットから Spine Widget を追加します。

![](/img/spine-runtimes-guide/spine-ue/ui-palette.png)

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

![](/img/spine-runtimes-guide/spine-ue/spine-widget.png)

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

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

![](/img/spine-runtimes-guide/spine-ue/spine-widget-blueprint.png)

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

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

![](/img/spine-runtimes-guide/spine-ue/widget-level-blueprint.png)

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

### モーションブラーのポストプロセッシングについて
spine-ueのデフォルトマテリアルは、Unreal Engineでサポートされている[Translucent Blend モード](https://docs.unrealengine.com/4.26/ja/RenderingAndGraphics/Materials/MaterialProperties/BlendModes/)を使用しています。この Blend モードをモーションブラーのポストプロセッシングで使用するには、マテリアルの詳細で`OutputVelocity`オプションを有効にしてください。