忍者ブログ

たうのゲームブログ

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

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

×

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

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

その3と言いつつも,今回の内容はその2のおまけみたいな感じです.(多分最終回
前回までの記事はこちら.
ウディタで画像処理したい(その1
ウディタで画像処理したい(その2

前回までの結果を簡単にまとめるとこんな感じ.
・マップチップに平均化フィルタ(ぼかし)かけてみたい
・平均化フィルタを厳密に再現するなら加算表示すべき
・ただしレイヤー2以降のマップチップは通常表示
ヤバイの図(その2の記事最下部の図 再掲 事なきを得た図

前回は結局レイヤー2以降を通常表示に戻すことで事なきを得ましたが,
その後の進捗は折りたたんだ先に記すとして,まずはそれっぽい結果を

周囲がタイル状にうごめく図 周囲が一様に揺らめく図

画像ではわかりにくかったので,gifアニメーションにしました.
画面の周囲だけタイル状にうごめかしたり,波のように揺らしたりしてます.
常時並列実行させてもそれなりにサクサク動いてくれるので,オートタイルが少ないマップなら
十分演出として使用可能ではないでしょうか.(肝心の使用用途が思い浮かびませんが)

◆◆◆結果はここまで◆◆◆
(以降はいつも通り試したこととか考えたこととか書き連ねるだけ)

ここからは,前回(その2の加算表示の悪夢)以降試したこと等を記していきます.

おさらいとして・・・前回の記事からわかるようにレイヤー1であれば(遠景がなければ)
不透明度を調整したマップチップ画像を加算表示することで平均化フィルタを実装できました.
しかしレイヤー2以降に同様の処理を行ってしまうと,背面に存在する他のレイヤのピクチャに
画素値が加算される形で表示されるため,必要以上に明るくなってしまいます.
(まさに一番上の画像がソレ.レイヤー1の床マップチップに画素値が加算されることで,熊の毛皮や本棚などレイヤー2以降のマップチップ部が明るく表示されてしまっている)

幸い,通常表示でも「平均化フィルタっぽくなる」ため,応急策としてレイヤー2以降の
マップチップ画像のみ通常表示することで,マップ全体に平均化フィルタ処理を行ったような
結果を得ることができました.

これでめでたしめでたし

と言いたいところでしたが・・・レイヤー2以降の存在感薄くないですかこれ.
というか透けちゃってるんですよ,レイヤー1のマップチップが.
右上の赤いドアの部分とか,後ろの壁のストライプが浮き出ちゃってます
純粋にここからは僕自身の好みだとは思うんですが,何となく気になりますよね.
不透明度を弄って通常表示している以上後ろのピクチャが透けるのは当然ではあるんですが
正直違和感を覚えます.というかそもそも通常表示したくない!やだ!

ということでいろいろ試してみることに.
まず思いついたことは,下図のようにレイヤごとに背面用の黒い画像を挟むこと.

そもそも背面に別なピクチャがあったせいで加算表示がうまくいってなかったんだから
間に黒い画像挟めば解決するはず!

嘘ですごめんなさい.

そりゃそうだ.レイヤ2以降に設置する前提で作られた(透過部分の存在する)マップチップの
背面に黒い画像なんて置いたらどうなるかなんて,火を見るよりも明らか.

ここまではほんの茶番として,次はこんなことを考えてみる.
配置予定のマップチップを真っ黒にして背面用の画像として用いる
つまりは,上に示した熊の毛皮部であれば,ちょうどクマの毛皮の形をした黒い背景が
背面に設置されることになる.そうすれば余計な黒い部分がはみ出したりはしない.
上記の方法 これまでどおり通常表示
うーん惜しい!
圧倒的に通常表示したものと比較しても,レイヤ2以降の存在感が増しているし
一つ下のレイヤの画像も透けていない.しっかりぼかしもかかっている.
しかし,エッジ(物体の端)が・・・エッジが気になる!

(窓から差し込んだ光の部分は僕の設置レイヤーのミスが原因だけど)
窓枠や,本棚やベッドの淵がまるで後光がさしているように光っている.
拡大するとよくわかる.(以下の画像参照)
それもそのはずで,今回の平均化フィルタ処理では
画像を各方向にずらすことで画素同士を重ねている.
3x3領域であればマップチップ一枚につき8方向に1画素分ずつ位置がずれていることになるが,
とすると当然下に敷かれている「本来のマップチップの形」をした背景から周囲1画素分だけ
はみ出ることになる.そしてはみ出ているそのピクチャは加算表示しているから下と(以下略

要はこれまで起こっていた加算表示の悲劇が,エッジ部分のみで起こっているということ.

こればっかりはどうにもならない.それこそ原点に戻って画素単位の処理が必要になる(多分.

とはいえここまでくるともはや好みの問題な気もするがな.
「本棚の本同士の境目はぼやけてるのに,本棚とかドアの存在感ありすぎ」
と思う自分もいれば
「大まかなものの配置だけわかるゲーム上の演出」
と感じる(感じてほしい)自分もいる.

とまあいろいろありましたが,ここまでで加算表示云々の問題が解消されたところで
これまでうやむやにしてきた「主人公の上に表示」されるマップチップもぼかしてみる.

やり方は簡単!
1、主人公の上に表示されるマップチップだけ特定のタグ番号をつける
2、表示処理の際に上記の番号に設定されたもののみピクチャ番号を正の値にする
3、なんてやり方すれば偉いなぁ・・・と思いながらすべてのピクチャを正の値にする

すみません,正直自分で使う予定がなかったので横着しました.
すべてのピクチャが主人公の上に表示されるとこんな感じになります.
何も処理しない場合 ピクチャ番号:負 3x3領域平均化
ピクチャ番号:正 3x3領域平均化 ピクチャ番号:正 5x5領域平均化
窓の光はついでに直しました.
ちゃんと上に書いた手順で,主人公の上に表示する設定にしたマップチップだけ
ピクチャ番号を正にすれば,マップイベントもきちんと画面に映しつつ,
画面全体にフィルタをかけることができるんでしょうね(オートタイルを見ながら)

ちなみに,常時並列実行させた場合5x5は少し重すぎる印象がありました.
でも3x3はぼかした気がしないなぁってことで,「画面淵のタイルだけぼかす」
「画像自体を揺らしてみる」等で悪あがきしたものが初めに示した結果です.
ピクチャ番号はすべて正なので,ある程度近づかないとイベントが表示されませんが
意外や意外,視界が狭くなったような演出に見えなくもなかったので少し驚きました.
実装はしないですけどね.

というわけでウディタで画像処理(平均化フィルタ処理)したい!という願望が
何となく叶ったところで終わりにしたいと思います.
初めに書いた通りフィルタ処理関係の記事は今回が最後です.ありがとうございました.

次回はウディフェスの感想でも書きます.
そのあとは・・・どうしよう.

最終回はうそでした(すいません).真の最終回はこちら.

ウディタで画像処理したい(その4
------------------------------------------------------------------------------------------------
◆お問い合わせはこちらまで◆
メール(tau.accs@gmail.com)
ツイッター(@Labyrith_Hyde
------------------------------------------------------------------------------------------------
PR

コメント

プロフィール

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

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

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

P R