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を組み立てて

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

eg

メリット

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

デメリット

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

他にも選択肢があるが、

  • full canvas
  • flash runtime

一番の理由は

楽したかったから

主要技術

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

だいぶ捗った

以上！

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

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

Made with Slides.com