【画像処理？】東方のような発射処理

[Yperia]

お世話になります。

東方の地霊殿と星蓮船で確認したのですが、東方の敵キャラが発射する弾は発射直後はぼかしています。（よね……？）
どうにも説明しにくいので動画を。
http://www.youtube.com/watch?v=5VRkV60p ... re=related
http://www.youtube.com/watch?v=38uojZEs ... re=related
ご覧いただくとお分かりになるかと思うのですが、敵キャラが弾を発射した瞬間、その弾がぼけてると思います。


この処理をやりたいのですが、どうすればできるでしょうか。
私はDxライブラリでDrawXXXXXX関数しか使ったことがなく、想像がつきません。
キーワードだけでもいただけますと嬉しいです。


よろしくお願いします。

[Dixq (管理人)]

なるほど・・案外気づかないものですね・・
龍神録を作る時、弾を発射する瞬間、敵の上に変に重なってしまうので、見た目が良くないなと思っていましたが、なるほど、こうやって自然に見せていたんですね。

ぼかすことについては、ぼかす処理をDXライブラリですると難しいので、あらかじめぼかした画像を用意して重ねたほうが早い気がします。
ぼかし画像の上書きレベルを発射直後は非常に強く、次第に弱くして弾をはっきりさせていくとよいと思います。

[Yperia]

＞ぼかすことについては、ぼかす処理をDXライブラリですると難しい～
やはり、駄目でしょうか。
DirectXを直接触らないと、このレベルは解決できないものですかね……。

[へろりくしょん]

>＞ぼかすことについては、ぼかす処理をDXライブラリですると難しい～
>やはり、駄目でしょうか。
>DirectXを直接触らないと、このレベルは解決できないものですかね……。

ＤＸライブラリでも面倒なだけで、不可能ではないですよ。


ＤｉｒｅｃｔＸについては分かりませんが、おそらくＤＸライブラリを利用する場合と手間は変わらないかと。

[h2so5]

簡単なぼかしであったらそれほど難しくはないように思いますが。

一応DXライブラリでも、（速度は知りませんが）
画像へのドット単位でのアクセスは可能のようですから。


そもそもYperiaさんは、なぜDXライブラリ側でぼかしをしたいのでしょうか。

使用する弾の画像の種類が多くないのであれば、あらかじめぼかした画像を
用意しておくのがやはり簡単だと思います。
ゲームプログラム側でいちいち作成するのは無駄が多いです。

[Dixq (管理人)]

ぼかす場合、例えば周囲のピクセルの輝度から、ある程度の領域の平均を求めればすぐに出来ますので、
アルゴリズムとしては簡単だと思います。
しかし、毎回計算しなければならないので、余計に無駄が多く、STGのように計算量の多いゲームはなるべく計算量を少なくしたいものだと思うので、やはりあらかじめ画像を用意したほうが良いのではないでしょうか。

RPGで戦闘画面に入る瞬間フィールドの映像をキャプチャし、ぼかしたりエフェクトをかけるような場合は、その都度計算する必要があるかもしれませんが、
事前に画像が用意できる場合はなるべくそうした方が良いと思います。

勉強するためにぼかしの練習をしてみたいということであれば、
DXライブラリの関数一覧にある「ドット単位で画像にアクセスしたい関係」の関数を使って画像を変化させると良いでしょう。
画像とは別に同じサイズで変化させた画像を格納する領域を用意しておき、
例えば3x3などのピクセル領域の輝度の平均を一つずつ格納していけばぼかせると思います。

ここで、大きな画像だと非常に計算に時間がかかります。
なるべく高速化を考えたほうが良いでしょう。
ピクセルの平均を計算するような場合、ほとんどの計算が以前行った計算とかぶります。

■■■□□
■■■□□
■■■□□

□■■■□
□■■■□
□■■■□

□□■■■
□□■■■
□□■■■

白い■の部分が計算領域だとすると縦の3つはかなりの確率で計算がかぶります。
また、

