画面にブラー、回転、モザイク、歪みなどの効果を与えたい

[hadhad]

お世話になっております。

内容は件名の通りですが、詳細に。

画面全体に
・ブラー（ぼかし）効果
・回転、傾きを与える
・モザイク効果
・水面やレンズのような画面の歪み
といった効果を付けたいと思っています。

できればエフェクトの度合いが設定できたり、
（顔モザイクのように）部分的に効果を与えられるとなお良いです。

MVでそもそも可能なのかどうかは、
私自身JSはちんぷんかんぷんですので分かりませんでしたが、
PIXI.jsではこれらの効果を与えることはできるらしいです。
参考：http://www.goodboydigital.com/pixijs/ex ... exAll.html

もし解決できる方がいらっしゃいましたら、
プラグインのソースや、既存のプラグイン等を教えて頂けないでしょうか。

宜しくお願いします。

P.S.
もしこれらが可能になった時には、以下の用途に使いたいです
・ツクール2000のようなフェードイン、フェードアウト
・徐々にピントが合う表現
・スナイパーライフルのスコープから覗き込むSTGゲーム
参考（実況プレイ注意）：https://youtu.be/1WKx1uRjlrM?t=482
・ホットラインマイアミのような、少し傾いた画面
参考（18歳未満閲覧注意）：https://youtu.be/2n_BinoS1Ug

また、動作が軽かったり、効果の重ねがけ、効果の切り替えを素早く行うことができるなら、
監視カメラの劣化した画質の映像や、酷く色褪せた記憶の回想などに使いたいと思ってます。

[yamachan]

こんばんは！

ちょっと眠気に負けそうなので、ブラーだけ…

試しに以下のようなコモンイベントを作成しました。

0.png (7.67 KiB) 閲覧された回数 21068 回

以下のJavaScriptを貼っただけです。

コード: 全て選択

SceneManager._scene.filters = [new PIXI.BlurFilter()];

マップに設置した適当なイベントから↑のコモンイベントを呼ぶと、画面にブラーがかかりました。

いまの MV の PIXI はver2 ベースなので、そのへんで注意が必要です。
PIXI.filters.BlurFilter() じゃなくて new PIXI.BlurFilter() なのもそうかな？

以上、なにか参考になれば幸いです。
ではでは。

[hadhad]

ご返答ありがとうございます！

さっそくyamachanさんのやり方とPIXIのリファレンスを基にして調べてみた所、
微調整可能で画面全体のブラー効果、モザイク効果、渦巻き効果までは自己解決しました！

コード: 全て選択

//ブラー効果（Pixi2）
var f = new PIXI.BlurFilter();
f.blur = 【縦横効果量 0～ def:2】;
f.blurX = 【横効果量 0～ def:2】;
f.blurY = 【縦効果量 0～ def:2】;
SceneManager._scene.filters = [f];

//モザイク効果（Pixi2）
var f = new PIXI.PixelateFilter();
f.size.x = 【横効果量 1～】;
f.size.y = 【縦効果量 1～】;
SceneManager._scene.filters = [f];

//渦巻き効果（Pixi2）
var f = new PIXI.TwistFilter();
f.angle = 【角度】;
f.radius = 【画面サイズを1とした直径 0～1】;
f.offset.x = 【画面右を1とした横座標 0～1】;
f.offset.y = 【画面上を1とした縦座標 0～1】;
SceneManager._scene.filters = [f];

残すは、

・レンズや水面のように歪ませる
・画面を傾ける、回転する
・一部分のみにエフェクトをかける

と言った部分ですが・・・

・レンズや水面のように歪ませる
レンズや水面のような効果がDisplacementFilterによって実現することは分かったのですが、
どのようにして基準となるテクスチャを読みこませるのかがわかりません。
できれば、Picturesフォルダから読みこむ形で
かつ、トップ記事に貼った水面がアニメーションするような処理を実現したいです。
追記
テクスチャの適用方法を自己解決しました。

コード: 全て選択

var m = PIXI.Texture.fromImage("img/pictures/【画像名】.png");
var f = new PIXI.DisplacementFilter(m);
SceneManager._scene.filters = [f];

トップ記事に貼ったサンプルのテクスチャが動いてるのは、もしかしたらスクロールさせているから、
アニメーションしているように見えるのかもしれませんね。
でも、このテクスチャをどのようにすればスクロールやローテートできるのかが分かりませんでした。

・画面を傾ける、回転する
TwistFilterを使えばそれっぽい効果は得られますが、周りがくねってしまうのでコレジャナイ感があります。
ホットラインマイアミのように、画面全体がただ傾くような表現が望ましいです。

・一部分のみにエフェクトをかける
まったくわかりませんでした。

私の調査ではこれが限界でした。

引き続き、宜しくお願い致します。

[平井銀二]

