SS6Player for Webでの表示方法

SpriteStudio Ver.6で作成したデータを SS6Player for Web を使用し、ブラウザ上でアニメーションを再生する方法を解説します。Sample.jsをさらに単純化させたスクリプトで、コンバートしたデータを再生します。
具体的な使い方や制御についてはSample.jsをご覧ください。

使用バージョンについて

本ページは以下のバージョンを使用して解説・確認をしています。
（2019/10/17 時点となります　本ページの情報が古くなっている可能性がございます。各GitHubにて最新情報をご確認ください）

  • OPTPiX SpriteStudio：Version 6.3.2
  • SS6Player for Web：v1.1.0
  • SpriteStudio SDK ：v1.7.0
  • アニメーションデータ：キャラクターアニメーション ボックスくん(Ver.6.3)
  • Node.js 12.13.0（npm 6.12.0）
  • Google Chrome バージョン：77.0.3865.120 にて動作確認

アニメーションデータ準備

アニメーションを行うデータをSpriteStudioで作成します。
アニメーションを作成する前に、必ず「プロジェクト設定」から互換性を「SS6PlayerForWeb v.0.0.0（v.0.0.0はSpriteStudioのバージョンに応じて変化します）」に設定してください。
再現できない機能やアトリビュートを使用できないようにし、実装時の事故を防ぐためです。

今回は、サンプルデータで公開している「キャラクターアニメーション ボックスくん(Ver.6.3)」を使用します。
アニメーションデータがまだ出来上がっていない方は以下のサンプルデータをご利用ください。

サンプルデータのダウンロード

「ダウンロード」を押すと、「OPTPiX_SpriteStudio_CharactorBoxSamples_20190626.zip」というファイルがダウンロードされます。

サンプルデータの展開

zipファイルがダウンロードされますので、展開します。
このsspjを今回はSS6Player for Webで再生します。

sspj(アニメーションデータ)をssfbに変換

sspjを、SS6Player for Web で使用するデータに変換する方法を解説します。

コンバータのダウンロード

アニメーションデータの変換には、SpriteStudio SDK で提供されているコンバータを使用します。
SpriteStudio6 SDK のページから Ss6Converter.zip をダウンロードします。
SpriteStudio6 SDKのリリースページから、「Ss6Converter」をダウンロードしてください。

SpriteStudio6-SDK Releases

zipファイルを展開する

ダウンロードが完了したら、「Ss6Converter.zip」を展開してください。
展開したフォルダにある「Ss6ConverterGUI.exe」を起動してください。

アニメーションデータのコンバート

Ss6ConverterGUIを開くと、ダイアログが表示されます。
これを操作して、アニメーションデータのコンバートを行います。

コンバート方法

  1. 「アニメーションデータ準備」で展開したデータの中から、今回は「box_00_00.sspj」を使用します。
  2. FileNameのところに「box_00_00.sspj」をドラッグ・ドロップしてください。
    注意点として、フォルダ名、ファイル名に全角文字や特殊文字が入っていると読み込みに失敗することがあります。その場合は、ドライブの直下に置くなどお手数ですが調整ください。
  3. 出力フォーマットのプルダウンメニューを開き「ssfb」を選択します。
  4. 「Convert Start」ボタンをクリックします。
  5. logに「convert end」と表示されれば、再生に使用するデータ「ssfb」への変換完了になります。

ssfbの確認

sspjのフォルダの中に、ssfb拡張子のファイルが生成されていることを確認してください。
このファイルが再生に使用するデータになります。

これでデータのコンバートが完了です。

再生準備

アニメーションの再生を行う準備をします。

SS6Player for Web のダウンロード

SS6Player for Web の Githubの release よりテストするパッケージをダウンロードします。

SS6Player for WEB

今回は、
https://github.com/SpriteStudio/SS6PlayerForWeb/releases/tag/v1.1.0
より Source code.zip をダウンロードします。

ダウンロードした「Source code.zip」を展開すると、以下のようなファイル群がフォルダの中に入っていることを確認できます。
今回はこの中の「packages」フォルダ内の下にある「Player」フォルダの中身を編集します。

展開したファイルの　SS6PlayerForWeb-1.1.0¥packages¥ss6player-pixi¥Player　のフォルダを開いてください。
以下のようなファイルが格納されている状態です。

コンバートしたデータを配置

再生を行うデータを配置します。
今回は分かりやすいようにまとめて置きたいので、新規作成で 「Box」 というフォルダを作ります。

Box フォルダの中に、先程コンバートしたssfb データと、画像ファイルを配置します。
今回は以下のファイルを格納します。

  • box_00_00.ssbp.ssfb
  • box_00_00.png

の２つをフォルダーへコピーします。

再生用コードの準備

今回はsample.js のコードを修正し、更にシンプルにして使用します。
フォルダに sample.js というファイルがあることを確認してください。

「sample.js」を、テキストエディタで開きます。
内容を、下に記載していますサンプルスクリプトをコピーして変更をおこない、上書き保存を行ってください。

sample.jsは様々な使用方法が記載されていますが、今回は再生のみ行うコードに書き換えます。
sample.jsはGitHubからいつでも取得することができますが、スクリプト変更を行う前に複製することをお勧めします。

ブラウザで直接アニメーション再生

ブラウザ上でアニメーションを確認します。

セキュリティの都合、直接ブラウザからアニメーションを再生できない場合があります。
その場合はnode.jsをインストールし、環境を準備して表示を行う方法をご利用ください。

