火・炎の表現に – 「TeraFire」ライブラリ公開してみます。

teraFire.jpg

* TeraFire is a MIT License

Web Designing 8月号」にて ActionScript ライブラリの設定方法を中心に記事を書かせていただきましたが、実際にライブラリを使っていくのは8月18日発売の次号(Tweener特集予定)からとなります。

それまでに退屈されてしまうのも寂しいので、練習台としてライブラリを作ってみました。どうぞ試しに使ってみてくださいませ。3行の ActionScript で簡単に炎が作れます!(※AS3用ライブラリです)

AS ライブラリデビューの皆さんへ

Web Designing 8月号を読んで内容を理解していただいた前提で、

  1. ローカルPC上に任意のフォルダを作成し、中に新規 fla ファイルと src フォルダを作成する。
  2. fla ファイルを開き、フレームレート30(任意)、背景色を黒、ドキュメントレベルのクラスパスを src フォルダに通しておく。
  3. Subversion クライアントソフトを使って SparkProject のリポジトリ(http://www.libspark.org/svn)に SVN 接続する。
  4. Sparkリポジトリの中の「as3」ディレクトリの中に「TeraFire」ライブラリのフォルダがありますので、ライブラリを入手します。
  5. ローカルPC上にTeraFireライブラリのセッティングができたら、fla ファイルのフレームスクリプトに以下のようにコードを記述します。
import com.trick7.effects.TeraFire;
var fire:TeraFire = new TeraFire(100,100);
addChild(fire);

この状態でパブリッシュするとステージ上の x:100, y:100 の位置に炎がゆらゆら表示されているはずです。

fire.swf

「これだけでゆらめく炎が使えるんですよ~。ライブラリって便利ですよね~。」とお伝えしたかったのですが、いかがでしょうか?

模範演技として、火を表示させるまでのスクリーンキャスト動画を作りました。10分映像で31MBもあるので高速回線の人のみどうぞ。風邪で鼻声です。

TeraFire_controller.swf

ヒント1:やっぱり AS ライブラリよく分かんないという人用、ライブラリ添付&クラスパス通し済み、「あとはパブリッシュするだけ」のファイル一式。ソースはこちら:fire.zip(FlashCS3形式)

ライブラリを既に使いまくっている皆さんへ

僕みたいなもんでも SparkProject のコミッタになれました。SparkProjectマネージャーの yossy さん曰く、”「これコミットして大丈夫なのかな…」と考える前にコミットして欲しい“というのは本当に大丈夫なようですw。

ちなみに今回アップした TeraFire クラスのコンストラクタですが:

TeraFire(xPos:Number=0, yPos:Number=0, fireWidth:Number=30, fireHeight:Number=90)

となっております。ということで炎の位置、大きさはコンストラクト時に自由に設定できます。もっと内部処理を軽くできる余地をあえて残しており(嘘w)、皆さんの母性本能をくすぐる仕様になっていますので、ぜひぜひ中身をご覧ください。内部で何をやっているかというと:

  1. 内側から順に「オレンジ→赤→透明」のグラデーション塗りの楕円を描画、グラデーションの中心は円の中心からずらしてあります。これをビットマップ化して「炎のベース」としておく。
  2. 炎っていうのは芯の付近は揺らぎが少ないので、下部分の揺らぎの適応量が少なくなるようにマスク的な役割を果たす白黒グラデーションビットマップを作成しておく。
  3. perlinNoise でモヤモヤ画像を生成し、さっき作った「下部分揺らぎ抑え用グラデーションビットマップ」と合成(copyPixels)し、その画像をもとに DisplacementMapFilter を炎のベースに適応させる。モヤモヤ画像は毎フレーム上方向にスクロールするようにオフセット設定されているので、結果炎が揺らめきながら上方向にスクロールするわけです。

だいたいそんな感じです。洋書「Flash 8 Essentials」 のロウソクのサンプルを多大に参考にしています。


“火・炎の表現に – 「TeraFire」ライブラリ公開してみます。” への12件のフィードバック

  1. trick7+++++++

    ちなみに TeraFire はこの間の Spark project 勉強会でも取り上げさせて頂きました。すてき。

  2. >BIMLさま
    次はTera小キック→小キック+大パンチ→キャンセル昇竜拳の予定です。

    >yossyさん
    まじですか!?ついこないだまでasの中のパッケージのパス間違えてたりしてたんですけどw。
    もう僕いい齢なのでインクリメントしすぎは禁物ですw。
    今後ともよろしくお願いします。

  3. ピンバック: planet-ape|blog
  4. AS初心者です。模範演技拝見しました。
    すごくわかりやすくて、とても勉強になりました!!
    ありがとうございました。

  5. atsuさま
    どうもありがとうございます。ブログを書く励みになります!
    今後ともよろしくお願いいたします。

  6. Hello,

    nice work, but… try to add this fire to some object and change width/height or scaleX/scaleY, it will broke fire. Any sugessions how to fix that? The problem is in DisplacementMapFilter.

    Thanks

  7. すばらしい作品をありがとうございます。
    自作のFlashゲームに張らせてください。

コメントは受け付けていません。