１４７
２５８
３６９

の順番で足し算するのと、

１２３
４５６
７８９

の順番で足し算するのは全く計算スピードが違います。
配列が横方向に連続して並んでいることを考えればわかるとおりです。
もし勉強がてらぼかし機能を実装されるときは、このような所も工夫されるとよろしいかと思います。

[Dixq (管理人)]

追記：
画像処理を勉強する時はこの辺参考にすると面白いですよ。
http://imagingsolution.blog107.fc2.com/ ... ry-20.html

[Yperia]

ご返信ありがとうございます。

やはりプログラム側でやる場合は、ドット単位でアクセスして～　との話になるのですね。
それは思いついてはいたのですが、Dixqさんも仰る通り、STGでそんなことはしてられません。
かといってZUNさんは東方でどうやっているのかを考えたとき、もしかしたらプログラミングだけでやっているのでは、と思いまして。
画像処理のことがまったく分からないので、DXライブラリにもあります回転や拡大といった処理程度のコストで実現可能なことなのかな、と期待してました。

皆様の仰る通り、ぼかし画像を使ったアニメーションにしたいと思います。
DixqさんのURLも、時間があるときに見たいと思います。

ありがとうございました。

[Justy]

＞プログラム側でやる場合は、ドット単位でアクセスして～　との話になるのですね
　そういうことではありますが、必ずしも自分でピクセル単位でアクセスして作らなければ
ならないかというと、そういうわけではありません。

　アルファブレンドで薄くしたものを何度も微妙に座標をずらしながら書き込んでも、
ぼけたような画像を作り出すことはできますし、最新のＤＸライブラリなら別の方法もあります。


　ただ、動画をみる限りではぼかしというほどのものでもなさそうなので、普通にアルファブレンドで
薄くしてバイリニアをかけて拡大表示したものから通常表示への遷移を行うだけで
いいんじゃないかと思いますけど……。

[yu]

>> Justyさん
>ただ、動画をみる限りではぼかしというほどのものでもなさそうなので、普通にアルファブレンドで
>薄くしてバイリニアをかけて拡大表示したものから通常表示への遷移を行うだけで
>いいんじゃないかと思いますけど……。

私もそう思いますｗ
地霊殿は良く見てないので確かなことは言えないですが、
紅魔郷では弾発射の瞬間に拡大してアルファブレンドしてるだけだったはずです。
後、弾発射のときに別の画像を上から重ねていると思います。

[Yperia]

＞　ただ、動画をみる限りではぼかしというほどのものでもなさそうなので、普通にアルファブレンドで
薄くしてバイリニアをかけて拡大表示したものから通常表示への遷移を行うだけで
いいんじゃないかと思いますけど……。

確かに、言われるとそのように見えます……。

＞紅魔郷では弾発射の瞬間に拡大してアルファブレンドしてるだけだったはずです。
後、弾発射のときに別の画像を上から重ねていると思います。

更に「地霊殿と星蓮船は同じ処理に見えますけど、紅魔郷のは違うように見える」ということを考えますと、「じゃあ地霊殿＆星蓮船は何をしているんだ」って感じになってしまいますね……；；
実際に画像使って確かめてみたいと思いますので、報告は遅くなってしまいそうです。



＞　アルファブレンドで薄くしたものを何度も微妙に座標をずらしながら書き込んでも、
ぼけたような画像を作り出すことはできます

この程度でも、弾が2000発まで行きますとアウトになると思います。。。


＞最新のＤＸライブラリなら別の方法もあります。
他の方法もあるのですね。
無知で申し訳ありません。
調べて考えて見たいと思います。

[Justy]

＞yuさん
　同じような意見で良かったです。



＞Yperiaさん
＞確かに、言われるとそのように見えます……。
　下の動画の最初の方の雑魚敵だと顕著にそう見えますね。


