グラデーションのかかった画像の表示方法

[piko]

グラデーションのかかった爆風のエフェクトを表示しよう思っているのですが
黒に近いところが黒く表示されて画像なのがわかってしまいます

透明PNGを試してみたのですが加算ブレンドしても暗くなるだけで明るく表示されません
透明PNGにしなかったらまぶしく表示されるのですが・・・

皆さんはどうやってまぶしくて透明感のあるエフェクトを表示していますか？
描画はDXライブラリを使っています

[softya（ソフト屋)]

データとプログラムを見せてもらわないとなんとも言えないですね。

[piko]

すいません、日本語がおかしかったみたいです

簡単に言うと斑鳩というゲームみたいな爆風を表示したいです

こんな感じでエフェクトが重なったところだけ色が変わってるように見えます
重なればどんどん明るくなります

自分が作ってる爆風の画像です

普通のPNGは色はましなんですが画像を重ね合わせたのがわかって汚く見えます
こっちはGraphBlendでブレンドした画像を普通にDrawGraphで描画してます

コード:

 
GraphBlend( bakuhuuG, BlendGraph, 255, DX_GRAPH_BLEND_ADD) ;
 DrawGraph(x,y,bakuhuuG,TRUE);

透明PNGのほうは薄くて色も暗いです

（透明で色が濃くて重なったところだけ明るくなってあまり色が重なってないところは背景が
透けて見えるのが理想です）
こっちはGraphBlend関数を使って加算ブレンドして何度も同じ座標に表示してます

コード:

 
GraphBlend( bakuhuuG, BlendGraph, 255, DX_GRAPH_BLEND_ADD) ;
for(int i =0;i<num;i++){
        DrawGraph(x,y,bakuhuuG,TRUE);
}

 

[softya（ソフト屋)]

SetDrawBlendModeで画面上で合成したらどうでしょうか？
「ＤＸライブラリ置き場　リファレンスページ」
http://homepage2.nifty.com/natupaji/DxL ... html#R3N17
最後にDX_BLENDMODE_NOBLENDに戻すのは忘れないようにしてください。

[piko]

教えてくださった通りにやってみましたが
どうも背景に影響されるようですどうすればいいのでしょうか...
画像URL↓
http://kie.nu/3tN

コード:

 
DrawGraph(HaikeiX,HaikeiY,aoiro,TRUE);
	
SetDrawBlendMode( DX_BLENDMODE_ADD , 255 ) ;
for(int i = 0;i<10;i++){
	DrawGraph(300,340+i*10,bakuhuuGraph,TRUE);

}
SetDrawBlendMode( DX_BLENDMODE_NOBLEND , 0 ) ;

[piko]

過去の画像が流れてしまったのであげなおします

簡単に言うと斑鳩というゲームみたいな爆風を表示したいです
http://kie.nu/3tQ
こんな感じでエフェクトが重なったところだけ色が変わってるように見えます
重なればどんどん明るくなります

自分が作ってる爆風の画像です
http://kie.nu/3tP
普通のPNGは色はましなんですが画像を重ね合わせたのがわかって汚く見えます
透明PNGのほうは薄くて色も暗いです

[softya（ソフト屋)]

元の画像自体に透明度のグラデーションは付けてありますか？画一的な透明度だと難しいと思います。
難しいと思ったら、白く明るいなってほしい部分と別画像に分離して別々に合成する方法でも構いません。

[piko]

いろいろ試してみましたが無駄でした
どうやら自分には無理なようです

質問に答えてくださってありがとうございました

[ISLe]

何をいろいろ試したのでしょうか。
プログラムではなくて、画像データで解決する問題ですけど。
αチャンネルというものをご存知ですか？
αチャンネルを編集できるグラフィックエディタをお使いですか？
使ってる爆風の画像ファイルそのものを提示されないのには何か理由がありますか。

加算合成なので背景の色に影響されるのは当たり前ですね。
そうでなければ透けたように見えません。
中心の明るい部分の透明度を低く、周辺に向かって透明度が高くなるようにαチャンネルを編集すれば期待どおりになるでしょう。

[piko]

自分がやりたかったのはすべての色が透明な画像で同じ画像を合成して合成した画像を背景にかぶせるような感じにしたかったのです（透明な画像だけで）
ですが今のは合成した画像と背景をさらに合成してるように見えます（色が変わりすぎ）

アルファチャンネルはよくわかりません
透明にすることはできますが透明度の変え方はわかりません（DXライブラリの関数でできたらゲーム中に操作できてよさそうなんですが）
ソフトはGIMP2をつかってます
やり方はキャンバスに色を塗ってそれをモノクロにしてレイヤーマスクにしてます
このページの最後を参考にしました
http://smileboom.com/tkool/alpha.html
そしてこれが自分の使っている画像です
http://kie.nu/3w3

自分が試してみたのは描画をグラフィックソフトのレイヤーみたいに描画できたらいいと思って
SetDrawScreenで裏画面に描画してることを思い出してこんなプログラムを書いてみましたが意味がありませんでした

コード:

    int Layer1 = MakeScreen(800, 600,TRUE); 
	SetDrawScreen(Layer1); 
	ClearDrawScreen(); 
	SetDrawBlendMode( DX_BLENDMODE_ADD , 255 ) ;
	for(int i =0; i<5; i++)
	{
		DrawGraph(0,0,bakuhuuG,TRUE);
	}

	SetDrawBlendMode( DX_BLENDMODE_NOBLEND,0 ) ;
	SetDrawScreen(DX_SCREEN_BACK); 
	
	DrawGraph(bakuhuuPosX,bakuhuuPosY,Layer1,TRUE);

