CanvasやCSS3アニメーションを使ったコンテンツが普及する一方で、
実用で利用するにあたって、開発のスピードが課題になってきている気がします。
GUIツールとしてはAdobe Edge、
Hypeだったり、WebCodeなんてツールも出てきていたりしていますが、
パーティクルを使った光の演出や炎の演出などを取り入れようと思うと、
これらのツールを使ってもさくっとは作れず、
頭を悩ませている方も多いのではないかと思います。
今回はそういったコンテンツを作る時に楽できるかもしれないアプリケーション「TimelineFX Editer」を紹介します。
TimelineFX Editerで何ができるか
TimelineFX Editerはパーティクルを利用して光や炎のようなエフェクトを作成できるツールです。
作成したエフェクトはPNGのスプライトシートやGIFアニメーションに変換できます。
このスプライトシートをCanvasやCSS3アニメーションで利用してしまおうというわけです。
使い方(ゼロから作る方法)
※ もっと楽な方法があるので、ここは読み飛ばしてもらってもよいです。
下記URLのBuy Nowより購入できます。
Intel Mac OSX, Windows 2000/XP/Vista/7で動作するようです。
記事を書いている時点では£29.99です。
トライアル版も左のボタンからダウンロードできます。
TimelineFX Particle Effects Editor
エフェクトの保存が出来ないなどの制限はありますが、 ライブラリの読み込みやエフェクトのプレビュー、 プロパティの調整など基本的な機能は利用出来るので、購入前にトライアル版で試してみてから購入してもよいかもしれません。
ダウンロードしてきて、インストールが完了したら早速使ってみましょう。
ファーストビューはこんな感じです
メニューよりEdit → Add Effect
を選択します。
New Effect という項目が追加されましたね。
これをクリックして選択してみます。
右側にズラーッと項目が表示されましたね。
これを選択して下のGraphタブでアルファや回転の動作をタイムラインベースで変化させることができます。
が、今はパーティクルの元となるEmitterが追加されていないので何もできません。
Emitterを追加してみましょう。
メニューよりEdit → Add Emmiter
「No Image」と書かれた図形が右側の領域に表示されましたね。
左側のNew Effectが書かれたビュー部分を見てみます。
Effectの下にEmiterが追加されています。
EmitterもEffectとは別にアルファや回転を変化させることができます。
このようにEffectの下にEmmiterを追加して何種類ものパーティクルを組み合わせてEffectを作成していきます。
No Imageとなっている画像も変更してみましょう。
下のビュー部分よりShapesをクリック。
右クリック → Import Shapes
パーティクルの元にしたい画像を選択します。
読み込める画像の形式がすごく多いです。
Shapesにインポートされるので、選択して右クリック。 → Assign Shape
画像が白黒になってNo Imageだった部分と入れ替わりましたね。
Emmiterの色はParticleタブのColor Overtimeで変更することで、画像に指定した色がオーバーレイされます。
左端が初めの色で右端が終了時の色です
と、ここまで説明して来ましたが、
正直覚えることが多すぎて、結局のところこれでは効率化につながらないし、
このアプリケーションでなくてもいい気がしてしまいます。
使い方(サンプルのライブラリを活用する方法)
実は公式に沢山のサンプルデータがライブラリとして配布されているので、
これをベースにエフェクトを作成することができます。
これをベースにして、作成すればちょっとしたエフェクトならすぐ作成できてしまいます。
TimelineFX Particle Effects Emitters
今回はExplosionsをダウンロードして利用してみます。
右側のDownloadボタンを押して、ダウンロードしてきたら、
Files → Import Library
で先ほどダウンロードしてきたライブラリを選択します。
ライブラリの中でどれをImportするか聞かれます。
とりあえず今回は右上のSelect Allボタンを押して、全てインポートしてみます。
す、素晴らしい…。
炎のエフェクトが沢山表示されました。
一つ一つのアニメーション見てるだけでも楽しいですね。
0から自分で作成する際の参考にもなります。
ではこのエフェクトのスプライトシートを作成してみたいと思います。
今回はFireball1を書きだしてみます。
Fireball1を選択して、右クリック
Animation Propertiesを選択します。
画像の1フレームの大きさや、 エフェクトの大きさ、位置の調整を行えます。
ボタンを押すと出力時の設定を調整できるウィンドウが表示されます。
一番上から
- 出力する色の設定。(グレースケール、フルカラーなど)
- 画像の出力方式(スプライトシート、フレームごとなど)
- 透過ありにするかどうか
- x4アンチエイリアス
- Border
- Step数の設定(30フレームの時5とかだと30(フレーム) / 5ステップ = 6フレーム書き出しされる)
- スプライトシートの列の数。
okを押すと画像が書きだされます。
以下のようなスプライトシートや
連番の画像としてフレームごとに書き出すこともできます。
このアプリケーションで作成したスプライトシートを使って、
Canvas上で動くちょっとしたデモを作ってみました。
Canvas上でカーソルを動かせば炎が追従してくるデモです。
デモで利用しているCreateJSのSpriteSheetクラスの簡単な説明
仕組みはとてもシンプルで、 スプライトシートをアニメーションさせるクラスを作成しておいて、 それをカーソルを移動する度にそれを生成させています。
stage.addEventListener("stagemousemove", function(e){
new Fireball(spriteSheet,e);
});
アニメーションする炎のスタンプをカーソルが動く度に押しているというイメージといったほうが分かりやすいでしょうか？
炎がつながっているように見えるのは、
オブジェクトに対してcompositeOperation = "lighter"を設定しているためです。
これによって、オブジェクト同士が重ねあった際の描写の方法が変更されて、
足しあわされた色が表示されるようになります。
スプライトのアニメーション管理にはCreateJSのライブラリ群の一つであるEaselJSを利用しました。
EaselJSにはSpriteSheetとSpriteという便利なクラスが用意されているので、
これを利用することで
spriteSheet = new createjs.SpriteSheet({
images : [ "test.jpg" ] ,// 画像のURL
frames : {
width: 128, // 1フレームの横幅
height: 128 // 1フレームの縦幅
},
animations: { // 任意のアニメーション名: プロパティ
AnimPlay: [0,31,true,2] ,
// 始点フレーム,終点フレーム,次のアニメーション(trueで今のアニメーションをリピート),アニメーションの頻度
// 上記の例だと0〜31フレーム目をリピートし、アニメーションの頻度は2で再生させる
AnimStop: [0,false,1]
}
});
のようにスプライトシートのアニメーションを設定しておき、
インスタンスを引数にSpriteクラスを呼び出して、
インスタンスを作成します。
bitmapAnim = new createjs.Sprite( spriteSheet );
そして gotoAndPlay などのメソッドを呼び出すことによって
SpriteSheet クラス生成時に設定したアニメーションを再生することができます。
bitmapAnim.gotoAndPlay("AnimPlay"); // AnimPlayを再生！
このようにTimelineFX Editorで作成したスプライトシートをうまく利用して演出を作成することで、
随分とコンテンツの印象が変わるのではないかと思います。
アニメーションの設定もたくさん用意されているので、
必要に応じて変更することでアニメーションのバリエーションも無限大になります。
AfterEffectsの活用
今回はTimelineFX Editorでさくっと作成しましたが、
AfterEffectsもスプライトシートを作成できる機能があります。
(参考url : FlashCS6のスプライトシート出力)
映像をtrapcodeなどのようなプラグインを利用すればより自由なエフェクトが作成することもできそうですね!
今回紹介したツール：
