このページでは「Ss5Converter To SSAJSON」（GitHub）とサンプルデータを使い、SpriteStudioで作成したアニメーションをJSONに変換し、HTML5で表示を行います。
事前準備
アニメーションを作成する前に「互換性」を確認する
SpriteStudioでアニメーションの作成を始める前に、使用するアトリビュートをSs5Converter To SSAJSONで再現可能なもののみに制限する必要があります。
「プロジェクトの設定」ウィンドウの「互換性」で、以下の通り設定を行ってください。
チェックを入れる項目
- 親子の座標変換にマトリックスを使用しない（Ver4互換）
- エフェクト機能を使用する
※エフェクト機能を使用する場合のみチェックを入れてください。
「再生対象のプラットフォーム」の設定
「カスタム」を選択し、以下のアトリビュートのみチェックを入れてください。
- 参照セル
- X座標
- Y座標
- Z軸回転
- Xスケール
- Yスケール
- 不透明度
- 優先度
- 左右反転
- 上下反転
- 非表示
- インスタンス
- エフェクト
互換性で「SSP for HTML5」を選択すると、Ver.4互換機能に制限され、エフェクト、インスタンス機能は使用することができません。
Ss5Converter To SSAJSONを導入する
SpriteStudioでアニメーションを作成したら、「Ss5Converter To SSAJSON」をダウンロードします。
今回は「Clone or download」から「Download ZIP」をクリックし、ダウンロードする形で導入します。
「Ss5ConverterToSSAJSON-master.zip」がダウンロードされるので、解凍します。
「Ss5ConverterToSSAJSON-master」が展開されたら「Tools」の中の「Ss5ConverterToSSAJSON.zip」も解凍します。
これでSs5Converter To SSAJSONの準備は完了です。
sspjをJSONにコンバートする
Ss5Converter To SSAJSONを使って、作成したsspj(プロジェクトファイル)をコンバートします。
「Tools」で解凍した「Ss5Converter To SSAJSON」の中にある「Ss5ConverterGUI.exe」を選択します。
Ss5ConverterGUI.exeを開き、上部の空欄にsspjをドラッグ＆ドロップするか、「sspjを追加」ボタンをクリックし、コンバートするsspjを追加します。
「コンバート」をクリックすると、sspjのコンバートが完了します。
サンプルデータを使ってJSONをHTMLで表示する
作成したJSONをHTMLで読み込み、表示します。
このページでは格納されている「sample」フォルダを元に表示してみましょう。
sampleフォルダの構成は以下のようになっています。
- datas
- animetest.json
- animtest.png
- sspj（使用しません）
- json_view.html
- SsaPlayer.js
「json_view.html」をFirefoxで開くと、「datas」フォルダの中に格納している「animetest.json」を読み込み、ブラウザに表示されます。
準備したJSONを表示してみる
今回はsampleの「json_view.html」を流用して、変換したJSONをHTML5で表示します。
読み込むデータを格納する
- フォルダを新規作成します。
- 新規作成したフォルダ内に「datas」フォルダを作成します。
- 「datas」フォルダの中に、JSONを格納します。
- ssce(セルマップファイル)で使用した画像データを格納します。
JSONファイルを開き、”images”で指定している画像が同様のデータになります。 - JSONと画像データを格納したら「datas」内の準備は完了です。
例として、「logo」というフォルダを作り、SpriteStudioのスプラッシュアニメ（newsplash512）をHTML5で表示します。
「logo」フォルダに「datas」フォルダを作成し、その中にコンバートしたJSONファイルとpng画像を格納すると、下図のようになります。
SsaPlayer.jsとjson_view.htmlを準備する
- 「sample」フォルダにある「json_view.html」と「SsaPlayer.js」を、新規作成したフォルダにコピーします。
※「datas」フォルダの上の階層に格納します。 - 「json_view.html」をテキストエディタで開きます。
- $.getJSON(‘./datas/animetest.json‘, function (jsonData) {
の「animetest.json」の箇所を、「datas」フォルダに格納したJSONデータのファイル名に変更します。
- 「json_view.html」を保存し、準備は完了です。
「json_view.html」をFirefoxで開くと、指定したJSONがブラウザ上で表示されます。
Google Chromeで確認したい場合
Google Chromeはローカルファイルへのアクセスを禁止しているため、上記方法でJSONの表示を確認することができません。
お手数ですがFirefoxでご確認くださいますようお願いいたします。
Ss5Converter To SSAJSONのユーザーガイド
ここでは、Ss5Converter To SSAJSONの基本的な使い方を解説します。
| コンバートファイルリスト欄 |
JSONにコンバートするsspjファイルのリストを表示・追加する欄です。 |
|---|---|
| sspjを追加 |
コンバートリストに追加するsspjをエクスプローラ上で選択します。 |
| リストを保存する |
コンバートファイルリスト欄に追加されているファイル一覧を、txt形式で保存します。 |
| リストを読み込む | 「リストを保存する」で保存したtxtを読み込み、コンバートファイルリスト欄に反映します。 |
| リストのクリア | コンバートファイルリスト欄をクリアします。 |
| 1モーションを1ファイルで出力する |
チェックを入れると、ssaeに含まれているアニメーションデータごとにJSONファイルを出力します。 例えば、「test.ssae」の中に「１」「２」「３」というアニメーションデータが格納されている状態でこの機能にチェックを入れると
という3つのJSONファイルが出力されます。 |
| パーツが基準枠の外にある場合は出力しない |
基準枠の外に配置されているパーツを出力しません。 |
| 出力フォルダを指定する | 出力先のフォルダを指定してコンバートを行います。 チェックを入れると、「出力フォルダ選択」で出力先のフォルダを指定しないとコンバートが開始されません。 |
| カラーブレンド、パーツの頂点情報を出力する | アトリビュート「カラーブレンド」「頂点変形」の情報を出力するか選択します。 |
| 出力フォルダ選択 |
出力先のフォルダをエクスプローラで指定します。 出力フォルダを選択した状態で、「出力フォルダを指定する」にチェックを入れずにコンバートを行うと、この設定を無視し、コンバートするsspjのあるフォルダの中にJSONファイルが出力されます。 出力フォルダを選択したい場合は、かならず「出力フォルダを指定する」にチェックを入れてください。 |
| コンバート |
sspjをJSONファイルにコンバートを開始します。 Statusに「Convert end」と表示されればコンバート完了です。 |
| 終了 |
チェックを入れた設定を「config」ファイルに保存し、Ss5Converter To SSAJSONを終了します。 設定を初期化したい際はSs5Converter To SSAJSONのフォルダに作成される「config」ファイルを削除してください。 |
JSONの再生に関する情報
Ss5Converter To SSAJSONでコンバートしたJSONの再生を行うための命令と、JSONのデータフォーマットについてまとめます。
サンプルHTML「json_view.html」内の命令
「json_view.html」内では、以下の命令を使ってjsonデータをリクエストして読み込み、再生オブジェクトを作成して再生を行います。
- イメージリストの作成とイメージの読み込み先を指定します。
var imageList = new SsImageList(jsonデータ.images, “./datas/”, true); - イメージリストとアニメーションデータのひも付けを行います。
var animation = new SsAnimation(jsonデータ.animation, imageList); - スプライトオブジェクトを作成します。
var sprite = new SsSprite(animation); - コンテキストへ再生を行います。
sprite.draw( コンテキスト , 再生時間 );
コンバートしたJSONのデータフォーマット
コンバートしたJSONのデータフォーマットについて解説します。
アニメーションに関するデータフォーマット
| images | ssceが使用している参照イメージです。 |
| name | コンバートしたssaeとアニメーションデータを指します。 「ssae_アニメーションデータ」となっています。 |
| fps | アニメーションのfpsを指定します。 |
| CanvasWidth | sspjの設定している基準枠の幅です。 |
| CanvasHeight | sspjの設定している基準枠の高さです。 |
| MarginWidth | sspjの設定している基準枠の原点のX座標です。 |
| MarginHeight | sspjの設定している基準枠の原点のY座標です。 |
| parts |
アニメーションデータに含まれているパーツ名のリストです。
|
各フレームのデータフォーマット
「”ssa”」以下に定義されているフレーム毎のデータのフォーマットです。
カッコ内に「,」で区切る形でコンバートされます。
| Int | part ID |
| Int | reference image ID |
| Int | source rect-Left |
| Int | source rect-Top |
| Int | source rect-Width |
| Int | source rect-Height |
| Float | position-X |
| Float | position-Y |
| Float | angle (=Z axis rotation) |
| Float | scale-X |
| Float | scale-Y |
| Int | pivot offset-X default=0 |
| Int | pivot offset-Y default=0 |
| Int | flip-H defalut=false |
| Int | flip-V defalut=false |
| Float | opacity default=1.0 |
| Int | alpha blend type default=mix |
| Int | vertex deformation-LeftTop-X |
| Int | vertex deformation-LeftTop-Y |
| Int | vertex deformation-RightTop-X |
| Int | vertex deformation-RightTop-Y |
| Int | vertex deformation-LeftBottom-X |
| Int | vertex deformation-LeftBottom-Y |
| Int | vertex deformation-RightBottom-X |
| Int | vertex deformation-RightBottom-Y |
注意点
今後のサポートについて
「Ss5Converter To SSAJSON」では、『親子の座標変換にマトリックスを使用しない（Ver4互換）』を使用して作成したデータをコンバートしています。
Ver.4用の再生環境でVer.5の機能を再現するために使用していますが、今後のアップデートで当該機能につきましてはサポートを終了する予定となっております。
インスタンス機能の制限
- すべて通常パーツとしてコンバートを行います。そのため、インスタンスパーツを動的に差し替えることはできません。
- 「インスタンス」アトリビュートの「独立動作」は使用できません。
エフェクト機能の制限
- エフェクトパーツの挙動はSpriteStudio Version 5.7と同様になります。
Ver.5.6とは異なる動きをする場合がございますのでご注意ください。 - 「カラーブレンド」は反映されません。そのため、エフェクトエディタで「カラーRGBA」系のコマンドを使用しても、無効となってしまいます。
- エフェクトパーツで、毎回動きが変化するように乱数を定めない設定をしても、固定の動きがループするようにコンバートされます。
- 「エフェクト」アトリビュートの「独立動作」は使用できません。