Unityにアニメーションを表示する

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

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

事前準備

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

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種類あります。

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

AssetStoreからインポートを行う

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

1.Unityを起動し、「Window」の「AssetStore」を選択します。 ss5P_unity_02 

2.AssetStore上部の検索バーに「SpriteStudio」と入力して検索します。

するとSS5Player For Unityが結果に表示されるので、アイコンをクリックしてください。

 ss5P_unity_03
3.SS5Player For Unityのダウンロードページが表示されますので、「ダウンロード」をクリックしてください。  ss5P_unity_04

4.インポートするパッケージを選択するダイアログが表示されます。
ここでは特に変更せずに「Import」を選択します。

不要なパッケージやデータがある場合はここでチェックボックスを外してください。

 ss5P_unity_06
5.プロジェクトウィンドウのAssetに「SpriteStudio」が追加されれば、SS5Player For Unityのインポートは完了です。 ss5P_unity_010 

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

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

1.SS5Player For UnityをGitHubからダウンロードします。
サイドメニューの「ダウンロード」→「安定版」からダウンロードしてください。
ss5P_unity_034
2.Unityの「Asset」メニューから「Import Package」→「Custom Package」を選択します。 ss5P_unity_07
3.エクスプローラが開きますので、先ほどダウンロードした「SS5PlayerForUnity_v1.4.0.Unitypackage」を選択し、開きます。 ss5P_unity_032

4.インポートするパッケージを選択するダイアログが表示されます。
ここでは特に変更せずに「Import」を選択します。

不要なパッケージやデータがある場合はここでチェックボックスを外してください。

ss5P_unity_033

5.プロジェクトウィンドウのAssetに「SpriteStudio」が追加されれば、SS5Player For Unityのインポートは完了です。 ss5P_unity_010

sspjをUnityに取り込む

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

sspjをUnityにインポートする

1.プロジェクトウィンドウのAssets以下に、新たにフォルダを作成し、そこにsspjをインポートします。

「Assets」フォルダを選択し、右クリックでコンテキストメニューを開きます。

「Create」→「Folder」を選択し、フォルダを作成します。

ss5P_unity_012
2.フォルダを作成した直後はこのようになります。
今回は「animation」という名前のフォルダを作成しました。
ss5P_unity_017

3.フォルダを選択します。

画像のようにフォルダが表示されている箇所で選択するようにしてください。

ss5P_unity_018

4.フォルダが選択されているか確認します。

フォルダが選択されると、プロジェクトウィンドウの下部分にフォルダ名が表示されます。

また、インスペクターウィンドウにフォルダが表示されます。

ss5P_unity_031

5.作成したフォルダを選択した状態で
「Tools」→「SpriteStudio」→「Import SS5(sspj)」
を選択します。

ss5P_unity_013a

6.「OPTPiX SpriteStudio Import-Settings」というダイアログが表示されます。

「Import」をクリックするとsspjのインポートを開始します。

▲をクリックするとインポート時のオプションが開閉します。
「Default Configuration」をクリックすると設定を初期設定に戻します。

ss5P_unity_014

7.インポートが無事完了すると、選択したフォルダの中にデータが追加されます。

この中にsspjを基に作成されたプレハブが格納されています。

 ss5P_unity_019 ss5P_unity_020

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

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

UnityImportError

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

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

ss5P_unity_031 

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

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

配置方法

1.SpriteStudioに内包されている「Camera」のフォルダにあるカメラプレハブを使用します。

「Camera2D Pixel(720p)」を選択します。

ss5P_unity_021

2.ヒエラルキーウィンドウにドラッグします。
これでカメラの準備は完了です。

▼をクリックして「View」を展開しておきます。

ss5P_unity_022a
3.先ほどインポートしたsspjのフォルダの中にある、ssaeのプレハブを、カメラの「View」にドラッグします。 ss5P_unity_023a

4.これでアニメーションのシーンへの配置は完了です。

ss5P_unity_024

5.配置したアニメが表示されない場合、マウスホイールでシーンウィンドウの拡縮率を変更すると、配置されたアニメーションが見つかることがあります。
(表示の拡大率が大きくなっており、見当たらない場合があります)

また、カメラを選択すると表示されるカメラプレビューを確認して、位置を調整してください。

 ss5P_unity_027

6. シーンウィンドウの上部にあるss5P_unity_icon01をクリックすると、アニメーションの再生を開始します。

再生時の表示はカメラプレビューの表示に準じます。

ss5P_unity_035

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

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

1.ヒエラルキーウィンドウでssaeを選択します。 ss5P_unity_025

2.インスペクターウィンドウの「Intial/Preview Play Setting」を展開し、「Animation Name」のプルダウンから、設定したいアニメーションデータを選択してください。

ss5P_unity_028

3.セットすることで再生するアニメーションがデータが変更されました。

ss5P_unity_029

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

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

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

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

unity_effect_02

シェーダの変更方法

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

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

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

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

unity_effect_03

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

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

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

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

unity_effect_01