どうしても透明な画像だけで描画したかったのです

[ISLe]

自分がやりたかったのはすべての色が透明な画像で同じ画像を合成して合成した画像を背景にかぶせるような感じにしたかったのです（透明な画像だけで）
ですが今のは合成した画像と背景をさらに合成してるように見えます（色が変わりすぎ）

斑鳩のような爆発を描画したいのではなかったのですか？
やりたいようにやるならアドバイスは必要なのでしょうか。

画像を見てみました。
αチャンネルは付いているのですね。
ですが、ベタ塗りで爆発っぽくありません。

即席ですが、画像を作ってみました。
pngに変換して黒いピクセルができてますが、作成するときは端まで塗り潰すのが定石です。

爆発画像

bomb.png (4.59 KiB) 閲覧数: 6250 回

加算合成でランダムに描画してみるとこんな感じになります。

ランダムに表示してみた

あとはアニメーションするように爆発パターンをいくつか用意したり、描画位置や動かし方を工夫してみてください。

[softya（ソフト屋)]

> http://kie.nu/3w3
この画像にこだわる限りは思ったような合成は不可能です。
この画像を使うことが目的なのか、思ったような爆発を作ることが目的なのかどちらなのでしょうか？

ISLeさんの作ったような画像を自分でも作ることをお勧めします。

[piko]

ISLeさんがあげてくださった二番目の画像の青いところを見てみると
自分には爆風に青いガラスをかぶせているように見えます
もう少し色合いが何とかなればいいなと思います
背景の上から爆風の画像を表示しているから爆風の色合いを優先してほしいです
自分の目がおかしいんでしょうか・・・

＞この画像にこだわる限りは思ったような合成は不可能です。
＞この画像を使うことが目的なのか、思ったような爆発を作ることが目的なのかどちらなのでしょうか？


画像にこだわったのは黒背景でそこそこきれいに見えたのでDXライブラリの関数次第で何とかならないかと思ったからで画像自体にこだわりはありません
できればこれくらい乱暴にできたらいいなと思いました

加算合成を使ってそうなゲームでここまで色合いが変わっているのはみたことなかったのでもっと簡単にできるかと思ったのですが思いのほか難しいようで回答者さんを混乱させてしまいました
申し訳ありません

[piko]

画像がないとどんな風にしたいかわかりずらいですね
画像をはっておきます
http://kie.nu/3xx

上の方は背景が透けつつ爆風の色はあまり変わってないように見えます

[softya（ソフト屋)]

それであれば爆発にアルファチャネル（周辺は黒く中の方は白く）を設定して普通に描画するだけです。加算をしてはいけません。

[ISLe]

背景が透けるように描画しているので青背景だと青みがかるのはとうぜんというか意図したものですが。

わたしの作った爆発画像をGIMP2で読み込んでみてもらえば分かると思いますが、中心ほど不透明度が高いαチャンネルが設定されています。

pikoさんの理想のように、中心はより不透明に、周辺はより透明に、というふうにしたいなら、レイヤーマスクでαチャンネルをそのように編集するだけです。
そういう画像が欲しいというのならそれはもう質問ではなく依頼ですよ。

(追記)
加算合成じゃないと爆発画像が重なったところでエッジが目立ってしまうと思いますけど。

[ISLe]

改めて、純粋に斑鳩の実装を確かめるため、YouTubeにあった斑鳩の動画を見てみました。

pikoさんのおっしゃる発光部分の色合いですが、斑鳩では発光のバックに必ず黒煙が描画されているため色合いが一定になります。
黒煙が背景マスクを兼ねているわけです。
さらに、だんだん透明になって消えますが、黒煙のほうが消えるのが遅いので発光部分が最後まで目立つようにもなってます。

爆発が重なったときに黒煙が前に出ないように、黒煙をすべて先に描画して、あとから発光を描画する必要があるでしょう。

[piko]

＞pikoさんのおっしゃる発光部分の色合いですが、斑鳩では発光のバックに必ず黒煙が描画されているため色合
＞いが一定になります。

ここが知りたかった！おかげでできました

後は時間さえかければできそうです
ありがとうございました

[ISLe]

縁のあるパターンは加算合成しないと縁が黒く出てしまうのですが、斑鳩は単色のパターンで通常描画しているように見えます。
この場合明るいものほど優先順位を高く描画しないと不自然に映ると思います。
#黒煙を最も暗いとすればソート条件はひとつになります。

加算合成を使うと大爆発のとき画面が真っ白になってしまうんですよね。
いわゆるポケモンショック対策のひとつですがコンシューマゲームで画面の大部分を覆うところに加算合成は使わない気がします。

[piko]

回答をもう一度見直しやりなおしました

加算合成せずに普通に表示して透明PNGの透明度をDX_BLENDMODE_ALPHAで変えてフェードアウトさせてみると
だいぶ似た感じになりました
特に煙を表現しているときにそれっぽくなるので普通描画で光ってるように
見えるように画像を描き直すようにしました
描くのが下手なので時間がかかりますがしょうがないですね・・・