smart.js + Backbone.js + CreateJS

でバトルのアニメをつくった

LT at Volare x MF study #4

who am i

• kobaken  ( @kfly8 ) 
• Application Engineer
  • like Perl, JS
• Work
  • Mobile Factory
  • YAPC::Asia staff
  • 五反田もくもく会

漆黒のレガリア

今日話したいこと

「漆黒のレガリア」のバトルシーンの仕組みの紹介

DEMO

仕組み

バトル再生用のjsonを元にDOMを組み立てて

時系列に沿って表示移動させる

メリット

• HTML/CSSの技術を使い易い
• Canvasの沼を回避

デメリット

• パフォーマンスが、full canvasに比べると大抵悪い
  • DOMが多くなる為

他にも選択肢があるが、

• full canvas
• flash runtime

一番の理由は

楽したかったから

主要技術

• (改造)smart.js
• (改造)Backbone.js
• CreateJS

smart.js

• アニメーション再生を支援してくれるライブラリ

DEMO

smart.js 構成要素

• div,canvasをwrapしたクラス
  • Stage, Box, Canvas etc
• アニメーション用クラス
  • 時間進行に応じてcallbackを発火
    • Timeline, Tween, Timetable
  • コマ割画像を連続再生
    • Animation
• アニメに必要な画像を管理
  • Assets

smart.js の特徴

• 他のアニメーションフレームワークに比べ、非常に薄い
• アニメに不慣れでも学習コスト小さくて済む
• HTML/CSSの技術があれば十分できる

• 慣れてくると、あーすればこーすれば便利かもって見えてくる
  • 例）Timetableが便利(ドキュメントに載ってない)

var tt = new smart.Timetable();

tt.frames = []
tt.frames[1] = {
  a: function() { .. exec a .. },
  b: function() { .. exec b .. },
};
tt.frames[5] = {
  c: function() { .. exec c .. },
  d: function() { .. exec d .. },
};

tt.play();

しまいには、改造を始める

• Assetsにqueue/dequeueを追加
  • 画像読み込みの予約queueをいれる
  • 全ての読み込みが終わったら、イベント発火したかった
    • バトルのアニメを再生していいかどうかの判定
• Boxにcenter/mediumを追加
  • 配置関連のutils

smart.jsの話はこの辺でおしまい

Backbone.js

• frontendのMVCフレームワーク
• 詳しい説明は略

Backbone.jsを使った背景

• 開発当時、smart.js + 自前実装でやっていたが、バトルを表現するオブジェクトが増え見通しが悪くなっていた
• 特にEvent管理とModel管理が手間になっていた
• 例えば、HPが減ったら、「画面下のステータス表示」「キャラの見た目」など複数の画面要素を変更する必要があった
  • HPが減ったら、それが伝搬し、表示が変わるようにしたかった
• つまり、データバインディング

Backbone.jsにした理由

• Backbone.jsはアプリケーションの為の機能がないフレームワーク
  • 良い意味でも悪い意味でも
• じゃあ、データバインディングの機能だけを取り出して使おう

Backbone.jsの改造

デーバインディングに必要なClassを取り出した

• Events
• Model

// ユニット model
model.Unit  =  Backbone.Model.extend({
 
  initialize: function(attr) {
     this.set('energy', attr.energy);
     this.set('power', attr.power);
     this.set('skill', attr.skill);
     this.set('ability', attr.ability);
 }
});

unit = new Unit();

unit.attack(target_units);

unit.subtract_energy(damage_enegy) // -> trigger event

だいぶ捗った

CreateJS

• smart.jsと同じくアニメーションのフレームワーク
• 旧来のアニメーション作成のワークフローが使える
  • canvas要素をexport
• もちろん素JSで書くこともできる
• 詳しいことは略

(語弊を恐れずに言えば)
「CreateJSはcanvas要素を吐き出すAssets Maker」

• smart.jsでリッチなアニメを作るのは手間
• 逆に、CreateJSはリッチなアニメが得意

「smart.jsで組み立てたDOMに
CreateJSでexportしたcanvasを載っけて
リッチアニメにしよう！」

DEMO

だいぶ捗った

以上！

ご清聴ありがとうございました。

株式会社モバイルファクトリー は、
開発好きなエンジニアを求めています。