＞この程度でも、弾が2000発まで行きますとアウトになると思います
　起動時やステージデータロード中などで、空のテクスチャにぼかした画像を事前にレンダリングしておいて
ゲーム中はそれを使いまわせば普通に1回の弾につき１枚のぼかしテクスチャを使用するだけになりますので
まぁ大丈夫かなと思いますけど、さすがに 2000個だとどうなんでしょう……。


＞他の方法もあるのですね
　具体的にいうとシェーダーが使えるようになっています。
　今回は使うことはないでしょうし、ちょっと敷居が高いので現段階ではお勧めはしませんが、
調べてみる分には面白いかと。

[ISLe]

> ご覧いただくとお分かりになるかと思うのですが、敵キャラが弾を発射した瞬間、その弾がぼけてると思います。

弾が発射される場所に発射エフェクト(半透明の円)が表示されているように見えます。
ボス戦で発射エフェクトが表示されたあとに弾が配置されています。同じ処理だと思います。
エフェクトの色は発射される弾の色と同じのようです。

[ｙ]

実は全く複雑なことはされてません。
なぜなら、そんな複雑なことを弾全てにすると、死ぬほど重たくなるからです。
で、具体的にどうしているかというと、添付した画像のような画像を用意しておき、
弾が発射されてから実体化するまでの間に表示させています。
その間、倍率指定で大きくしていた画像をだんだんと、弾と同じくらいの大きさまで小さくし、
アルファブレンドで真透明からだんだんと不透明にしていききます。

東方は、パッと見すごいエフェクトを使ってるように見えたりしますが、実は全然すごくないです。
こう言うと東方を貶してるようにも見えますが、
逆にこんな簡単なことでここまで魅せるのはすごいなと思います。

尚、画像は本家から抜き出したわけではなく、私が似せて作ったものです。
勝手に使っても構いませんが、こういう画像を作ってみるのもまた楽しいものですよ。
オリジナルのエフェクトを作ってみると、作るゲームに愛着が湧いたりします。

※変換ミスがあったので編集させていただきました

[Yperia]

レスありがとうございます。



＞　起動時やステージデータロード中などで、空のテクスチャにぼかした画像を事前にレンダリングしておいて
ゲーム中はそれを使いまわせば普通に1回の弾につき１枚のぼかしテクスチャを使用するだけになりますので

なるほど、そういう風にすれば、画像を新たに用意する必要はなくなりますね。
薄いαブレンドを多重に→保存という感じですかね。


＞まぁ大丈夫かなと思いますけど、さすがに 2000個だとどうなんでしょう……。

単にDxLib::DrawGraphでしたら、弾の画像次第ですが、（その他の処理も考慮して、）2000がギリギリかなぁという感じです。（普通に処理落ちするレベルですけど）
（東方も2000発以上は出ないようになってますね。）


＞　具体的にいうとシェーダーが使えるようになっています。
　今回は使うことはないでしょうし、ちょっと敷居が高いので現段階ではお勧めはしませんが、
調べてみる分には面白いかと。

3Dはまったく分からないのですが、本家の真似をするとなると背景で使うことになりますので、今の内に勉強しておくのも良いとは思います。
あまり深く突っ込まないようにしようと思ってますので、弾の方に活かせるかどうかは分かりませんが；；



＞弾が発射される場所に発射エフェクト(半透明の円)が表示されているように見えます。
ボス戦で発射エフェクトが表示されたあとに弾が配置されています。同じ処理だと思います。
エフェクトの色は発射される弾の色と同じのようです。

仰るボスは地霊殿（上）の方ですかね。
地霊殿ボスの最初の通常弾幕は、確かに別にエフェクトを使っているように見えます。
しかし、あれだけは特別に用意した何かであるように思えます。（雑魚のとは違うもの）
詳しくは分かりませんが……。。。

[ｙ]

