HTML5 プレイヤーの使い方

再生手順

以下は、SsToHtml5 コンバータによって出力したjsonファイルを再生する手順です。

・jsonデータをリクエストして読み込み、再生オブジェクトを作成して再生を行います。

・イメージリストの作成とイメージの読み込み先を指定します。
var imageList = new SsImageList(jsonデータ.images, "./datas/", true);

・イメージリストとアニメーションデータのひも付けを行います。
var animation = new SsAnimation(jsonデータ.animation, imageList);

・スプライトオブジェクトを作成します。
var sprite = new SsSprite(animation);

・コンテキストへ再生を行います。
sprite.draw( コンテキスト , 再生時間 );

上記手順によって実際にアニメーションデータをロードして再生するソースコードが Samples\simple にありますので参照してください。

ご注意

chrome で再生できない場合の対処方法

Chrome ではデフォルトの動作でローカルファイルへのアクセスを禁止しているため、.json ファイル等を読み込むことが出来ません。
このため出力したSSのアニメーションデータも同様に使用できない状態になります。

この動作を変更するには下記のようにします。

• Windows の場合

1. Chrome のショートカットのプロパティを開きます。
2. "ショートカット"タブに切り替えます。
3. "リンク先" の末尾に、半角スペースを１つ入れて、--allow-file-access-from-files と入力します。
4. OK を押して、修正したショートカットから Chrome を起動します。

• Mac の場合

1. ターミナルを開きます。
2. "open -a Google\ Chrome --args -allow-file-access-from-files" と入力し起動します。
   ※毎回入力しないで済むよう、Automator を利用してアプリ化しておくと良いでしょう。

更新履歴

2014/6/16 v1.0.5

• αブレンドの設定値をプレイヤー側で読み取れるようにし、加算のみlighterとしてブレンドするようにしました

2012/12/04

• アニメーション終了時に先頭フレームに戻さず末尾フレームで停止するように変更。

2012/08/31

• クラス構造を var ins を使うものから prototype を利用する方法に変更しました。

2012/07/30

• 再生時のスケール指定を追加しました。

2012/06/20

• 初版