このページでは「SS5Player For Unreal Engine 4」（GitHub）を導入し、SpriteStudioで作成したアニメーションをUnreal Engineに表示する方法を解説します。
詳しい導入方法はヒストリア様にてご用意いただいておりますが、本ページではUnreal Engine初心者向けに、よりかみ砕いた内容でご紹介いたします。
なお、SpriteStudioのバージョンはVersion 5.7.0、Unreal Engineは4.12を利用しています。
SpriteStudio Ver.6で作成したデータをSS5Player for Unreal Engine 4でインポートすることはできません。
SS6Player for Unreal Engine 4をご利用ください。
- 事前準備
- プロジェクトにSS5Pのプラグインを追加する
- sspj(プロジェクトファイル)をインポートする
- sspjを配置する
- ブループリントから配置する
- UMG上にsspjをレイアウトして使用する
- sspjの更新方法
事前準備
アニメーションを作成する前に「互換性」を確認する
SpriteStudioでアニメーションの作成を始める前に、使用するアトリビュートをUnreal Engine 4でも再現することができるもののみに制限する必要があります。
「プロジェクトの設定」の「互換性」で「SS5P for Unreal Engine 4 v1.1.2」を選択します。
これにより、Unreal Engine 4で再現できるアトリビュートのみに制限されますので、表示ができない等の事故を防ぐことができます。
必ず「互換性」を設定してから、アニメーションを作成してください。
Unreal Engine 4をインストールする
まだUnreal Engine 4をパソコンにインストールしていない場合、Unreal Engine 4のサイトからインストールを行ってください。
Unreal Engine 4のインストール方法については公式サイトの「Unreal Engine をインストールする」をご覧ください。
GitHubからSS5Player for UnrealEngine 4をダウンロードする
GitHubからSS5Player For Unreal Engine 4をダウンロードします。
GitHubを活用している方はCloneにて取得いただけます。
本ページではGitHubを使わずにZIPをダウンロードして導入する方法をご紹介します。
1.まずはSS5Player For Unreal Engine 4のGitHubにアクセスします。
2.「Clone or download」という緑色のボタンをクリックします。
クリックするとダイアログが表示されるため、ここで「Download ZIP」を選択してください。
3.SS5PlayerForUnrealEngine4-master.zipがダウンロードされますので、データを展開してください。
SS5PlayerForUnreal Engine 4のシェーダファイルをUnreal Engine 4のフォルダにコピーする
1.SS5PlayerForUnrealEngine4-master.zipを展開すると、以下画像のようなデータが含まれたフォルダが展開されます。
2.「SsOffScreenShader.usf」をUnreal Engine 4のフォルダにコピーします。
「SsOffScreenShader.usf」の格納されているフォルダ
SsPlayerExamples/Plugins/SpriteStudio5/Shaders
コピー先のフォルダ
※xx.xxの箇所にはインストールしたUnreal Engineのバージョンが入ります。
Unreal Engineのバージョンが4.12の場合は「4.12」となります。
※初期設定どおりの場合、下記のフォルダになります。Windowsの場合、Program Files (x86)に含まれている場合もございます。
| Windows |
C:¥Program Files¥Epic Games¥xx.xx¥Engine¥Shaders |
| Mac | /Users/Shared/UnrealEngine/xx.xx/Engine/Shaders |
これで準備は完了です。
サンプルプロジェクトを起動してみる
Unreal Engine 4をインストールした環境で「SsPlayerExamples.uproject」をダブルクリックすると、SS5Player For Unreal Engine 4を使用してsspjが組み込まれたプロジェクトを確認することができます。
プロジェクトにSS5Pのプラグインを追加する
1.Unreal Engine 4を起動し、新規プロジェクトを作成します。
2.作成が完了したら、一旦プロジェクトを閉じます。
3.指定した場所にプロジェクトフォルダが出来ているので、先程SS5PlayerForUnrealEngine4-master.zipを展開したフォルダに格納されている「Plugins」フォルダを、作成したプロジェクトフォルダにコピーします。
4.再度プロジェクトを起動し、「Plugins」を確認します。
Unreal Engine 4の「編集」メニューの中にある「Plugins」をクリックします。
5.プラグイン一覧の中に「SpriteStudio5」が追加されています。
6.「SpriteStudio5」を選択し、「Enabled」にチェックが入っていれば、SS5Player For Unreal Engine 4が使用できます。
sspj(プロジェクトファイル)をインポートする
Unreal Engine 4にsspj(プロジェクトファイル)をインポートし、アニメーションデータをUnreal Engine 4上で再生します。
sspjをインポートする
「インポート」ボタンからインポートする
1.コンテンツブラウザの「インポート」をクリックします。
2.エクスプローラが表示されるため、インポートしたいsspjを選択します。
3.無事インポートされるとコンテンツブラウザにSSProjectが追加されます。
コンテンツブラウザにsspjをドラッグ＆ドロップする
コンテンツブラウザに直接sspjをドラッグ＆ドロップしても、インポートを行うことができます。
ssae(アニメーションファイル)をビューアーで確認する
1.コンテンツブラウザ上でSSProjectをダブルクリックすると、アニメーションデータを確認、設定できるビューアが開きます。
2.ビューアー上部の「Animepack」のプルダウンボックスからsspjに格納されているssae(アニメーションファイル)と、そのssaeに属するアニメーションデータを選択することができます。
ビューア―のウィンドウサイズが小さい場合は「≫」箇所をクリックすると、同様の操作を行うことが可能です。
|
3.Animepackのプルダウンボックスでssaeを選択 |
 |
