【Ver.5】Unityにアニメーションを表示する

このページでは「SS5PlayerForUnity」（GitHub）を導入し、SpriteStudioで作成したアニメーションをUnityに表示する方法を解説します。

なお、SpriteStudioのバージョンはVersion 5.7.0、Unityは5.3を利用しています。

SpriteStudio Ver.6で作成したデータをSS5Player For Unityでインポートすることはできません。
SS6Player For Unityをご利用ください。

事前準備
sspjをUnityに取り込む
アニメーションをシーンに配置する
- 配置方法
- アニメーションデータを切り替える
配置したアニメーションが表示されない場合の対処法
エフェクトの色合いが薄くなってしまう場合の対処法
- シェーダーの変更方法
カラーブレンド使用のパーツが正常に表示されない場合の対処法
- HDRをOFFにする
- SpriteStudioのデータを修正する
関連ページ

事前準備

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

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

「プロジェクトの設定」の「互換性」で「SS5P for Unity v1.4」を選択します。
これにより、Unityで再現できるアトリビュートのみに制限されますので、表示ができない等の事故を防ぐことができます。

ss5P_unity_01

必ず「互換性」を設定してから、アニメーションを作成してください。

Unityをインストールし、新たなプロジェクトを作成する

まだUnityをパソコンにインストールしていない場合、Unityのサイトからダウンロードし、インストールを行ってください。

Unityをインストールしたら、プロジェクトを作成してください。
プロジェクトから「SS5Player for Unity」をインポートするためです。

SS5Player for Unityを導入する

SpriteStudioでアニメーションを作成し、Unityのインストールも完了したら、Unityに「SS5Player For Unity」を導入します。
方法は2種類あります。

AssetStoreからインポートを行う
パッケージをダウンロードしてから、Unityにインポートする

お使いのSpriteStudioのバージョンがVersion 5.7の場合は、SS5Player for Unity Ver 1.4以降のバージョンをご利用ください。

AssetStoreからインポートを行う

Unityから直接SS5Player For Unityをインポートすることができます。

1.Unityを起動し、「Window」の「AssetStore」を選択します。
2.AssetStore上部の検索バーに「SpriteStudio」と入力して検索します。するとSS5Player For Unityが結果に表示されるので、アイコンをクリックしてください。
3.SS5Player For Unityのダウンロードページが表示されますので、「ダウンロード」をクリックしてください。
4.インポートするパッケージを選択するダイアログが表示されます。ここでは特に変更せずに「Iｍport」を選択します。不要なパッケージやデータがある場合はここでチェックボックスを外してください。
5.プロジェクトウィンドウのAssetに「SpriteStudio」が追加されれば、SS5Player For Unityのインポートは完了です。

パッケージをダウンロードしてから、Unityにインポートする

SS5Player For UnityをGitHubでダウンロードしてから、Unityにインポートすることも可能です。

1.SS5Player For UnityをGitHubからダウンロードします。サイドメニューの「ダウンロード」→「安定版」からダウンロードしてください。
2.Unityの「Asset」メニューから「Import Package」→「Custom Package」を選択します。
3.エクスプローラが開きますので、先ほどダウンロードした「SS5PlayerForUnity_v1.4.0.Unitypackage」を選択し、開きます。
4.インポートするパッケージを選択するダイアログが表示されます。ここでは特に変更せずに「Iｍport」を選択します。不要なパッケージやデータがある場合はここでチェックボックスを外してください。
5.プロジェクトウィンドウのAssetに「SpriteStudio」が追加されれば、SS5Player For Unityのインポートは完了です。

sspjをUnityに取り込む

SS5Player for Unityのインポートが完了したら、SpriteStudioで作成したsspj(プロジェクトファイル)をUnityに取り込みます。

sspjをUnityにインポートする

1.プロジェクトウィンドウのAssets以下に、新たにフォルダを作成し、そこにsspjをインポートします。「Assets」フォルダを選択し、右クリックでコンテキストメニューを開きます。「Create」→「Folder」を選択し、フォルダを作成します。
2.フォルダを作成した直後はこのようになります。今回は「animation」という名前のフォルダを作成しました。
3.フォルダを選択します。画像のようにフォルダが表示されている箇所で選択するようにしてください。
4.フォルダが選択されているか確認します。フォルダが選択されると、プロジェクトウィンドウの下部分にフォルダ名が表示されます。また、インスペクターウィンドウにフォルダが表示されます。
5.作成したフォルダを選択した状態で「Tools」→「SpriteStudio」→「Import SS5(sspj)」を選択します。
6.「OPTPiX SpriteStudio Import-Settings」というダイアログが表示されます。「Import」をクリックするとsspjのインポートを開始します。 ▲をクリックするとインポート時のオプションが開閉します。「Default Configuration」をクリックすると設定を初期設定に戻します。
7.インポートが無事完了すると、選択したフォルダの中にデータが追加されます。この中にsspjを基に作成されたプレハブが格納されています。

