忍者ブログ

たうのゲームブログ

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

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

×

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

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

ウディフェス作品の修正に追われ,平均化フィルタの最後の記事を書き損ねていました.
ウディタで画像処理シリーズ(?)の真の最終回です.
これまでの記事はこちらから
ウディタで画像処理したい(その1
ウディタで画像処理したい(その2
ウディタで画像処理したい(その3

まずは結果から.
前回までの平均化処理 今回の平均化処理
どちらも3x3領域の平均化を行った結果ですが,エッジ部分の不自然さがなくなっていると思います.(後光とか,疑似輪郭のようなものとか)
何をしたかはいつも通り追記欄に書きますが,
これまで加算表示で行っていた処理がすべて通常表示で行われています.
通常表示で処理できるようになったということは,こんなこともできるようになってます.
これまでの処理(タイルを振動させている) 今回の処理(タイルを振動させている)
タイルをただ純粋に重ねるだけでなく,ランダムな方向に振動させても,
加算表示していた時に生じていたタイル感がぐっと減っていることがわかります.
調整すれば画像のような砂漠マップで,画面端だけ蜃気楼のように揺らめく演出を
行うことができるかもしれません.

結果はこんなところで,以降はいつも通りつらつら書くコーナー

さて,テンション的には前回のものが最後のつもりだったのですが・・・
前回の記事を投稿した後にこのようなご指摘をいただき,検証を続けることにしました. というか前回の画像処理記事からひと月以上たってるんですね・・・たまげた
(作品の修正やら新年度のごたごたやらどうぶつのもりやら・・・いろいろあったなぁ)
上記ツイートの内容をまとめる前に,前回までのおさらい.

・ウディタ内で画像処理(平均化フィルタ)を動的にかけてみたい
・(いろいろあって)タイルをピクセル単位でずらして表示すればいいことがわかった
・いいところまで行ったが,エッジ部分に違和感の残る結果となった
前回の結果(再掲)
 前回までの記事では平均化フィルタを実現するために,
タイルを加算表示で重ねており,この加算表示がエッジ部分で悪さをしていました.

いやいや,通常表示でもできるっしょ!
というのが初めのツイートの内容です.(そんな言い方はしてない)

正直この返信が来たときは,「ついに来たか・・・」
という感じでした.痛いところつかれた感じ.
さて,画像処理記事のその2でこのような式を出したのを覚えていますか?

これはピクチャを色のついた背面に任意の不透明度で通常表示したときの
重なり部分における画素値を表す式なのですが・・・
「通常表示したときの重なり位置の画素値わかるなら,初めから画像ごとの不透明度計算して通常表示で重ねてれば後光とかエッジ部分の不自然さとか消せるだろ」
って思いますよね・・・どうせ誰にも読まれない記事だと思ってて横着しました.
加算表示で一律の不透明度でやったほうが簡単にコモンイベント組めたんだもの・・・

なんて言い訳はおいておいて,検証した結果こんな感じになりました
いやこんな感じになりましたって何よ!って感じですけど,詳しい計算は画像にして張り付けるの面倒だったので省いています.
要は,画像をn枚重ねる際に,重なっている位置の平均値をとるためには
一枚目の画像を不透明度1としたときにn枚目が(1/n)になるように重ねるってことです

実装依存の話をすれば,3x3近傍の平均化を行うなら,周囲8方向にタイルをずらすので
合計9枚の画像が必要となります.これらを不透明度255から128,85,64...ってな具合に
変化させながら重ねることとなります.(画像の位置的に真ん中の画像が不透明度255)
ちなみにご指摘いただいたツイートでは,背面の画素値を含めての平均値となっていましたが
その3で述べた背面のテクスチャが透けることを避けるため②のようにし,
背面を無視して重ねる画像のみの平均値をとるようにしています.

へんぷくさんに猛烈に感謝・・・
ちなみに本当に平均値になっているか疑わしい方は,上の図の条件で重なった位置の
画素値を計算してみると納得できると思います.

というか実際に試してみたほうがいい気がしてきた.
ってなわけでエッジが多いマップを用意
ねくらさんのマップチップは凝ったものが多くて,見ているだけでワクワクしますね・・・
このマップを前回までの方法と今回の方法で平均化処理したものが記事冒頭の比較図です
エッジ部分の多い画面左下の領域を拡大するとこんな感じ.
 
前回までの方法 今回の方法
一目瞭然・・・とまではいかないですが,葉の境目の不自然さが軽減されている気がします.

こんな具合で,平均化処理の記事はここいらでうち止めです(これ以上できることがない)
shift固定で配置されたオートタイル以外であれば,周囲のタイル状況から
平均化処理を行うこともできるでしょうし,前回のまとめに書いたとおり
タグを用いれば主人公の上に表示されるチップも問題なく処理できるはずです.

ちなみにここまでの記事はマップタイルについての平均化処理でしたが,
イベントで表示するピクチャも同様の方法でぼかすことができると思います.
(一枚絵を背景に用いているゲームとか,戦闘背景とか)
むしろこの技術はそっちに利用するべきな気がしてきましたね・・・
(もういっこまとめ的な意味で記事を書くかもしれない)

それではまたどこかで~.

平均化フィルタの簡単な例について
------------------------------------------------------------------------------------------------
◆お問い合わせはこちらまで◆
メール(tau.accs@gmail.com)
ツイッター(@Labyrith_Hyde
------------------------------------------------------------------------------------------------
PR

コメント

プロフィール

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

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

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

P R