| 4.Animationのプルダウンボックスからアニメーションデータを選択 |  |
5.無事再生を確認したら、sspjのインポートは完了です。
sspjを配置する
sspjを配置し、実際にゲームに組み込みます。
ビューポートにドラッグ&ドロップする
1.コンテンツブラウザに追加された「Ssproject」をビューポート上にドラッグ&ドロップします。
これだけで配置は完了です。
再生するアニメーションデータを変更する
再生するssaeやアニメーションデータを変更したい場合は、「詳細（Details）」ウィンドウの「Sprite Studio Play Settings」の「Auto Play Anim Pack Name」でssaeを、「Auto Play Animation Name」でアニメーションデータを切り替えることができます。
「Auto Play Anim Pack Index」、「Auto Play Animation Index」の上でクリックしながらカーソルを左右に移動させても切り替えが可能です。
ブループリントから配置する
ブループリントクラスを利用してアニメーションデータを配置します。
|
1.コンテンツブラウザ上で右クリックをし、コンテキストメニューを表示します。 コンテキストメニューから「ブループリントクラス」を選択します。 インポートしているコンテンツ上で右クリックをしてもブループリントを作成できないため、何も表示されていないところで右クリックをしてください。 |
 |
| 2.コンテキストメニューから「ブループリントクラス」を選択してください。 | |
|
3.親クラスを選択するダイアログが表示されるため、「すべてのクラス」から「SsPlayerActor」を選択します。 「すべてのクラス」の中にある「Object」を選択し、展開してください。 |
 |
|
4.「Object」の中にある「Actor」を選択し、展開します。 リストをスクロールし、「SsPlayerActor」を選択し、「選択」ボタンをクリックします。 |
 |
|
5.これでブループリントが出来上がりました。 ここでは「test」という名前をつけました。 |
 |
できあがったブループリントをダブルクリックすると、以下のようなウィンドウが開きます。
このウィンドウで設定を行います。
SsProjectアセットをセットし、アニメーションを設定する
| 1.コンポーネントの箇所の「SsPlayerComponent」を選択してください。 |  |
| 2.「SpriteStudio Asset」の箇所にあるプルダウンリストから、インポートしたsspjを選択します。 |  |
| 3.アニメーションが表示されます。 |  |
|
4.「SpriteStudio Play Settings」で再生させるssaeやアニメーションデータを設定します。 |
 |
これでビューポート上に指定したアニメーションが表示されれば設定は完了です。
ウィンドウを閉じ、コンテンツブラウザから作成したブループリントをビューポート上にドラッグ＆ドロップすれば配置することができます。
- SsPlayerコンポーネント及びウィジェットのプロパティ機能についての詳細はこちら（ヒストリア様のリファレンス）
- SsPlayerコンポーネント/ウィジェットの、BluePrint関数についての詳細はこちら（ヒストリア様のリファレンス）
UMG上にsspjをレイアウトして使用する
ウィジェットブループリントを作成し、UMG上にアニメーションデータをレイアウトして使用することができます。
|
1.コンテンツブラウザ上で右クリックをし、コンテキストメニューを表示します。 コンテキストメニューの「ユーザーインターフェイス」から「ウィジェットブループリント」を選択してください。 インポートしているコンテンツ上で右クリックをしても作成できないため、何も表示されていないところで右クリックをしてください。 |
 |
|
2.「ウィジェットブループリント」ができあがりました。 ダブルクリックすることで編集ウィンドウが表示されます。 |
 |
ウィジェットブループリントをダブルクリックすると、下図のように、編集するためのウィンドウが表示されます。
「Ss Player Widget」をセットしてアニメーションを設定
| 1.まずはパレットから「Ss Player Widget」を選択し、ドラッグして配置します。 |  |
|
2.配置をしたら、どのsspjを配置するかを「SpriteStudio Asset」で選択します。 プルダウンボックスをクリックして、インポートしたsspjを選択してください。 |
 |
|
3.「SpriteStudio Play Settings」でssaeとアニメーションデータを設定してください。 ここで設定したアニメーションデータが初期アニメーションとなります。 |
 |
| 4.これでアニメーションの再生が開始されます。 |  |
CanvasPanelやGridPanel等のように、他のウィジェットを「Ss Player Widget」の子にすることが出来ます。
また、子ウィジェットのSlotの「Part Name」にSpriteStudioのアニメーションデータ上のパーツ名を指定すると、子ウィジェットをそのパーツにアタッチさせることが出来ます。
※頂点変形機能への対応は不完全です。最終的な形状が平行四辺形になる形であればアタッチが可能です。
プロパティやブループリントからの使用方法はSsPlayerComponentとほぼ同様ですが、UMGで使用する際は、αブレンド方法はミックスのみの対応となります。
- SsPlayerコンポーネント及びウィジェットのプロパティ機能についての詳細はこちら（ヒストリア様のリファレンス）
- SsPlayerコンポーネント/ウィジェットの、BluePrint関数についての詳細はこちら（ヒストリア様のリファレンス）
sspjの更新方法
sspjを更新した際は、SsProjectアセットを「Reimport」をすることで、sspjの再インポートを行い、更新を反映することが可能です。
|
1.コンテンツブラウザ上で、更新したいSsProjectアセットを右クリックをし、コンテキストメニューから「Reimport」を選択します。 |
 |
|
2.SsProjectアセットの元になっているsspjの置いている場所が変更されていた場合、エクスプローラで改めてsspjを選択してください。 sspjの場所が変更されていない場合、この手順は省略されます。 |
 |
|
3.ダイアログが表示されますので、問題なければ「はい」を選択してください。 再インポートが成功すれば、SsProjectの更新は完了です。 |
 |