DXライブラリで炎を再現

[ぬっち]

DXライブラリを使ったメラメラと燃える炎の
サンプルあれば見たいのですが、ないでしょうか？
どうしても揺らめきと加算合成ぐあいがうまくいかなくて困ってます・・

[Dixq (管理人)]

携帯なので、詳しくかけませんが、
DrawModiGraphで適当に勢いよく上向きに炎の元となる画像を変形させ、変形する角度をランダムニ変えながら、バイリニアにして、何枚も加算ブレンドうまくやればできる気がしますがどうでしょう？
すごい適当なコメントですがf^_^;
ロケットの噴射を作ったことありますが、適当に変形して、適当に加算ブレンドするだけで、
案外それっぽく見えますよｗ

[ぬっち]

是非、ロケットの噴射のサンプルでも構いませんので
見せてもらえないでしょうか？炎って難しい・・

[Dixq (管理人)]

う、無いです;
消してしまう位あっさり作れたものなんで、簡単に出来ると思いますよ。
確か、描画部分は２行位で書いた気がしますf^_^;

今パソコンが使えないのです、すみません‥

[ぬっち]

２行・・・ですか・・
凄く気になります・・

[Justy]

　ＤＸライブラリではないのですが、即興でサンプルイメージ（動画・要divx）を作ってみました。
　あんまりセンスないんで、これは火にみえないかもしれませんが……。


　使っているテクスチャは１枚です。
　Photoshopで 512x512くらいのサイズで雲模様フィルタを実行して作った
テクスチャを 256x256にしてリサイズします。

　それを○で選択し選択範囲を適当にぼかしてから周囲を切り取り
透明化したものを使っています。


　エフェクトの構成としては３つあります。

１　加算なしの炎

　出現地点はＸ軸上の一定範囲内のランダムで、加算なしの通常描画、5:8の縦長、
１フレームに１０個ずつ出現させ、それぞれを１５フレームで消しています。
　
　速度は１つ１つは等速で真上方向に向けていますが、速度はそれぞれで
ばらつきをもたせ、進むにつれ縮小をかけています。
　カラーは [255, 20, 20, 150]で、進むにつれ縮小し、透明度を上げています。


２　加算ありの炎

　ほとんど１と同じですが、発生が５、消滅が 15で、出現位置の範囲が１の炎より
少し大きくなっており、スケールも 4:6で、カラーは [200, 0, 0 50～150]です。

３　煙

　動きは２の炎とほぼ同じで、発生が３、加算なし、カラーが
[100, 100, 100, 50～150]になっています。


　この３つをそれぞれの出現時に描画プライオリティをランダムで設定し、
奥から順番に書けば添付の動画のようになるかと。

　あとは火の勢いとか燃え方にもよるのですが、テクスチャアニメーションだけで
表現してもいいですし、上記のような動きのアレンジと組み合わせても良い感じのものが
できそうです。

[ぬっち]

Justyさんありがとうございます。
ただ、やっぱりDXライブラリでのプログラム自体がみたいです・・

[通りすがり]

私も是非みたいです

[ティラミス]

炎のエフェクトは
ＤＸライブラリだと加算ありで、６行で書けました。

[Q]

どんな6行なんですか？

[Dixq (管理人)]

なんかすごい適当ですが、作ってみました＾＾；
実質炎に関係あるのは２～３行ですかね。
こんなんでも一応ロケットの炎には見えるんではないかと。

焚火のような炎については作ったことはないです。
まぁこれも変形と加算組み合わせたら出来そうですが

http://dixq.net/zip/FireSample.zip
(VC2008のプロジェクトとソース、実行ファイル同梱)


それからhttp://photoshopvip.net/archives/3243フォトショで炎の素材作るの参考になるかも。

こうやって炎の素材を何種類か作ってから、
それをゆらゆら勢いよく上に向かって変形させ、いくつもそれを重ねるようにすれば、
焚火のような表現も出来そうです。
やったことないので、想像ですが。

[Dixq (管理人)]

>>Justyさん

おぉ、素晴らしいですね＾＾
さすがJustyさん、レベルが違う・・ｗ

エフェクト作りって楽しいですよね。
３Dゲームとかやってると、滝とかキャンプファイアーとか、竜巻とか・・
「これってプログラムでどうやって表現するんだろう」
とか常々考えてしまう・・・病気ですｗ

[Justy]

＞ おぉ、素晴らしいですね

　いやいや、管理人さんのもなかなかですよ。
　何より短いコードで状況に合った表現が出来ているところが GREATです。



