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

2008-07-27 (日) 20:58
action script | video_tutorial | works

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

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

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

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

ローカルPC上に任意のフォルダを作成し、中に新規 fla ファイルと src フォルダを作成する。
fla ファイルを開き、フレームレート30（任意）、背景色を黒、ドキュメントレベルのクラスパスを src フォルダに通しておく。
Subversion クライアントソフトを使って SparkProject のリポジトリ（http://www.libspark.org/svn）に SVN 接続する。
Sparkリポジトリの中の「as3」ディレクトリの中に「TeraFire」ライブラリのフォルダがありますので、ライブラリを入手します。
ローカル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

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

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

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

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

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

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

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

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

はてなブックマーク - 火・炎の表現に – 「TeraFire」ライブラリ公開してみます。

Newer: 物理シミュレーションしてる上に楽しいサイト
Older: TweenerのeaseOutIn指定

Comments:8

BIML 08-07-28 (月) 22:02

次はTeraFlameをお願いします。

yossy:beinteractive 08-07-28 (月) 22:28

trick7+++++++

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

tera 08-07-28 (月) 23:04

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

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

atsu 10-01-25 (月) 16:22

ＡＳ初心者です。模範演技拝見しました。
すごくわかりやすくて、とても勉強になりました！！
ありがとうございました。

tera 10-02-05 (金) 12:00

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

juno 10-05-25 (火) 11:01

私のサイトでも炎の表現チャレンジしてます。

http://blog.livedoor.jp/game_hunter/archives/51630284.html

Alex Butin 10-10-27 (水) 0:02

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

mtfuji 11-05-01 (日) 1:40

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

Trackbacks:4

Trackback URL for this entry: http://www.trick7.com/blog/2008/07/27-205806.php/trackback
Listed below are links to weblogs that reference: 火・炎の表現に – 「TeraFire」ライブラリ公開してみます。 from trick7

trackback from planet-ape|blog 09-02-15 (日) 16:49

カスタムコマンドを作ってみる（addTeraFire）…

そろそろコンポーネントベースでは太刀打ち出来なさそうな案件が降ってくる予感がします（ぇ）。
なので、Progressionの力を100％発揮出来るクラスベースでの作成方法の勉強を始め….

pingback from 日本語でおねがいします！ | Leichtgewicht 09-02-18 (水) 2:45

[...] creates response even in Japan. A interesting(and for me new) trend is shown by Shuhei Terai with TeraFire. I obviously forgot or underestimated how important it can be to maximize the ease-of-use. Yet the [...]

pingback from blog.alumican.net » Blog Archive » Fluid on the Video 09-05-12 (火) 20:22