インポート時にエラーが発生してしまう

インポート時に下図のようなエラー(Import Interrupted! Check Error on Console.)が発生してしまう場合、「フォルダが選択されていない」可能性があります。

UnityImportError

インポート手順でも記載しましたが、プロジェクトウィンドウのツリーで選択しても、フォルダは選択されたことになりません。

ss5P_unity_030
プロジェクトウィンドウの右ペイン（フォルダアイコンが並んでいるところ）で、フォルダを選択することで、「フォルダが選択された」状態になります。
インポートする際には、必ずプロジェクトウィンドウの下部バーの表示か、インスペクターウィンドウの表示を確認し、インポートしたいフォルダが表示されているかを確認してください。

ss5P_unity_031

アニメーションをシーンに配置する

sspjをインポートしたら、シーンに配置します。
今回はSpriteStudioアセットに内包している２Dカメラを使って配置をしてみます。

配置方法

1.SpriteStudioに内包されている「Camera」のフォルダにあるカメラプレハブを使用します。「Camera２D Pixel(720ｐ)」を選択します。
2.ヒエラルキーウィンドウにドラッグします。これでカメラの準備は完了です。 ▼をクリックして「View」を展開しておきます。
3.先ほどインポートしたsspjのフォルダの中にある、ssaeのプレハブを、カメラの「View」にドラッグします。
4.これでアニメーションのシーンへの配置は完了です。
5.配置したアニメが表示されない場合、マウスホイールでシーンウィンドウの拡縮率を変更すると、配置されたアニメーションが見つかることがあります。（表示の拡大率が大きくなっており、見当たらない場合があります）また、カメラを選択すると表示されるカメラプレビューを確認して、位置を調整してください。
6. シーンウィンドウの上部にあるをクリックすると、アニメーションの再生を開始します。再生時の表示はカメラプレビューの表示に準じます。

アニメーションデータを切り替える

再生されるアニメーションデータの切り替えはインスペクターウィンドウから行うことができます。

1.ヒエラルキーウィンドウでssaeを選択します。
2.インスペクターウィンドウの「Intial/Preview Play Setting」を展開し、「Animation Name」のプルダウンから、設定したいアニメーションデータを選択してください。
3.セットすることで再生するアニメーションがデータが変更されました。

配置したアニメーションが表示されない場合の対処法

配置したアニメーションが表示されない場合、以下の設定をお確かめください。

ヒエラルキーウィンドウに「Camera2D Pixel (720p)」もしくは「Camera2D Pixel (1080p)」が配置されているか確認

ヒエラルキーウィンドウに「Camera2D Pixel (720p)」もしくは「Camera2D Pixel (1080p)」が配置されているか確認してください。

また、ヒエラルキーウィンドウに配置したCamera2Dのツリーを開いた下にある「View」の下に、sspjをインポートしたデータにある名称末尾「_Control」のオブジェクトが配置されているか確認してください。

ヒエラルキーウィンドウに配置した名称末尾「_Control」が表示領域外になっていないか確認

表示領域の外にアニメーションが配置されている可能性があります。

「_Control」データのインスペクターウィンドウのTransform 、Positionを X=0, Y=0, Z=0 に移動する
「_Control」データのインスペクターウィンドウのTransform 、Scaleを X=1, Y=1, Z=1 に変更する

Sceneビューで表示されて、Gameビューでは表示されないというケースでないか確認

Sceneに表示されている場合、別のカメラと干渉している可能性があります。
もしデフォルトの「Main Camera」が存在している場合、削除するか、カメラ設定を変更してください。

Camera2DのNearの設定を確認する

ヒエラルキーウィンドウに配置したCamera2DのインスペクターウィンドウのCamera に設定されるNearが 0 の場合、手前にデータが配置されているとNearクリップに引っ掛かり表示されなくなります。
Nearを-200等に設定するなどカメラ位置の変更を行ってみてください。

エフェクトの色合いが薄くなってしまう場合の対処法

SS5P for Unity v1.4で、ssee(エフェクトファイル)を使用したファイルをインポート、表示した際に、SpriteStudio上で見るよりも、色合いが薄くなってしまうことがあります。
これは、シェーダの計算式がUnityとSpriteStudioで異なるため、発生する現象です。

色合いが薄まってしまう場合、Unity上で表示するシェーダを「ADD」から「ADD2」に変更する事で、改善する可能性があります。

下の図は「エフェクト機能を使ったパーティクルエフェクトのサンプル」の「e039.ssae」を比較した画像です。
「ADD2」のほうがSpriteStudioに近い表示になっています。