＞ これってプログラムでどうやって表現するんだろう

　わかりますｗ
　最近はめっきり作ることはなくなったのですが、「おっ」と思うエフェクトを
見たときはいろいろ考えてしまいますね。

　今回のも一口に火といってもどういうデザインコンセプト上のどういう背景の上で
何がどう燃えているのかで、表現方法やパラメータが変わります。
　そういう意味で、何を燃やそうか考えながらエフェクトを作るのは楽しいですね。


　で、ＤＸライブラリで作ってみました。
　ふたを開けてみたら、前回のとは結構違うものになりました。
　相変わらず、火に見えるかどうかちょっと微妙なところもありますが
前の動画のやつよりは多少はマシになった……ような気がします。

ttp://toku.xdisc.net/cgi/up2/oiu/xs12304.zip.html
ファイル名 : xs12304.zip
解凍PASS : effect_fire


　diskの中に実行ファイルが入っています。
　
　ドラッグで位置を、ホイール回転で大きさを変更できますので、適当に位置を合わせて
下さい。

　ホイールクリックすると一時停止で再度押すと再開です。
　一時停止中にホイール回転をすると１フレームずつフレームを進めることができます。
　どう動いているのか諸バレです。

　あと、右クリックで煙の ON/OFFです。完全に蛇足です。


　ソリューション・プロジェクトファイルは VisualStudio2008SP1で、作られています。
　デバッグで実行する場合は、作業ディレクトリを diskに設定して下さい。
　
　コードの方ですが、火そのものを管理しているのは Effect::Fireクラスで、
火を構成する要素は Effect::FireDetails名前空間内にある各クラスが担当しています。
　前回の３つのパートとは役割が少し変わって２つの加算と１つの煙になりましたが、
原理的には前にと同じで、スケールかけて収束させているだけです。
　３つの要素は（中身はほとんど一緒なのに）それぞれクラスに分かれているので、
処理は追いやすいかと思います。

　ちなみに、DrawExtendGraph3Dを使って　DrawModiGraphFで４点出すのが面倒だった
為なので、計算すれば置き換えができるはずです。


　しかし、まぁこのエフェクトは２Ｄで使う場合には少し高コストですね。
　テクスチャを 64x64まで小さくし、発生数も抑えたので前のよりは軽くなって
いるのですがそれでもまだ重そうです。

　その場合やはり状況に合うならテクスチャアニメにするのがいいかと思います。

[けんたろうちゃん]

上級者の方にとっては、そこまで難しい事ではないかもしれませんが、
私のような初心者には非常に参考になるテクニックです。
こういったエフェクトテクニック集みたいなものがあれば、とても便利でうれしいです。

[Dixq (管理人)]

>>Justyさん

おぉ、素晴らしい！
すごく炎に見えます。
さすがクオリティが違うな～＾＾；

ホイール回転のコマ送りまで・・。
わかりやすいですね。
なるほど～こうやって炎を表現してるんですね。
ん～～エフェクトって面白いですね～、
何かエフェクト作成について勉強したいんですが、
本屋に行ってもそういう本も見かけないし、
サイトを回ってもたいして詳しく解説しているところがないし・・・、
みんな試行錯誤で作ってるんですかね？

>>けんたろうちゃんさん

私も同意見でまさに探しています。
サンプルプログラミングの館の本格版みたいなサイトがあったらいいんですけどね～・・。

>>Justyさん

あ、このプログラム、サンプルプログラミングの館に掲載させて頂けないでしょうか＾＾；

[けんたろうちゃん]

いやいやｗ
私からしたらDixqさんは十分すぎるほど上級者ですよｗ
龍神録、AeroBeat、その他どのゲームもエフェクトで原理を知りたいものがたくさんあります

[Dixq (管理人)]

私なんかいつも人に聞いたり真似したり、試行錯誤したりばっかりですよ。
DXライブラリの質問掲示板とか利用しまくりですし。
エフェクトなんやかんや既存システムのパクリばっかりですしね＾＾；

龍神録は東方から、エアロビートはjubeatやIIDX16なんか何度も見ながら作りました。
RemicalSoftのロゴ表示はこういうところから

[youtube][/youtube]

「このエフェクトかっこいいな～！」と思ったらソッコーVC立ち上げて試行錯誤やってみないと気が済まないタチなんで、エフェクト作りはよく好んでやります。

色々作ってるうちに「あの時作ったエフェクト応用できそうだな」ってのが、
もしこの先たまっていけば、
色々出来ることは増えるかも知れませんね。（今のとこ全然増えていませんが）

