Unreal Engine 4での表示方法

SpriteStudio Ver.6で作成したデータをSS6Player for Unreal Engine 4で Unreal Engine 4 にインポートする方法を解説します。

本ページは以下のバージョンを使用して解説しています。

  • OPTPiX SpriteStudio：Version 6.1.1
  • SS6Player for Unreal Engine 4：Ver.1.1.3
  • Unreal Engine：4.19

目次

事前準備

アニメーションを作成する前に「互換性」を確認する

SS6PlayerforUnrealEngine4 Ver.1.2.0 では、マスク機能に対応しております。
SpriteStudio Ver.6.1.3では互換性に「SS6PlayerforUnrealEngine4 Ver.1.2.0」が追加されました。

最新の対応アトリビュートは「OPTPiX SpriteStudio 互換性の比較表」にて、ご確認ください。

SpriteStudioでアニメーションの作成を始める前に、使用するアトリビュートをUnreal Engine 4でも再現することができるもののみに制限する必要があります。

「プロジェクト設定」の「互換性」で 対応しているアトリビュートを選択します。
これにより、表示されるアトリビュートがUnreal Engine 4で再現できるアトリビュートのみに制限され、予期せぬ事故を防ぐことができます。必ず「互換性」を設定してから、アニメーションを作成してください。

最新のアトリビュート対応状況については「OPTPiX SpriteStudio 互換性の比較表」をご確認ください。

  • OPTPiX SpriteStudio 互換性の比較表
    SS6PlayerについてSpriteStudioの機能にどこまで対応しているのか一覧で確認できます。
    ※Google スプレッドシートへ遷移します。

また、使用可能機能につきましても制限があるケースがあります。詳細につきましてはGitHubのTIPS制限事項をご確認ください。

SS6Player for Unreal Engine 4 が更新され最新のアトリビュート対応した設定を使用する場合は、GitHubより最新版の設定ファイルをダウンロードください。
再生対象のプラットフォームへの追加は下記ページをご覧ください。

Unreal Engine 4をインストールする

まだ Unreal Engine 4 をパソコンにインストールしていない場合、Unreal Engine 4 のサイトからインストールを行ってください。

GitHubからSS6Player for UnrealEngine 4をダウンロードする

GitHubからSS6Player For Unreal Engine 4をダウンロードします。
GitHubを活用している方はCloneにて取得いただけます。
本ページではZIPをダウンロードして導入する方法をご紹介します。

1.まずはSS6Player for Unreal Engine 4 にアクセスします。
SS6Player for Unreal Engine 4

2.「Clone or download」という緑色のボタンをクリックします。
クリックするとダイアログが表示されるため、ここで「Download ZIP」を選択してください。

3.SS6PlayerForUnrealEngine4-master.zipがダウンロードされますので、データを展開してください。

サンプルプロジェクトを起動してみる

Unreal Engine 4をインストールした環境で「Ss6PlayerExamples.uproject」をダブルクリックすると、SS6Player For Unreal Engine 4を使用してsspjが組み込まれたプロジェクトを確認することができます。

このように表示されます。

 

プロジェクトにプラグインを追加する

プロジェクトにSS6Player for Unreal Engine 4 のプラグインを追加します。

1.Unreal Engine 4 を起動し、新規プロジェクトを作成します。
2.作成が完了したら、一旦プロジェクトを閉じます。
3.指定した場所にプロジェクトフォルダが出来ているので、先程SS6PlayerForUnrealEngine4-master.zipを展開したフォルダに格納されている「Ss6PlayerExamples/Plugins」のフォルダを、作成したプロジェクトフォルダにコピーします。
4.再度プロジェクトを起動し、「Plugins」を確認します。
Unreal Engine 4の「編集」メニューの中にある「Plugins」をクリックします。
5.プラグイン一覧の中に「SpriteStudio6」が追加されています。
6.「SpriteStudio6」を選択し、「Enabled」にチェックが入っていれば、SS6Player For Unreal Engine 4が使用できます。

sspj(プロジェクトファイル)をインポートする

Unreal Engine 4にsspj(プロジェクトファイル)をインポートし、アニメーションデータをUnreal Engine 4上で再生します。

sspjをインポートする

「インポート」ボタンからインポートをおこなう

1.コンテンツブラウザの「インポート」をクリックします。
2.エクスプローラが表示されるため、インポートしたいsspjを選択します。
3.無事インポートされるとコンテンツブラウザにSSProjectが追加されます。

コンテンツブラウザにsspjをドラッグ＆ドロップする

コンテンツブラウザに直接sspjをドラッグ＆ドロップしても、インポートを行うことができます。

ssae(アニメーションファイル)をビューアーで確認する

1.コンテンツブラウザ上でSSProjectをダブルクリックします。
2.アニメーションデータを確認、設定できるビューアが開きます。

3.ビューアー上部の「Animepack」のプルダウンボックスからsspjに格納されているssae(アニメーションファイル)が選択します。

4.Animationのプルダウンボックスからアニメーションデータを選択します。
ビューア―のウィンドウサイズが小さい場合は「≫」箇所をクリックすると、同様の操作を行うことが可能です。
5.無事再生を確認したら、sspjのインポートは完了です。

sspjを配置する

sspjを配置し、実際にゲームに組み込みます。

ビューポートにドラッグ&ドロップする

1.コンテンツブラウザに追加された「Ssproject」をビューポート上にドラッグ&ドロップします。

これだけで配置は完了です。
Ver.6 ではセットアップデータが表示されます。

再生するアニメーションデータを変更する

再生する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やアニメーションデータを設定します。

これでビューポート上に指定したアニメーションが表示されれば設定は完了です。
ウィンドウを閉じ、コンテンツブラウザから作成したブループリントをビューポート上にドラッグ＆ドロップすれば配置することができます。

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で使用する際は、αブレンド方法はミックスのみの対応となります。

sspjの更新方法

sspjを更新した際は、SsProjectアセットを「Reimport」をすることで、sspjの再インポートを行い、更新を反映することが可能です。

1.コンテンツブラウザ上で、更新したいSsProjectアセットを右クリックをし、コンテキストメニューから「Reimport」を選択します。

3.ダイアログが表示されますので、問題なければ「はい」を選択してください。

再インポートが成功すれば、SsProjectの更新は完了です。

sspjの場所がインポート時から変わっている場合

再インポート時に、もともとインポートした時からsspjの位置が変わっている場合は、確認ダイアログが表示される前にエクスプローラが表示されます。
改めてsspjを指定しなおしてください。

マスク機能を使用する

SS6Player for Unreal Engine 4 Ver.1.2.0はマスク機能に対応しました。
ただしRenderModeを「Off Screen Plane」に設定しないと正常に動作しません。

Off Screen Planeでは一旦オフスクリーンレンダリングし、そのレンダーターゲットを板ポリに貼り付けて描画します。

オフスクリーンレンダリングを行うため、アルファブレンドモードの Mul/Add/Sub には対応していません。全て Mix として描画されます。

マスクを使用する場合、描画モードをMIX以外使用しないようにご注意ください。

関連ページ

SS6Player for Unreal Engine 4
最新版、質問・要望は GitHubへ

Published : Edit : OPTPiX User Support