ブラウザを準備

今回は google Chrome で再生を行います。Google Chrome を開きます。

SS6PlayerForWeb-1.1.0¥packages¥ss6player-pixi¥Player のフォルダにある index.html を、先ほど開いたGoogle Chromeで表示します。
index.html をGoogle Chrome上へドロップします。

再生確認

アニメーションはループして再生するようになっています。
正常に表示されたら完了です。
ブラウザのセキュリティ上の制限で正常に表示されない場合は、次の 開発環境を準備して、httpサーバーで再生を確認する で再生確認ください。

開発環境を準備して、httpサーバーで再生を確認する

ここではSS6Player for Web の改修が行える環境を準備します。環境を準備いただくことで、ご使用のパソコンでhttpサーバーを起動してアニメーションの再生チェックが行えるようになります。
最初に TypeScript のトランスコンパイル、アニメーション再生テストを行う際に使用する npm (Node Package Manager) を準備します。

node.js パッケージのダウンロード

npmを使用するにあたり、node.js のダウンロードページより、npmが同梱されたパッケージをダウンロードします。
使用しているOSに合わせてダウンロードを行ってください。

node.js のインストール

ダウンロードしたパッケージをインストールします。
インストーラーに従い、インストールを完了させてください。

npmを用いた開発環境を準備する

インストールした npm を使用して、SS6Player for Web の開発環境を構築します。
本ページでは Windows 環境での方法を紹介します。

コマンドプロンプトを起動してフォルダを移動

Windows システムツール の「コマンド プロンプト」起動します。

コマンドプロンプトが起動したら、展開したファイルの
SS6PlayerForWeb-1.1.0/　のフォルダへ、フォルダを移動します。
今回は、
[C:\Users\ユーザー名\Downloads\SS6PlayerForWeb-1.1.0\SS6PlayerForWeb-1.1.0 ] へ移動させるため。
cd C:\Users\ユーザー名\Downloads\SS6PlayerForWeb-1.1.0\SS6PlayerForWeb-1.1.0
と入力しました。

コマンド プロンプトを開いた際のドライブが異なる場合、ドライブ移動「C:」も行ってください。

npm を使用し、パッケージをインストールする

「npm i 」と入力して実行します。
これにより、開発で使用するパッケージについてインストールされ準備されます。
次に環境の初期化を行います。
「npm run bootstrap」と入力します。
以上で、環境準備が整いました。

トランスコンパイラを実行する

TypeScript のソースコードへトランスコンパイラを実行して、再生環境に反映します。
今後、ソースコードの改修を行ったときは、トランスコンパイラを実行して動作環境へ反映していきます。

「npm run build」と入力します。
トランスコンパイルが実行され、動作環境に反映されます。
これで再生環境の準備は完了しました。

アニメーション再生を行う

http サーバを起動し、ブラウザ上でアニメーション再生を行います。

「npm run view」と入力し、アニメーション再生のテストを行います。
httpサーバが起動します。
その後、自動で既定ブラウザを使って、アニメーション再生を行います。

以上で、アニメーション再生まで行える開発環境の準備ができました。
TypeScript を変更した場合は、再度トランスコンパイルから行ってください。

サンプルスクリプト

今回は以下のスクリプトで再生を行いました。
再生するためのシンプルな記述になっています。制御する際の参考にしてください。

なお、もっと詳しいサンプルはGitHubにSample.jsをご用意しています。

//-----------------------------------------------------------
// SS6Player For Web
//
// Copyright(C) Web Technology Corp.
// https://www.webtech.co.jp/
//-----------------------------------------------------------

// SpriteStudioのアニメーションを再生するサンプルです。
// アニメーションデータ(.ssfb)は SptiteStudioSDK に含まれる
// Ss6Converterで作成します。詳細は以下のURLを参照ください。
// https://github.com/SpriteStudio/SpriteStudio6-SDK

// Initialize PIXI Application
// （通常のPIXI.jsアプリケーションの初期化手順）
var app = new PIXI.Application(640, 640, {
  backgroundColor : 0x606060
}); // 比較しやすいようSpriteStudioの初期設定と同じ色に設定します。
document.body.appendChild(app.view);

// 読込完了コールバック
var onComplete = function() {
    Play_sampleAnimation();
};

// データ設定 
// SS6Converterを使用した ssfb ファイルを設定します。
var ssfbFile;
    ssfbFile = "./Box/box_00_00.ssbp.ssfb";	// コンバートしたデータファイルを記述します。
var mySS6Project = new ss6PlayerPixi.SS6Project(ssfbFile, onComplete);

// プレイヤーを使用して再生するサンプルです。
function Play_sampleAnimation() {
  {
    //   再生するssae名、アニメーションデータ名を設定  
    var mySS6Player = new ss6PlayerPixi.SS6Player(mySS6Project, "00_box_00_default", "default");
    mySS6Player.position = new PIXI.Point(320, 320);    // 表示位置を設定
    mySS6Player.scale = new PIXI.Point(1.0, 1.0);          // 表示した際のスケールを設定 
    app.stage.addChild(mySS6Player);

    mySS6Player.loop = 0; // ループ回数を設定 (1で一度のみ再生、0以下で無限ループ)

    // 再生開始
    mySS6Player.Play();
  }
}

関連ページ

Published : Edit : OPTPiX User Support