【Ver.5.8】HTML5での表示方法

このページでは「Ss5Converter To SSAJSON」(GitHub)とサンプルデータを使い、SpriteStudioで作成したアニメーションをJSONに変換し、HTML5で表示を行います。

事前準備

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

SpriteStudioでアニメーションの作成を始める前に、使用するアトリビュートをSs5Converter To SSAJSONで再現可能なもののみに制限する必要があります。

「プロジェクトの設定」ウィンドウの「互換性」で、以下の通り設定を行ってください。

json02

チェックを入れる項目

  • 親子の座標変換にマトリックスを使用しない(Ver4互換)
  • エフェクト機能を使用する
    ※エフェクト機能を使用する場合のみチェックを入れてください。

「再生対象のプラットフォーム」の設定

カスタム」を選択し、以下のアトリビュートのみチェックを入れてください。

  • 参照セル
  • X座標
  • Y座標
  • Z軸回転
  • Xスケール
  • Yスケール
  • 不透明度
  • 優先度
  • 左右反転
  • 上下反転
  • 非表示
  • インスタンス
  • エフェクト

互換性で「SSP for HTML5」を選択すると、Ver.4互換機能に制限され、エフェクト、インスタンス機能は使用することができません。

Ss5Converter To SSAJSONを導入する

SpriteStudioでアニメーションを作成したら、「Ss5Converter To SSAJSON」をダウンロードします。
今回は「Clone or download」から「Download ZIP」をクリックし、ダウンロードする形で導入します。

 

json04

「Ss5ConverterToSSAJSON-master.zip」がダウンロードされるので、解凍します。
「Ss5ConverterToSSAJSON-master」が展開されたら「Tools」の中の「Ss5ConverterToSSAJSON.zip」も解凍します。

これでSs5Converter To SSAJSONの準備は完了です。

sspjをJSONにコンバートする

Ss5Converter To SSAJSONを使って、作成したsspj(プロジェクトファイル)をコンバートします。
「Tools」で解凍した「Ss5Converter To SSAJSON」の中にある「Ss5ConverterGUI.exe」を選択します。

json03

Ss5ConverterGUI.exeを開き、上部の空欄にsspjをドラッグ&ドロップするか、「sspjを追加」ボタンをクリックし、コンバートするsspjを追加します。

json013

「コンバート」をクリックすると、sspjのコンバートが完了します。

json05

サンプルデータを使って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で表示します。

読み込むデータを格納する

  1. フォルダを新規作成します。
  2. 新規作成したフォルダ内に「datas」フォルダを作成します。
  3. 「datas」フォルダの中に、JSONを格納します。
  4. ssce(セルマップファイル)で使用した画像データを格納します。
    JSONファイルを開き、”images”で指定している画像が同様のデータになります。
  5. JSONと画像データを格納したら「datas」内の準備は完了です。

例として、「logo」というフォルダを作り、SpriteStudioのスプラッシュアニメ(newsplash512)をHTML5で表示します。

「logo」フォルダに「datas」フォルダを作成し、その中にコンバートしたJSONファイルとpng画像を格納すると、下図のようになります。

json06

SsaPlayer.jsとjson_view.htmlを準備する

  1. 「sample」フォルダにある「json_view.html」と「SsaPlayer.js」を、新規作成したフォルダにコピーします。
    ※「datas」フォルダの上の階層に格納します。
  2. 「json_view.html」をテキストエディタで開きます。
  3. $.getJSON(‘./datas/animetest.json‘, function (jsonData) {
    「animetest.json」の箇所を、「datas」フォルダに格納したJSONデータのファイル名に変更します。
    json07
    json08
  4. 「json_view.html」を保存し、準備は完了です。

「json_view.html」をFirefoxで開くと、指定したJSONがブラウザ上で表示されます。

json09

Google Chromeで確認したい場合

Google Chromeはローカルファイルへのアクセスを禁止しているため、上記方法でJSONの表示を確認することができません。
お手数ですがFirefoxでご確認くださいますようお願いいたします。

Ss5Converter To SSAJSONのユーザーガイド

ここでは、Ss5Converter To SSAJSONの基本的な使い方を解説します。

json013

コンバートファイルリスト欄

JSONにコンバートするsspjファイルのリストを表示・追加する欄です。
sspjをドラッグ&ドロップすることでリストに追加することができます。

sspjを追加

コンバートリストに追加するsspjをエクスプローラ上で選択します。

リストを保存する

コンバートファイルリスト欄に追加されているファイル一覧を、txt形式で保存します。

リストを読み込む 「リストを保存する」で保存したtxtを読み込み、コンバートファイルリスト欄に反映します。
リストのクリア コンバートファイルリスト欄をクリアします。
1モーションを1ファイルで出力する

チェックを入れると、ssaeに含まれているアニメーションデータごとにJSONファイルを出力します。
ファイル名は「ssae_アニメーションデータ.json」となります。

例えば、「test.ssae」の中に「1」「2」「3」というアニメーションデータが格納されている状態でこの機能にチェックを入れると

  • test_1.json
  • test_2.json
  • test_3.json

という3つのJSONファイルが出力されます。

パーツが基準枠の外にある場合は出力しない

基準枠の外に配置されているパーツを出力しません。

出力フォルダを指定する 出力先のフォルダを指定してコンバートを行います。
チェックを入れると、「出力フォルダ選択」で出力先のフォルダを指定しないとコンバートが開始されません。
カラーブレンド、パーツの頂点情報を出力する アトリビュート「カラーブレンド」「頂点変形」の情報を出力するか選択します。
出力フォルダ選択

出力先のフォルダをエクスプローラで指定します。

出力フォルダを選択した状態で、「出力フォルダを指定する」にチェックを入れずにコンバートを行うと、この設定を無視し、コンバートするsspjのあるフォルダの中にJSONファイルが出力されます。

出力フォルダを選択したい場合は、かならず「出力フォルダを指定する」にチェックを入れてください。

コンバート

sspjをJSONファイルにコンバートを開始します。

Statusに「Convert end」と表示されればコンバート完了です。
Logに「success!」という表記があるか確認してください。

終了

チェックを入れた設定を「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のデータフォーマットについて解説します。

アニメーションに関するデータフォーマット

json010

images ssceが使用している参照イメージです。
name コンバートしたssaeとアニメーションデータを指します。
「ssae_アニメーションデータ」となっています。
fps アニメーションのfpsを指定します。
CanvasWidth sspjの設定している基準枠の幅です。
CanvasHeight sspjの設定している基準枠の高さです。
MarginWidth sspjの設定している基準枠の原点のX座標です。
MarginHeight sspjの設定している基準枠の原点のY座標です。
parts

アニメーションデータに含まれているパーツ名のリストです。

パーツ名の取得について

  • インスタンスパーツについては、パーツ名はすべて「instance」としてコンバートされます。
  • エフェクトパーツについては、パーツ名はすべて「effect」としてコンバートされます。

各フレームのデータフォーマット

「”ssa”」以下に定義されているフレーム毎のデータのフォーマットです。
カッコ内に「,」で区切る形でコンバートされます。

json011

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」系のコマンドを使用しても、無効となってしまいます。
  • エフェクトパーツで、毎回動きが変化するように乱数を定めない設定をしても、固定の動きがループするようにコンバートされます。
  • 「エフェクト」アトリビュートの「独立動作」は使用できません。

このエントリーは役に立ちましたか?