こんにちは開発担当の遠藤です。
昨今、賛否両論ありつつも何かともてはやされている HTML5 ですが、UI向けの素材などがスムーズに動いているデモはよく見かけます。
ですが、もっとゲームらしいアニメーションを再生させたい！
それも単なるパタパタアニメだけではなく、キーフレームによる補間アニメーションや複雑な多関節キャラクタを表示させたい！
といったご要望もあるのではないか？
そこで、汎用2Dアニメーション製作ツールとして、現在もなお改良を続けている弊社製品 SpriteStudio においても HTML5 に対応させることで、それらの要望にお応えしたいと考えました。
“対応させる”とは、SpriteStudio で製作したアニメーションデータをHTML5 の canvas を利用し、PCのブラウザや iPhone、Androidのブラウザ上で再生できるようにする、という事です。
今回はこの SpriteStudioPlayer for HTML5 略して SSP for HTML5 を利用し、アニメーションを再生するまでの手順を簡単にご説明したいと思います。
アニメーション製作から再生までの流れ
１．データの作成
まず、SpriteStudio でアニメーションデータを製作し .ssa 形式で保存します。
- HTML5 の canvas の制約上、頂点変形、カラーブレンドなど３Ｄの描画機能が必要になるものについては再生できないため使用しないようご注意ください。
２．コンバート
SsaToHtml5 コンバータ で JavaScript 用に変換します。なぜコンバートが必要なのか？
それにはいくつか理由があります。
- JavaScript でバイナリデータを読み込む方法が確立されていない。文字列ストリームを利用するなど幾分トリッキーであり速度も速くない。
- かといって、XML形式※1 を利用するにもファイルサイズが冗長である。またXMLパーサーはブラウザ依存のためある程度配慮が要る。
- キーフレームの補間計算に時間がかかる。リアルタイムに処理するのが高負荷であるのは勿論のこと、読み込み時にやるにも無用な時間がかかってしまいます。
以上の理由によりコンバータで事前に処理を済ませることで、最低限のデータサイズとJavaScript上ですぐに利用できるパラメータに変換しておく方法を採用しました。
出力ファイルとして、JSON 形式とJavaScript の配列形式を選択できます。
※1 SpriteStudio では出力するアニメーションデータのファイル形式として、XML 形式とバイナリ形式の２種類を選択できます。
３．再生
コンバータで出力したデータを再生するためのプレイヤーとして SsPlayer.js を用意しています。
このファイルを読み込むよう .html ファイルに記述します。
<script type="text/javascript" src="./SsaPlayer.js"></script>
json 形式で出力したアニメーションデータを読み込みます。
※json の読み込みのために jquery を利用しています。
$.get("./Samples/girl/girl_packed.json", function(jsonData) {
var data = $.parseJSON(jsonData);
var a_canvas = document.getElementById("a_canvas");
var ctx = a_canvas.getContext("2d");
以下で使用するイメージとアニメーションデータの指定を行っています。
// 必要なイメージリストとアニメーションを実体化します。
var imageList = new SsImageList(hoge_images, "./Samples/hoge/");
var animation = new SsAnimation(hoge_ssa, imageList);
// 上記アニメーションを使ったスプライトを作ります。
var sprite = new SsSprite(animation);
// ２倍の速度で逆再生するように指定
sprite.setStep(-2);
// ループ回数の指定
sprite.setLoop(50);
// ２倍で表示
sprite.scale = 2;
// 画像の差し替えもできます。
//ImageList.setImage(0, "imageA.png");
//ImageList.setImage(1, "imageB.png");
setInterval(function () {
var t = new Date().getTime();
ctx.save();
// キャンバス全体をクリアします
ctx.clearRect(0, 0, 600, 400);
// スプライトを描画します。
sprite.draw(ctx, t);
// 座標移動
sprite.x += 1;
sprite.y += 1;
ctx.restore();
}, 30);
}
以上のように記述することで、キャンバス上に１つのアニメーションを再生することができます。
ご覧の通り、ループ回数、表示座標、再生スピード、スケールなどをアニメーションごとに指定することが可能です。
サンプルとして、ソーシャルゲーム風モンスター出現シーンのアニメーションをご用意しました。画像をクリックするとアニメーションがポップアップで表示されます。
対応ブラウザは Internet Explorer、Google Chrome、Safari、Firefoxです。
また、iOSのSafariやAndroidの各種ブラウザでも動作確認済みですので、お試しください。
