メニューを開いた際の背景のぼかしの強さを調整する方法はありますか?
もっとぼかしを強めたいと思っております。
いろいろ試したのですが、メニュー開閉用のコモンイベントを用意し、メニューを開く際にガウスぼかしをかけた画像を画面全体に表示するようにしたのですが、フィルター処理ではないので当然上手くいかず。
そもそもメニュー背景のぼかし処理は、メニューを開いた際に背景のスクショを撮ったものにフィルターをかけているという話を見かけたので、コモンイベントでは無理なのでしょうか。
もし良い方法がありましたら、教えていただければ幸いです。
メニュー背景のぼかしを強くしたい
- Plasma Dark
- 記事: 731
- 登録日時: 2020年2月08日(土) 02:29
- 連絡する:
Re: メニュー背景のぼかしを強くしたい
メニュー系画面の背景には、仰るようにマップをキャプチャしてブラー効果をかけたものを表示しています。
rpg_scenes.jsの下記コード付近から処理を追いかけると、その仕組がわかります。
- Scene_Map.prototype.terminate
- Scene_MenuBase.prototype.createBackground
ブラー効果そのものの実装は、rpg_core.jsのBitmap.prototype.blurに書かれています。
MVリリース当時のNW.jsが古かったためか、自前で頑張って実装しており、処理を読んでもあまりピンと来ないかもしれません。
MZであればpixi.jsの機能を利用して作られているので比較的容易に理解でき、ブラーの強さもカスタマイズできるので、できるなら移行しちゃうのも手です。
CanvasRenderingContext2D.filterを利用してブラーの実装を差し替えることで、もしかしたらMVでも簡単にブラーの強さを変えられるかもしれません。
https://developer.mozilla.org/ja/docs/W ... t2D/filter
rpg_scenes.jsの下記コード付近から処理を追いかけると、その仕組がわかります。
- Scene_Map.prototype.terminate
- Scene_MenuBase.prototype.createBackground
ブラー効果そのものの実装は、rpg_core.jsのBitmap.prototype.blurに書かれています。
MVリリース当時のNW.jsが古かったためか、自前で頑張って実装しており、処理を読んでもあまりピンと来ないかもしれません。
MZであればpixi.jsの機能を利用して作られているので比較的容易に理解でき、ブラーの強さもカスタマイズできるので、できるなら移行しちゃうのも手です。
CanvasRenderingContext2D.filterを利用してブラーの実装を差し替えることで、もしかしたらMVでも簡単にブラーの強さを変えられるかもしれません。
https://developer.mozilla.org/ja/docs/W ... t2D/filter
- Plasma Dark
- 記事: 731
- 登録日時: 2020年2月08日(土) 02:29
- 連絡する:
Re: メニュー背景のぼかしを強くしたい
コモンイベントでなんとかしたい場合のことを書いていませんでした。
FilterController.js でフィルタをかけると、やりたいことが実現できるかもしれません。
https://forum.tkool.jp/index.php?thread ... BC%89.603/
FilterController.js でフィルタをかけると、やりたいことが実現できるかもしれません。
https://forum.tkool.jp/index.php?thread ... BC%89.603/
Re: メニュー背景のぼかしを強くしたい
画像処理的には正攻法とは言い難いですが
ただのローパスなので重ね掛けすればボケるという力業もいけるかもしれません。
コモンイベントがいつ実行されるのか次第なんですが
スナップショットが作られたあとに実行されるなら
これを満足いくまで繰り返せばボケるかと思います。
コモンイベントでダメそうだったらスナップショットを作ってるところを直接書き換えちゃうのでも。
Twitter、はじめました
ただのローパスなので重ね掛けすればボケるという力業もいけるかもしれません。
コモンイベントがいつ実行されるのか次第なんですが
スナップショットが作られたあとに実行されるなら
コード: 全て選択
SceneManager._scene._backgroundSprite.bitmap.blur()
コモンイベントでダメそうだったらスナップショットを作ってるところを直接書き換えちゃうのでも。
コード: 全て選択
(() => {
const _SceneManager_snapForBackground = SceneManager.snapForBackground;
SceneManager.snapForBackground = function() {
_SceneManager_snapForBackground.call(this);
this._backgroundBitmap.blur(); // 必要なだけ繰り返す
};
})();
Twitter、はじめました。
https://twitter.com/wtr_in_reverie/
https://twitter.com/wtr_in_reverie/
Re: メニュー背景のぼかしを強くしたい
Plasma Dark様、WTR様、ご回答ありがとうございます。
WTR様が教えてくださった方法の前者のコードをコモンイベントに組み込んだのですが、TypeErrorが出るようなので、
後者のコードを rpg_scenes.js に挿入して動かしてみたところ、まさに力業のようにブラーを重ね掛けする事ができました。
しかし、ブラーの仕組みのせいなのか数回重ねていくと、ぼかすというより画像を圧縮させたような劣化した感じの表現となり、思っていたものとは違いました。(添付画像参照)
なのでひとまずはPlasma Dark様に教えていただいた FilterController.js というプラグインを調べてみようと思います。
もし上手くいくようであれば情報を共有したいと思います。
使ってみて納得のいく出来にならなかった場合は、次のセールでMZの購入を検討してみます。
お二方とも回答してくださった事、重ねてお礼申し上げます。
WTR様が教えてくださった方法の前者のコードをコモンイベントに組み込んだのですが、TypeErrorが出るようなので、
後者のコードを rpg_scenes.js に挿入して動かしてみたところ、まさに力業のようにブラーを重ね掛けする事ができました。
しかし、ブラーの仕組みのせいなのか数回重ねていくと、ぼかすというより画像を圧縮させたような劣化した感じの表現となり、思っていたものとは違いました。(添付画像参照)
なのでひとまずはPlasma Dark様に教えていただいた FilterController.js というプラグインを調べてみようと思います。
もし上手くいくようであれば情報を共有したいと思います。
使ってみて納得のいく出来にならなかった場合は、次のセールでMZの購入を検討してみます。
お二方とも回答してくださった事、重ねてお礼申し上げます。
Re: メニュー背景のぼかしを強くしたい
こちらのメニュー背景のぼかしを強くする方法、満足のいく描写が出来ましたので共有します。
メニューをコモンイベントから呼び出す場合のやり方です。
1.「FilterController.js」と「IZ_NonBlurBG.js」をpluginsフォルダに入れ、RPGツクールMV内のプラグイン管理から両方ともONにする(設定はデフォルトのままでOK)
2.コモンイベントで下記のように設定する
◆プラグインコマンド:createFilter ぼかし blur 1
◆メニュー画面を開く
◆プラグインコマンド:eraseAllFilter
これでガウスぼかしのような綺麗なブラーがかかります。
ぼかしの強さを変更する場合は FilterController.js 内の863行目辺りにある var _defaultParam の
上記の数字を変更すれば、ぼかしの強さを変える事ができます。(数値が低いほどぼかしが弱くなる。)
2.5ぐらいにすると添付画像の最後のぼかし方のように綺麗な感じになりました。
それと、なぜ IZ_NonBlurBG.js を導入してるかと言いますと、
どうもツクール側のブラーが画像劣化の原因になっていて、メニューを開いた際のブラーをOFFにしてやらないと綺麗なぼかしにならないようです。
そのため、プラグインを使用してツクール側のブラーをOFFにしています。
試していませんが、恐らくはPlasma Dark様のおっしゃっていた rpg_scenes.js 内にありますブラー処理の行をコメントアウトすると同じ動作が可能かと思います。
メニュー背景のぼかしを強くする方法の説明は以上です。
回答いただきましたお二方、どうもありがとうございました。
メニューをコモンイベントから呼び出す場合のやり方です。
1.「FilterController.js」と「IZ_NonBlurBG.js」をpluginsフォルダに入れ、RPGツクールMV内のプラグイン管理から両方ともONにする(設定はデフォルトのままでOK)
2.コモンイベントで下記のように設定する
◆プラグインコマンド:createFilter ぼかし blur 1
◆メニュー画面を開く
◆プラグインコマンド:eraseAllFilter
これでガウスぼかしのような綺麗なブラーがかかります。
ぼかしの強さを変更する場合は FilterController.js 内の863行目辺りにある var _defaultParam の
コード: 全て選択
_defaultParam["blur"] = [8];
2.5ぐらいにすると添付画像の最後のぼかし方のように綺麗な感じになりました。
それと、なぜ IZ_NonBlurBG.js を導入してるかと言いますと、
どうもツクール側のブラーが画像劣化の原因になっていて、メニューを開いた際のブラーをOFFにしてやらないと綺麗なぼかしにならないようです。
そのため、プラグインを使用してツクール側のブラーをOFFにしています。
試していませんが、恐らくはPlasma Dark様のおっしゃっていた rpg_scenes.js 内にありますブラー処理の行をコメントアウトすると同じ動作が可能かと思います。
メニュー背景のぼかしを強くする方法の説明は以上です。
回答いただきましたお二方、どうもありがとうございました。