忍者ブログ

たうのゲームブログ

ウディタ等で制作したゲームやツイッターに書ききれないことや備忘録など書き連ねていきます.

ウディタで画像処理したい(その2

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

ウディタで画像処理したい(その2

続かないだろうなと思っていた,ウディタで画像処理(フィルタ処理)の備忘録記事です.
前回は「平均化フィルタ」をウディタ内でやってみて,実用化は難しそうだねって話をしました.
おさらいすると・・・
・マップチップを画素ごとに表示していたのでピクチャ枚数がえげつない(重くなる
・マップタイル内の任意のマップチップを画素単位で分割表示できない
 (最大分割可能数は10000なので,2列以上のマップタイルは画素単位での分割が不可能)
ということでした.
詳細はこちら(ウディタで画像処理したい(その1))

そもそもなぜ画素単位で処理を行っていたのかというと,前回の記事に載せた画像のように
画素単位でマップチップにウェーブ等を加える処理を行えるようにしたかったからなんですよね.
そのうえでマップチップにぼかしを加えられたら演出のレベルが上がるかなぁ・・・って感じで
要は汎用的にしたいあまり画素ごとの処理に固執していたというわけ.

そんなこんなで「実装は無理かなぁ」と完全に諦めモードだったんですが,
こんなツイートを発見!
前回の記事を見て興味を持っていただき,
僕とは違うアプローチで平均化フィルタを実装していただきました.
ソースコードも公開されていますが,要約すると以下の通り.
・平均化フィルタを使いたいだけなら,画像ごとを各方向にずらして表示するだけで事足りる
双方の手法の違いを簡単に図で示すとこんな感じ(余計わかりにくいか・・・?



結果的に得られるものはどちらも「平均化フィルタ(モザイク)」ですが,
ピクチャの使用枚数に圧倒的な差があります.
画素ごとに表示する方法では当たり前ですが画素数分ピクチャが必要です.
デフォルトの1画面分(20x15マス)に32x32のマップチップを表示するためには
単純計算で総枚数30万強ものピクチャが必要となります.
一方で画像をずらす処理では,5x5マスの平均をとる場合でも最低7500枚で事足ります.
(1マップチップごとにx,y方向それぞれに-2~2マ画素ずらして配置するため1マス25枚必要)

こいつはすげぇや.
この方法に変えることのデメリットを強いてあげるなら,
1画素ごとにエフェクトをかけられなくなることですが・・・
前回の方法はマップチップの表示すら危うい出来なので,実質デメリットなしですね!(よいしょ

前回の記事とは一転して実用化への光が見えてきたので,いろいろ実験しながらとりあえず実装.
その結果がこちら.(前回通り考えたことがその後続くので,結果だけ見たい方はここでおしまい)
ぼかす前 ぼかした後
こんな感じで,画面スクロールなしの1MAPゲームと相性がいいのではないかと.
今後の展望としては以下の通り.(続けるとは言っていない
・主人公の上に表示される設定のマップチップはぼかせない
・現段階の仕様上レイヤー2以降のマップチップの位置にしたのレイヤーの画像が透ける.
(赤いドアのところがわかりやすいかも.レイヤー1の壁の木目が透けてます.)
・主人公はぼかせない(やりたくない
・オートタイルは非対応(やりたくない


◆◆◆結果はここまで◆◆◆
(以降は妄想やら考察やら試してみたことやら・・・つらつら書き連ねるだけ)

ここからは「いろいろ実験してみた」のところの深堀りです.
実は前回の記事の手法(画素ごと表示)の際は,実装の途中で「あ,無理だこれ^q^」
となったので,ピクチャ表示は結構なぁなぁで作ってしまいました.
「平均化フィルタをかけたように見える」とぼかして書いているのはそのためです.
(本当に平均化できてるの?という追求からの逃げ道)

しかし今回の方法はそれなりに処理も軽く,実用化の目途もたちそうなので,
コモンイベントを組む前に試したいことがありました.

それは「不透明度」と「表示形式(通常・加算など)」の仕様確認!
言ってしまえば単純に自分の知識不足を補いたかっただけです.
・不透明度を変えた後に,通常表示で重ねればいいの?加算表示使うとどうなるの?
みたいな.何言ってんの?って感じだと思うので,とりあえずやったことを書いていきます.

◆不透明度と通常表示について
ピクチャ表示の不透明度設定について,これまで僕は
「最大値は255,最小値が0,間の値にすると半透明~」くらいの認識でした.
突然ですが,一般的なカラー画像はR(赤)G(緑)B(青)の三色の情報からなります.
(ドット絵ツールのカラーパレットや,画像ビューアーの表示から確認できますよね)
それぞれふつうは最大値255で,(R,G,B)が(255,255,255)なら白,
(255,0,255)なら紫といった具合に変化します.
そこでこんな画像を用意しました.
真っ白!
見るからに真っ白な画像.当然全画素において画素値は(255,255,255)です.
この画像を様々な設定で表示させ,その時の画素値を見ていきましょう.
ちなみに今回は「IrfanView」というフリーの画像ビューアーで画素値を確認していきます.
こんな感じで確認できます.

この画像の不透明度を変えて画素値を確認した結果がこちらです.
不透明度150 不透明度100
不透明度150で表示した結果 不透明度100で表示した結果

これらの画像からわかることは,画素値255の画像を各不透明度で表示すると,
不透明度に合わせて画素値が変化することです.

そりゃそうだって?
じゃあ「不透明度150のこの画像を通常表示で重ねたら」どうなるでしょう.
各画像の画素値がAll150になって・・・それが重なるから・・・300?そんなわけないですよね.
結果はこうなります.
ついでにこのような結果も載せておきましょう.
こちらの結果は,背景にマップチップが存在する箇所に不透明度150で通常表示した結果です.
ここからもわかるように,背景あるいは他の画像と重なった部分の画素値は,
画像同士の画素値の和ではないことがわかります.
不透明度255未満で通常表示された画像には以下のようなことが起こっています.

(間違っているかもしれませんが)アルファブレンディングみたいなアレです.
要は不透明度を重みとして,背景と前面のピクチャの画素値が混ざり合う感じ.
AとBとxに画像からわかる各数値を当てはめて計算すると,すっきりできます(多分

とはいえ,僕がやりたいのはこの数式を偉そうに説明することではありません.
この数式からわかることは.
・背景が黒(0,0,0)でピクチャが真っ白(255,255,255)なら,表示される画像の画素値=不透明度
・背景が黒でなければ,不透明度によってうまい感じに画素値がブレンドされる
ということです.


ちょっとまてよ,いきなりそんな話し始めて一体どうしたんだお前.


ここで平均化フィルタの話に戻りましょう.
平均化フィルタは指定領域内の画素値の平均をとる処理でした.
1点だけ黒い画素がある真っ白な画像を3x3の領域で平均化するとこんな感じ.

そしてもう一つ,ウディタでは画像の画素値を取得できません
上記の理由から,僕もシグラルさんも「画像の不透明度を弄って画像同士重ねる」
という手段をとって平均化っぽいことをしていたわけです.

・・・とすると,例えば3x3領域の平均をとりたいとするじゃないですか.
3x3領域なんで,全8八方向に画像を1画素ずつずらして重ねるんですが,
その時に全部の画像を不透明度を1/9にして,重ねたら,いい感じに,平均化・・・・

できない・・・!通常表示じゃ・・・!
重なった部分の画素値は,ピクチャ同士の画素値の和ではない・・・!
と叫びたいがためにここまでずっとこの話をしてきました.(ザワザワ)
(まぁそれっぽく見えはするんですけどね汗)

◆加算表示について
ここまできてようやく出てくるのが「加算表示」になります.
加算表示は読んで字のごとく画素値を足し合わせてくれます.こんな具合にね.
不透明度100・加算表示で重ねて表示 和になってる・・・
ついでにこんな画像も載せてみる.
不透明度100・通常表示で重ねた結果 不透明度100・加算表示で重ねた結果
上のカラーバー同士を直行させて重ねた結果です.
(わかりにくいけど)微妙な色味の違いが生じるもんですね.(それ以上の情報は無い)

まとめると,平均化処理を行いたいのであれば,画像を重ねる枚数に合わせて不透明度を弄り,
加算表示することが必要となる.ということです.
と,ここまでの結果を得て,すっかり満足した僕は,平均化フィルタ処理実装後に叫ぶことになります.
ナンジャーコリャー
この後の奮闘の記録は,また別の記事で残します.

次はこちら(その3

別に引っ張ることでもないのでこのバグの原因を言うと,
レイヤー2以降のマップチップも加算表示にしてしまったことです.
当然レイヤー2以降は,背面が真っ黒な背景という場合よりも,
レイヤー1の画像が設置されている場合のほうが多く,加算表示することで
レイヤー1の画像に画素値が上乗せされてしまい,結果的に匠の手によって
すべてのインテリアが幻想的に輝く素敵なお部屋になってしまいました.
このバグを防ぐために現段階ではレイヤー2以降は通常表示にしています.

最後にはなりますが,シグラルさんには厚くお礼申し上げます.
あのツイートがなければ,フィルタ処理をすることは一生ありませんでした・・・
今後ともよろしくお願いいたします.
------------------------------------------------------------------------------------------------
◆お問い合わせはこちらまで◆
メール(tau.accs@gmail.com)
ツイッター(@Labyrith_Hyde
------------------------------------------------------------------------------------------------
PR

コメント

プロフィール

HN:
たう
性別:
男性
自己紹介:

ウディタ・Unity(勉強中)を使って
ゲーム作りしてます.主な進捗はTwitterに.
Twitterに書ききれない進捗や,
備忘録を不定期で記録していきます.
よろしくどうぞ.

◆お問い合わせはこちらまで◆
メール(tau.accs@gmail.com)
ツイッター(@Labyrith_Hyde

P R