横から失礼しますが、
水面やレンズのような画面の歪みについては
KAMESOFTさんがコチラ (http://ytomy.sakura.ne.jp/tkool/rpgtech ... ffect.html) にて
実装されてますね。こんな感じで良いのかはわかりませんが。

参考にいかがでしょうか。

[hadhad]

平井銀二さん、ありがとうございます。

プラグインの中身を見てみたら、テクスチャがローテートする謎が解けました。

コード: 全て選択

//水面効果（Pixi2）
var m = PIXI.Texture.fromImage("【画像URL】.png");
var f = new PIXI.DisplacementFilter(m);
f.offset.x = 【ローテートX】;
f.offset.y = 【ローテートY】;
f.scale.x = 【凹凸強度X】;
f.scale.y = 【凹凸強度Y】;
SceneManager._scene.filters = [f];

残るは、
・画面を傾ける、回転する
・一部分のみにエフェクトをかける
の２つですね。

また、これらのエフェクトは重ねがけできないので、重ねがけができる方法がわかると更にいいです。

[yamachan]

こんばんは！

ちょっと試してみましたが、部分的にかけるのは意外と難しいですね。
もともとゲーム画面全体に Tone フィルタをかけているようで、filterArea などで効果範囲を狭めるとそちらに影響しちゃうらしく、描画が変になります。

画面でない部分、例えば Window とか Picture に個別にフィルターかけることはできるんですけどね。
こちらもやはり対象全体にかかり、filterArea を変更すると描画に影響が出てしまいますね。

というわけで、あまり進捗はないのですが、画像を表示して、それ全体にフィルタを掛ける例を一応載せておきます。
F8 のコンソール画面にコピペして実行するのが楽でしょう。

コード: 全て選択

$gameScreen.showPicture(6,"BU_01sora_00",0,100,100,100,100,255,0)
SceneManager._scene._spriteset._pictureContainer.children[5].filters = [new PIXI.PixelateFilter()];

以下のように画像にフィルターがかかります。

たいした情報でなくてすみません。
ではでは。

[hadhad]

yamachanさん、ありがとうございます。

ピクチャにフィルタをかけることができると言う事は、
スクリーンショットの撮影とトリミングさえできれば、それっぽい物は作れるかもしれませんね。

イメージ：
スクリーンショットを撮影する
　　　　　↓
フィルタをかけたい範囲になるようトリミングする
　　　　　↓
その画像を画面に合うようピクチャなどで描画

引き続き宜しくお願いします。

[hadhad]

お疲れ様です。

バージョンアップにてPixi.js 4.0.0に更新されましたが、
どうやら

var f = new PIXI.filters.BlurFilter();
f.blur = 10;
SceneManager._scene.filters = [f];

というふうにしてもエラーになるようです。
いま私も調べてはいますが、どうやら「SceneManager.backgroundBitmap()」が絡んでいるようです。

分かる方いましたが教えて頂けますと助かります！

[hadhad]

少し一歩前進したものの何一つ分からなかったのでとりあえずそこまで報告を。

どうやら

var f = new PIXI.filters.BlurFilter();
f.blur = 10;
SceneManager._scene.filters = [f];

とした場合、

SceneManager._scene.filtersに[f]を代入した時点でエラーが発生しているようです。

エラーコード：
TypeError: undefined is not a function
at RectTileLayer.Container.calculateBounds (pixi.js:10026)
at Container.calculateBounds (pixi.js:10026)
at ShaderTilemap.Container.calculateBounds (pixi.js:10026)
at Sprite.Container.calculateBounds (pixi.js:10026)
at Spriteset_Map.Container.calculateBounds (pixi.js:10026)
at Scene_Map.Container.calculateBounds (pixi.js:10026)
at Scene_Map.DisplayObject.getBounds (pixi.js:10581)
at FilterManager.pushFilter (pixi.js:17677)
at Scene_Map.Container.renderWebGL (pixi.js:10062)
at WebGLRenderer.render (pixi.js:16671)rpg_managers.js:1756 SceneManager.catchExceptionrpg_managers.js:1717 SceneManager.update

また、タイトル画面でコンソール上でスクリプトを打つと問題なくぼかし効果を得ることができました。

実は今コンテスト用に制作中のゲームがありまして、このエラーのせいで先へ進めていませんので、とても困っています。
詳しい方いらっしゃいましたら教えて頂けますと助かります。。。

[ふしぎうさぎ]

新たに追加された pixi-tilemap.js　のバグでしょうね。

原因は、
PIXI.tilemap.RectTileLayer がPIXI.DisplayObjectを継承している為、
フィルターを適用する際に必要な calculateBounds() メソッドが定義されていないことです。

なので、
その場しのぎですが
PIXI.tilemap.RectTileLayer.prototype.calculateBounds = function (){}
というスクリプトを読ませておけばいいはずです。