舌足らずなところがあったので追記。
俗に大弾と呼ばれる弾や特殊な弾（炎弾や水弾など）は、
その弾の画像自身でエフェクトを作ってるようです。
その他の弾は、大体上で書いた方法です。
違って見えるのは、実体化までの時間が長かったり短かったりするせいです。
ナイフも小弾もクナイも、全部おんなじようなエフェクトを使っています

[Yperia]

ｙさん

おおう、実はそうなのですか……。
確かに、それだけなら簡単ですね。
仰る通り、複雑なことをするとすぐ重たくなってしまうので、逆に簡単な手法だけで何とかするように考えなくてはならないのですね……。
新作のアイスも凄いなと思いましたが、その制限で魅せるのは、やはり腕なんでしょうね。。。


ところで、実際にどうやってやっているかというのは、どうやれば見極められるのでしょうか。
最初、私にはぼかしているようにしか見えなかったのですが……。

[ｙ]

よく見る。これに限ります。
東方は比較的難易度の低いSTGなので、イージーでまったりスナップショットの旅に出かけたあとに、
撮ったスナップショットとにらめっこして見極めるもよし、
ルナティックでクリアしたリプレイをあとでじっくり見ながら見極めるもよし。
あとは東方の場合は、どうすれば簡単に速くできるかを思いつけば、
なんとなく同じものは作れると思います。
大体のエフェクトは、１エフェクトに付き１～３種類くらいの画像しか使ってません。
なので、DxLib::DrawRota(F)があれば、大体実装できます。

極端な話、プログラムがダメでも画像がちゃんとしていればそれなりに綺麗に見えるので（当たり前ですが）、
そこまで悩む必要はないですよ。

[あ～る]

>実際にどうやってるか

グリモワールオブマリサとか参考にするのも良いと思いますよ

[Dixq (管理人)]

私は東方のエフェクトを真似たいときはいつもプレイ画面をキャプチャした動画をコマ送りにして確認していましたよ。
すごく綺麗に見えるエフェクトも一つ一つを確認すると案外簡単な実装だったりします。
実装は簡単なのに、見た目は美しく見えるとは、やはり実装した人(ZUNさん)のセンスが良いのでしょうね。

確認する為の動画を用意してみました。
[nico]http://www.nicovideo.jp/watch/sm11769098[/nico]

[Yperia]

ふむふむ。
確かに、Dixqさんの動画を見ると、明らかにｙさんの仰る通りということが確認できますね！
これからは動画を撮るようにします。


＞グリモワールオブマリサとか参考にするのも良いと思いますよ
とりあえずamazonのショッピングカートに放り込みました　笑

[ＨＫ]

私も以前、東方っぽいゲームをつくろうと思って、同じようなことで悩みました。
私が取った解決策は、「CaptureD」という、スクリーンショットが撮れるフリーソフトを使って
実際に東方のゲームをやりながら、敵が発射する瞬間や、自機がやられて敵弾が消える瞬間の
スクショを1000枚くらい撮って、じっくり見ながらを研究しました。

いろいろ調べた結果、わかったことを以下に書きます。
東方では敵弾発射時にのみ使われる
専用の弾画像（No:59065 でｙさんが添付されている画像）
をおよそ20フレームほど表示しています。

本家の素材ではこの画像を（たぶん）8色用意しており、
発射される弾の色に合わせて使い分けられています。

その表示方法もNo:59065 でｙさんが仰られている通り、
最初は透明度を高くしておき、だんだん不透明にしています。

また、本家東方では、透明度だけでなく、大きさも連続的に変化
させています。最初は大きく表示し、フレームごとに小さくしていくと、
本家と全く同じ感じが再現できました。

まとめると、発射直後の20フレーム中に
アルファブレンド：0→255
大きさ:だいたい2.5倍→0.5倍

とすれば、本家を再現できます。「だいたい」の部分は試行錯誤

大玉やレーザーなどは、また別な描画方法を取った方がいいと思います。
弾の書き方を考える際は、ぜひスクリーンショットを。
とすすめてみます。