« Flex を触ってみた | メイン | デバッガ »
2010年09月02日
Flash:: エフェクト
Tweet @jin1016をフォロー前のエントリー にリンクしてあるやつを動かすと、回復と爆発のエフェクトがある(ブラー+縮小+フェードアウトもあるけど)。
回復エフェクトはかなり手抜き。
縦長の楕円を少し縮小しつつ上に移動してアルファで消していってるだけ。
Flash はパーリンノイズを生成する機能が組み込みであるので、煙とか余裕で作れるだろうと思ったら意外と苦労した。
単純な PhotoShop で言うところの雲模様はすぐに作れるんだけど、それをアルファに入れたり角をとったりするのがやっかいだった。
生成するスクリプトをこの辺りに貼っている。
まず、パーリンノイズをアルファチャネルだけに生成したいのに、生成すると他のチャンネルは0になってしまうようなので、白く塗った BitmapData にアルファチャネルだけコピーしている。
その後、グラデーションがかかった円を書いて、それをマスクに適用したものを BitmapData に描き出している。
これだけだと大したことないけど、うまく画像が出なくていろいろと苦労した。
最後にスプライトを入れ子にしているのも、そのようにしないとマスクがうまく適用されないから。
煙のサンプルはこんな感じ。
クリックしたら煙が広がる。
普通に PhotoShop でテクスチャ作ってしまった方が楽なのは間違いなかった。
容量的には、スクリプトで生成する方が少ないし、バリエーションを何パターンか作ろうとしたら、かなり差が出る。
後、円のグラデーションでマスクしている関係上、常に円形っぽい雲が生成されてしまうので、マスクもパーリンノイズで生成して、ある程度の閾値でアルファを切ってマスクに適用すると、より不定型な形状の煙が生成できるはず。
そして爆発エフェクト。
検索するとこんなページが見付かる。
動作見るとこれでもいいかと思うけど、どうもイマイチ。
端の方にもあっと出るのが変な気が。
後遅い。
と言うことで、作った爆発エフェクト。
煙と同じくクリックしたところが爆発する。
細かい埃用の円を描いてアルファで消しつつ周囲に飛ばす。
赤い円にブラーかけたものを少し時間差を入れて加算合成、時間と共にアルファで消していく。
若干遅らせて煙を拡大しつつ、アルファで消していく。
やっているのはこんな感じの処理。
だいぶらしく見えるようになっていると思う。
ちょっと重いけど。
事前に画像書き出しする等すれば軽くなるはず。
煙の形状を円形ではなくし、ゴミを飛ばして放物線を描かせるなどすればもっと派手になると思うけど、さらに重くなりそう。
今回作ったのはこの程度だけど、他にも様々な機能があるようなので、かなりのことは出来そう。
線を引いたり塗りつぶしたりと出来るので、やろうと思えば何でも出来ることは出来る。
処理時間を気にしなければ。
まあ、そんなことしなくても、組み込まれている機能でいろいろと出来るようだけど。
それらは追々いじってみたいと思う。
投稿者 Takenori : 2010年09月02日 17:18
comments powered by Disqus