TimelineFX買ったった！ので、サンプルエフェクトをenchantで表示するまでを記録しておく

ゲームのエフェクトを作るためにTimelineFX買いました。サンプルのスプライトシートをenchant.jsで動かすまでを記録しておきます。

TimelineFX?

http://www.rigzsoft.co.uk/

価格：£29.99

画像から色や速度のなどのパラメータを変更することでいい感じのエフェクトがさくっと作れちゃうEditorです。サンプルが非常に豊富で基本的にはサンプルを元に手を入れたり、参考にすることで効率よく目的のものが作れそうです。どんなサンプルがあるか貼っときます。

Auras and Halos Effects Library for TimelineFX - YouTube

Readouts Effects Library TimelineFX - YouTube

Explosions Library for TimelineFX - YouTube

Lightshows Effects Library for TimelineFX - YouTube

サンプルエフェクトをスプライトシートとして書き出してみる

サンプルエフェクトをダウンロードしておく

http://www.rigzsoft.co.uk/effects-libraries/

ここから好きなエフェクトをダウンロードしておきます。

立ち上げてフォルダマークをクリック

f:id:bokuweb:20150207180742p:plain

落としたエフェクトを選択使いたいエフェクトを選択し「OK」を押す

f:id:bokuweb:20150207181002p:plain

使用するエフェクト選択

f:id:bokuweb:20150207195530p:plain

ここで"Attributes"を変更したりすることでサンプルをカスタマイズできるっぽいんですが、まだよくわかってないので分かり次第記事にします。今回はそのまま使用するため、右クリック->『Animation Properties』を選択。

f:id:bokuweb:20150207200320p:plain

スプライトシートにエクスポート右下のボタンを押すと『Export Options』が表示されるのでOKを押す。

f:id:bokuweb:20150207203150p:plain

こんなのができる

f:id:bokuweb:20150207203318p:plain

enchant.jsでクリック時にエフェクトを表示する

・main.coffee

enchant()
game = new Core(480,480)
game.fps = 60
game.preload("http://jsrun.it/assets/r/K/E/a/rKEaB.png")
game.start()
    
game.rootScene.addEventListener Event.TOUCH_START, (e)=>
  wave = new Sprite(128, 128)
  wave.x = e.x - 64
  wave.y = e.y - 64
  wave.image = game.assets["http://jsrun.it/assets/r/K/E/a/rKEaB.png"]
  game.rootScene.addChild(wave)

  wave.addEventListener "enterframe", ()=>
    if wave.frame < 22 then wave.frame++
    else   game.rootScene.removeChild(@)