[講座]マップをエフェクト・パーティクルで盛って見映えさせよう！
追記<1/20>
記事内で紹介しているブレンドモード「オーバーレイ」を使用した演出がツクールMZでは動作負荷が高く、特にスマートフォンや低スペックPCではFPSを落とす原因となるため非推奨とさせて頂きました。
オーバーレイに関する検証や、対応方法を別記事にまとめてますのでご一読ください。
ハロー、プレミアムツクールデー！
先月のマップ制作RTA動画に引き続き、今月は出来上がったマップに2分20秒のTwitter動画の尺でエフェクトを盛っていく動画を作ってみました！
RPGを作り始めてから長らく、
「神マップが作れずとも、手軽に映えさせたい！」
という目標をゆるく追いかけてきましたが、
パーティクルプラグインのプリセットを充実させたり、自動装飾プラグインのクラファン開発にかこつけてポストエフェクト系プラグインを開発し、
クオリティと手軽さの両面において、
ひとまずの自分で納得できる水準を超えることができました！
ポストエフェクトはマップを手軽に盛れるだけでなく、
同じマップでもガラッとイメージを変えることができます！
いくら神クオリティのFSM系タイルとはいえ私みたいな凡マップスキルで組むと、
どうしても代わり映えしないマップに陥りがちです…
（上手い人が組むと、色彩が統一されて美しかったり、構図がダイナミックだったり、細かな遊び心が詰め込められたりとすごいですよね👀）
マップ自体はセオリーに従って組み、パーティクルやポストエフェクトで個性やバリエーションをつけられるのは私向きですごいお得感です！
この記事では自作プラグインの宣伝もとい紹介をしつつ、他所様のプラグインも含めて
マップ画面にどんなエフェクト・演出を活用できるか広く紹介していこうと思います！
（記事内で他サイト様の素材ページを紹介してますが、必ず素材の利用規約を確認した上で利用させてもらいましょう！）
ちなみに、最近はプラグインを自作してばかりで他プラグイン作者様の新しいプラグインなどは存じておりません…！
何か使いやすいプラグインなどあればコメントで教えてもらえると嬉しいです！
フィルター系プラグイン
画面作りの本丸！
マップ全体に色補正・ブルームなどのフィルターをかけて雰囲気を大胆に変えます。
（※負荷が重めのフィルターもあるので安易な重ねすぎにはご注意を！）
FilterControllerプラグイン<ツキミ様>
フィルタープラグインといえばツキミ様のFilterControllerプラグイン。
PIXi用のフィルターライブラリpixi-filter.jsに含まれるほとんどのフィルター機能をこれ１つで呼び出し＆操作することが可能です！
ただし、マップごとにフィルターのパラメータ設定をするのは少し大変です。
マップの色味など補正するには後述のプラグインがおすすめですが、リッチな日差しエフェクトを簡単につけられるGodrayフィルターやその他のグリッチやノイズなど特殊なフィルターを使うにはこのプラグインの出番です！
他にも用途は広いのでとりあえず入れておいて間違いなし！
ジオラマ風の撮影効果プラグイン<lriki様>
マップの画面作りのためのフィルターエフェクトを盛り込んだ革命児！
* GitHub：lriki/LN_FilmicFilter
「色の補正」
「ブルーム（明るい部分をぼんやり輝かせる補正）」
「チルトシフト（画面上下をぼかす）」
「ビネット（画面のフチを暗くする）」
の４つのフィルターをまとめて設定・適応することができ、
これ１つで画面クオリティをグッと上げることができる神プラグインですね！
統合された１つのフィルターで処理を行っているため動作も軽量です！
私も当初はこのプラグインのお世話になる予定だったのですが、若干用途が合わなかったため単純に４つのフィルターを適用・編集可能なプラグインを自作しました↓
TRP_MapFilter
上述のジオラマ風プラグインに触発され、自分用に使いやすいよう自作したプラグイン。
準公式ライブラリ「pixi-filter.js」に含まれる「色補正」「ブルーム」「チルトシフト」に加えて自作の「ビネット」をまとめて編集・適用できます。
色補正
彩度・コントラストの調整やRGB補正など行えます。
全体の色彩を揃えたい場合は、彩度を抑えつつRGBを調整するといい感じです…たぶん！
ブルーム
明るい部分をさらに明るく＆ぼかして輝かせます。
- しきい値：ブルームを適用する明るさの範囲。0.1だと明るさ10%~100%部分、0.9だと90%~100%の部分まで適用、といったイメージ
- スケール：明るくさせる強さ
- ぼかし：ぼかす強さ
わりと負荷が重めのフィルターかも。必要なければCtrl+DでOFFにしましょう。
チルトシフト
画面上下に行くほど強まるグラデーション状のぼかしをつけます。
- ぼかし：ぼかす強さ
- グラデ幅：だんだんぼかせる幅。基本は画面高さの半分
- Y座標：ぼかしグラデーションの中央となるY座標。高さ固定の横スクロールマップなどではキャラ位置に合わせるといいでしょう。
これも負荷が重めのフィルター。必要なければCtrl+DでOFFにしましょう。
ビネット
画面四隅を暗くします。
- サイズ：ビネットの大きさ。大きいほど暗くなる範囲が大きくなります。
- アルファ：ビネットの透明度
- ぼかし：ビネットの境界をぼかす強さ。
ツクールの見下ろしマップは画面の上下左右が均質でメリハリがつけづらいです。
チルトシフトもそうですが、画面の上下や四隅を制限することで画面にメリハリがつき、また、自キャラがいる画面中央に視線を誘導することで没入感が高まる……気がします！
ビネットは負荷も低いので、薄っすらでもかけておくと雰囲気が出るかも？
ただし、かけすぎると画面全体が暗い雰囲気になるので注意。
（洞窟などでの視界制限に使っても○）
プラグイン販売ページ
TRP_MapFilterは「マップ自動装飾プラグイン」クラウドファンディングのブースト用プラン「限定プラグインセットプラン」に含まれています。
- クラウドファンディングページ
（クラウドファンディングは1/31までなのでご注意を。限定プラグインセットは再販未定となります。）
ビネットに関しては、後述のパーティクルプラグインでリング状に黒いもやもやパーティクルを出すことでそれっぽい使い方も可能です。
過去の回想・夢の中・闇系のダンジョンなどで使うと面白いかも？
（↓街背景が表示された際に、四隅に黒いもやもやを表示）
https://twitter.com/thiropGames/status/1605534465807175680
フォグ・テクスチャ系プラグイン
フォグプラグイン
霧・雲・日差しなどの画像を上から重ねることで情報量を増やしてクオリティアップ！
（↑ぴぽや倉庫様のフォグ画像素材ページ）
MVではgentlawk様のマップフォグプラグインをお借りしてました。
…MZではどれが主流かは不明です🙇♂️
ググってみた感じ、Victor Sant様のFog and Overlayプラグインなどいくつか同様とのプラグインがありそうです。
フォグ画像素材
フォグプラグインにはフォグ画像が必須です！
ぴぽや様が質・量ともに豊富なフォグ画像素材を配布されてるので、手持ちの素材がない場合は利用規約を確認した上でお借りしてみるといいでしょう！
フォグテクスチャプラグイン
追記）ブレンドオード「オーバーレイ」がMZの低スペック・スマホ向けで非推奨としました。その関係でここで紹介している旧フロアテクスチャプラグインは、フォグ全般を扱うフォグプラグインに新生しました。負荷高めとなりますがここで紹介しているテクスチャ用途のオーバーレイ表示も可能です。
フォグプラグインを使ってると、雑に重ねるだけで画面に濃淡ができてそれっぽく見えるので手放せなくなるでしょう。
ただ、画像を調整するのが面倒で、結局アルファを上下させるくらいでワンパターンに陥りがち…。
そして思いました。
「濃淡で情報量を増やしたいだけなら重ねる画像はフォトショのあれでいいんじゃ？」
「ガンマやコントラストを調整すれば濃淡の分布を調整できるし」
「拡大率を変えれば濃淡の密度も調整できる！」
「おまけに縦に潰せば霧っぽくもなりそう」
というわけで作ってみたのが「フロアテクスチャプラグイン」です。
テクスチャ画像の表示・パラメータ設定を一体的に行うことができます！
加算で霧っぽく重ねたりオーバーレイで雑にマップに濃淡をつけるのが強力です！
（※オーバーレイはMZの場合は要コアスクリプトver1.6.0以上）
このプラグインも「マップ自動装飾プラグイン」クラウドファンディングのブースト用プラン「限定プラグインセットプラン」に含まれています。
- クラウドファンディングページ
（クラウドファンディングは1/31までなのでご注意を。限定プラグインセットは再販未定となります。）
また、使い方の解説ページもあるので気になる方はご覧ください！
追記：フォグ機能
同プラグインで、フォグ全般を扱えるようになりました！
スクロール関連のフォグ用パラメータが追加され、また複数のフォグを切り替えながら設定できるようになりました。
オリジナルな機能として、スクロール付随率を変更したり独自のTilingスプライトを使用可能です。
https://twitter.com/thiropGames/status/1616407301849776130
パーティクルプラグインの併用
後述のパーティクルプラグインでも"フォグっぽい"使い方ができます。
- 雲
- 霧
ゆっくりしたスピードで長く画面にとどまるパーティクルでフォグっぽく使えるのですが、「画面端で使い回すループ設定」が必要だったり画面をうまるのに時間がかかるため「時間を先送りするコマンド」が必要で少し上級者向けです。
天候・パーティクル系プラグイン
天候プラグイン：MOG_ExWeather
言わずと知れたMoghuter様の神プラグイン！
バリエーション豊かな天候系のパーティクルを表示できます。
https://twitter.com/moghunter1/status/1299410052986613760
天候エフェクトプラグイン：AO
さきほど調べて見つけたAO様の天候エフェクトプラグイン。
雷がライティングと連動してたりと、かなりユニーク！
https://twitter.com/AoNbti/status/1239882809847599106
パーティクルプラグイン「TRP_ParticleMZ」
ここまでも何度か名前を上げてる自作のパーティクルプラグイン。Boothなどで販売中！
- すぐに使える豊富なプリセットデータと画像素材
- イベント・画面固定・天候・リージョンなどなど豊富な表示対象
- テストプレイで見ながら編集できるエディタ
などなど、今では自分の代表的なプラグインとなってます！
追加プリセットデータ集も販売しているので、本体内臓のプリセットだけじゃ物足りなくなったら見てみてください！
↓プリセットなどを紹介。もちろんパーティクルの動きを自作したり細かく調整もできるので、操作に慣れてきたらいろいろいじってみてください！
漂う光系プリセット
「どんなマップだろうと光パーティクルを漂わせればそれっぽく見えるのでは？」
という実に安易なアイデアで11テーマ32種のプリセットを用意してます！
https://twitter.com/thiropGames/status/1557572682363072512
実際には何も考えずに表示させちゃうと、くどくなりがちなので注意！
（動画映え意識してることもあって、パーティクルがまだ大きい感じがあるので小さめに編集＆調整するといいかも）
天候系プリセット
霧や雲といったフォグっぽい使い方は紹介済みなので、それ以外のプリセット例を紹介！
雨・雷
雪
日差し
その他プリセット
- 星空・流星・花火など遠景への表示
- 炎・煙といったイベントへの表示
- 土煙・水しぶきなど地形に合わせた歩行エフェクト
などなど、凝りだしたらわりと何でもできてしまうので、プリセットをうまく活用して程よく手抜きしてみてください！
オブジェクト・イベント画像
ポストエフェクトではありませんがイベントなどで光や影の画像を配置したり、マップ上に動く物体・動物を配置することでマップのクオリティや情報量を増やすことができます。
ボリュームライト/木の葉っぱの影
薄暗いマップに差し込むボリュームライト（目に見える光・光線など）はそのコントラストから間違いなく目を引くアクセントになるはず！
ボリュームライトを入れるためにあえて少し暗めの色調にしてみたり暗い物陰を確保してみたりするのも全然ありでしょう！
追記）↑はブレンドモード「オーバーレイ」を使用しています。前述の通りツクールMZかつスマホ・低スペックでは非推奨です。代わりに加算表示をすれば、雰囲気は変わりますが温かみのある日差しのように表示できると思います。
また、屋外の木が生えてるマップでは「木の葉っぱの影画像」がおすすめ！
というより、影を配置するために街路樹でもなんでも木を生やそう！（本末転倒）
（ボリューム光もですが、こういう配置するだけで見映えがよくなるっぽい画像って他になにか無いですかね？🤔）
キャラクターグラフィック表示拡張プラグイン<トリアコンタン様>
イベントに画像を設定してそのまま表示させるより、角度や拡大率を大雑把にでも調整したほうがより違和感なくとけこませるられます。
トリアコンタン様のキャラクターグラフィック表示拡張プラグインではイベントのメモ欄で簡単に設定できるのでおすすめ！
自動装飾プラグインxマップオブジェクトプラグイン
マップ自動装飾プラグインとマップオブジェクトプラグインを組み合わせて使用すると、テストプレイの編集モードで表示を確認しながら
- 不透明度
- 角度
- 拡大率
など調整して配置することができて簡単です。
↓の記事で詳しい使い方など解説してます。
両プラグインとも現在は「マップ自動装飾プラグイン」のクラウドファンディングで入手可能です。
クラファン終了後(~1/31)はBoothにて販売予定ですが時期は未定です。
（クラファンの各プランは先行販売価格のためBoothでは若干の値上げになります。）
揺れる草木
揺れる草木は植物が生えてるある外観マップならどこでも配置できるので使い勝手が良いです！
揺れる草花のキャラ画像素材<白黒洋菓子店>
揺れる草花のキャラ画像素材が白黒洋菓子店様にて配布されてます。
非暗号化での利用などできませんが、利用規約を確認してお借りしてみましょう！
マップオブジェクトプラグイン
前述のマップオブジェクトプラグインには、オブジェクトをアニメーションさせる機能がついてます。
Skew回転させることで揺れてるように見せることもできるので、アニメーション画像を用意できない場合におすすめ！
https://twitter.com/thiropGames/status/1576903608175841287
ちなみに自動装飾プラグインと組み合わせてオブジェクトをドット単位で配置できます。
木を密集配置でき、通行判定もそれっぽく自動設定してくれますよ！
虫や小動物
「マップ上の動くものを増やす」という意味では、虫や小動物をイベントで配置するのも効果的でしょう！
（こういった汎用的に使えるイベントは空のマップにまとめておくとパッとコピペで配置できておすすめ！）
通行人
街であれば移動中の通行人を配置することでマップに動きがつき、住民の生活感も出ておすすめです！
拙作めませかではPCキャラ達がランダムに現れては走り去っていきます。
マップ端にキャラをセットしておいて下のような移動ルートで通行人のモブを作れます！
（邪魔になりそうなら常時すりぬけONでもOK）
- 透明ON＆すりぬけONで待機
- キャラ画像をランダムに変更
- 透明OFF＆すりぬけOFFで移動開始
- マップ端まで移動させる
- 元の座標に戻す
2.のキャラ画像をランダムに変えるにはスクリプトで「var images=["People1","People2","People3"];this.setImage(images[Math.randomInt(images.length)], Math.randomInt(8))」など。
5.の元の座標に戻すにはスクリプトで「this._x=this._realX=this.event().x;this._y=this._realY=this.event().y;」など。
ライティング系プラグイン
代用方法は数多くあれど、最も没入感ある自然な光・暗闇の明暗を表現できるのがライティング(光源)プラグインです！
……なのですが、これも私はMZの主流のプラグインを知らないので紹介できないです🤸♂
ざっと探してみた感じ
など、他にもいくつかありそうです。
ライティング系プラグインは動作負荷が高めです。
また、プラグインや用途によっても重い・軽いの差が出やすいプラグインです。
いろいろなプラグインを試して自分の用途に合うものを探してみるとよいでしょう！
明かりアニメプラグイン
動作負荷などを考えライティングプラグインの使用を控えたい場合などは、明かりの画像を炎やランプになどの上に重ねて表示する明かりプラグインが代替としてとても優秀です。
MVではtomoaky様のアニメ付き明かりプラグインがありましたが、
MZではそれをmunokura様が移植したプラグインが公開されているようです。
パーティクルプラグインでの代用
前述のパーティクルプラグインでもイベント状に光パーティクルを重ねることで光源っぽく見せることができます。（Z値をspritesetにして色調変化の上に重ねるのがポイント）
自分の手持ちの「マップを盛るためのアイデアストック」をざっと紹介してみました！
詳しく紹介しませんが、他にもマップクオリティやマップ体験を盛るアイデアはいろいろあるでしょう。
- 近景・遠景
- 環境音/BGS
- 歩行時のステップ音
マップはゲームの作風にも関わってくる重要な要素です。
動作負荷の問題もありますので、どのエフェクトをメインに使い、
どのエフェクトをここぞの場面で使うか。
などなど、実際に試してみながら組み合わせをよく吟味してみてください！
