読者です 読者をやめる 読者になる 読者になる

undefined

bokuweb.me

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でクリック時にエフェクトを表示する

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(@)

デモ

クリックしたらエフェクトが表示されます。

その他

日本語の情報がないのがきついけど、結構好感触。もう少しカスタマイズできるように勉強する。