ということで、ゲームやったり動画見たりしている時に気に入ったエフェクトがあれば、
どうなってるのか観察して実現試みているうちに作れるようになるのではないでしょうか。

・・・と適当なレスを書いてみたものの、私もエフェクトの作り方は勉強したいのに、
そういう知識を得られる情報が見つからず苦労しています；

[Justy]

　遅くなりました。


＞このプログラム、サンプルプログラミングの館に掲載させて頂けないでしょうか＾＾；

　でしたらこちらをお願いします。
　MSVC9SP1以外でビルドが通るようにし、いろいろ抜けていた処理とか
コメントをいれたものです。

ttp://www.dotup.org/uploda/www.dotup.org409903.zip.html
DLPass : efire
ZipPass : なし


＞何かエフェクト作成について勉強したいんですが

　今エフェクトって結構シェーダに移ってますので、そちらの方なら
結構本が出ていたような気がしますが、ＤＸライブラリでも使えるエフェクトと
なるとそういう関連の本はあまり見かけないですね。



＞ みんな試行錯誤で作ってるんですかね？

　慣れによるところもありますがそうだと思います。
　なので、効率よくトライ＆テストできる環境をいかに作るかで、
効率が変わってくるのじゃないかと。

[Dixq (管理人)]

ありがとうございます＾＾
今の時間帯重いのかつながらないので、また後日拝見します～！
ご提供ありがとうございます☆


なるほど、２Dエフェクトって需要はなさそうですね。
それよりも３Dエフェクトの方が大事なのか・・。
最近ちょっと色んなグラフィカルなライブラリの勉強しているので、
３Dも含めて環境に依存しないエフェクトの作り方色々と勉強してみます☆

[Justy]

　さっきは普通にアクセスできてましたが、なんか重くなってますね。
　こちらにもアップしておきましたので、お暇な時にでも。
　
ttp://www1.axfc.net/uploader/He/so/254646.zip&key=efire

[ぬっち]

＞Justyさん
ありがとうございます！
揺らめき方が本物の炎みたいで、もの凄く驚きました。
プログラムでここまで表現できるとは思わなかったので少し感激しました・・

一つお願いがあるのですが、
このプログラムはマウスで炎を色々と調整できるようなのですが
そのマウスで調整できるようになっているプログラムが絡んで
炎のプログラムがややこしくなってしまって、分かりづらくて困ってるのですが
これを炎だけを描画するプログラムサンプル（マウス操作ではなく値を変えるだけで調整できるよう）を
変えて（作成して）いただけないでしょうか？よろしくお願いします＞＜

[kazuoni]

横から失礼します。

>マウス操作ではなく値を変えるだけで調整できるよう
炎の管理とマウスの管理は切り離されていますので、
MouseControlの部分をみて、必要なところ（例えばSetPosition、SetScaleなど）
を自分のコードに書き込めばよいかと。

いやはや、これは見事な炎です。
スケールをもう少しいじれるようにすれば、縦長炎、横長炎、
風向きの方向、風力というメンバを加えれば、風に流れる炎、
などなど、変えることも容易な気がします。（管理の仕方が素晴らしいです＾＾；）

自分のプログラムの書き方が、どんどんJustyさんの真似をしている気が(ry
いつも大変参考にさせてもらっています！

失礼しました。。

[Justy]

ぬっちさん
＞ 値を変えるだけで調整できるよう

　kazuoniさんが仰っている通り、MouseControlのマウス制御周辺をカットし、
直値指定に書き換えれば値を変えるだけで調整できるようにはなりますが。



＞ そのマウスで調整できるようになっているプログラムが絡んで
＞ 炎のプログラムがややこしくなってしまって

　多分ややこしくなってるのはそこではないような気がします。
　要らないと思ったところはどんどん削りながら、もうちょっと解析・分析してみて下さい。



kazuoniさん
＞ 変えることも容易な気がします

　そうですね。
　縦長横長は密度の問題があるとちょっと単純にはいかないかもしれませんが、
風なんかはすぐ作れるでしょうね。



＞ いつも大変参考にさせてもらっています

　そう言って貰えるとすごく嬉しいです。
　が、今回はサンプルということで、newしたポインタをlistに突っ込んで仮想関数で
処理してしまったり、同じような処理を用途毎にクラスに分けたりと
いろいろ実行効率とか無視して書いているので、あまり参考にされないほうが
いいかもしれません……。

　そのあたりも含めて、少し書き直してみます。