unity_effect_02

シェーダの変更方法

Unityでのシェーダの変更方法は「プロジェクトウィンドウ」から変更するパターンと、「ヒエラルキーウィンドウ」から変更するパターンがあります。

プロジェクトウィンドウから変更する

プロジェクトウィンドウから変更する場合、影響範囲は「変更後にヒエラルキーウィンドウに配置されるPrefab」です。
すでにヒエラルキーウィンドウに配置されているPrefabに対しては反映しません。
エフェクトの初期設定を変更したい場合、こちらの方法が有効です。

プロジェクトウィンドウで、インポートしたsspjを展開し、「Prefab_Effect」を選択します。
シェーダを変更するエフェクトを選択します。
インスペクターウィンドウで「Applied-Material Setting」を展開し、「ADD-Shader」のプルダウンで「ADD2（Straight Alpha）」を選択してください。

ヒエラルキーウィンドウから変更する

※ SS5Player for Unity v1.4以降対応になります

ヒエラルキーウィンドウから変更する場合、影響範囲は「ヒエラルキーウィンドウに配置した、現在選択しているPrefab」です。
選択しているPrefabにのみ、変更が反映されるので、限定的に変更を行いたい場合この方法が有効です。

ヒエラルキーウィンドウで配置したPrefabを展開し、変更したいエフェクトのPrefabを選択します。
インスペクターウィンドウで「Applied-Material Setting」を選択し、展開します。
「ADD-Shader」のプルダウンで「ADD2（Straight Alpha）」を選択してください。

カラーブレンド使用のパーツが正常に表示されない場合の対処法

SS5P for Unity v1.5で再生を行うと、αブレンド方法とカラーブレンドの組み合わせによって、意図しない表示になってしまうことがあります。

これは、UnityのHDRの処理により発生していると考えられます。
HDRはUnity 5.6以降、デフォルトでONになっている機能です。

こちらの現象を回避するためには、以下いずれかの方法をお試しください。

HDRをOFFにする
SpriteStudioのデータを修正する

HDRをOFFにする

Unity のヒエラルキーウィンドウにあるCameraを選択します。
インスペクターウィンドウのCameraを開きます
Allow HDR のチェックを外してください

SpriteStudioのデータを修正する

Unity上で意図しない表示になってしまうケースは、αブレンド方法で「乗算」「加算」「減算」のいずれかを選択した上で、カラーブレンドのミックス方法で「ミックス」を選択した際に確認されています。

以下、いずれかの方法をご検討・お試しください。

αブレンド方法を「ミックス」に変更
カラーブレンドのミックス方法を変更

1.プロジェクトウィンドウのAssets以下に、新たにフォルダを作成し、そこにsspjをインポートします。「Assets」フォルダを選択し、右クリックでコンテキストメニューを開きます。「Create」→「Folder」を選択し、フォルダを作成します。
2.フォルダを作成した直後はこのようになります。今回は「animation」という名前のフォルダを作成しました。
3.フォルダを選択します。画像のようにフォルダが表示されている箇所で選択するようにしてください。
4.フォルダが選択されているか確認します。フォルダが選択されると、プロジェクトウィンドウの下部分にフォルダ名が表示されます。また、インスペクターウィンドウにフォルダが表示されます。
5.作成したフォルダを選択した状態で「Tools」→「SpriteStudio」→「Import SS5(sspj)」を選択します。
6.「OPTPiX SpriteStudio Import-Settings」というダイアログが表示されます。「Import」をクリックするとsspjのインポートを開始します。 ▲をクリックするとインポート時のオプションが開閉します。「Default Configuration」をクリックすると設定を初期設定に戻します。
7.インポートが無事完了すると、選択したフォルダの中にデータが追加されます。この中にsspjを基に作成されたプレハブが格納されています。

1.SpriteStudioに内包されている「Camera」のフォルダにあるカメラプレハブを使用します。「Camera２D Pixel(720ｐ)」を選択します。
2.ヒエラルキーウィンドウにドラッグします。これでカメラの準備は完了です。 ▼をクリックして「View」を展開しておきます。
3.先ほどインポートしたsspjのフォルダの中にある、ssaeのプレハブを、カメラの「View」にドラッグします。
4.これでアニメーションのシーンへの配置は完了です。
5.配置したアニメが表示されない場合、マウスホイールでシーンウィンドウの拡縮率を変更すると、配置されたアニメーションが見つかることがあります。（表示の拡大率が大きくなっており、見当たらない場合があります）また、カメラを選択すると表示されるカメラプレビューを確認して、位置を調整してください。
6. シーンウィンドウの上部にあるをクリックすると、アニメーションの再生を開始します。再生時の表示はカメラプレビューの表示に準じます。

目次