オーバーレイの動作負荷について[マップオブジェクト/フロアテクスチャプラグイン]
マップ自動装飾プラグインのクラウドファンディング(~1/31)のブースト用プランとして用意していた「マップオブジェクトプラグイン」「フロアテクスチャプラグイン」において、紹介記事でブレンドモード「オーバーレイ」を使用した演出例などを紹介してきました。
しかし、先日スマートフォンで動作チェックをしてみたところ、ブレンドモード「オーバーレイ」の動作がかなり重いことが分かり、細かく検証を行った上で対応策を実装しました。
上記プラグインをすでにご利用の方、これからご利用予定の方は記事内容のご一読をお願いいます。
ブレンドモード「オーバーレイ」の動作負荷
結論から述べると、個人的な検証結果ですが以下のような感じになります。
- MVでPC向け：○
- MVでスマホ向け：○（ただし、MVはスマホではWebGL使用不可）
- MZでPC向け：△（中スペック以上。低スペックは非推奨）
- MZでスマホ向け：非推奨
オーバーレイの描画が他のブレンドモードより重いのは変わりませんが、ツクールMVではスプライト数を押さえれば実用範囲と言えると思います。
ツクールMZではオーバーレイの描画を使うと低スペックPCやスマートフォンでの動作はFPSがガクッと落ちる原因になります。
各プラグインについて対応策を実装してますので次項以降を参考にしてみてください。
フロアテクスチャプラグイン → フォグテクスチャプラグイン
マップに濃淡を加えてリッチにみせたいフロアテクスチャプラグインですが、描画モードオーバーレイ以外ではテクスチャ用途には使いづらいためプラグインコンセプト自体が破綻しました…。
そのため、勝手ながらフォグ表示機能に重きを置いたフォグテクスチャプラグイン(TRP_FogTexture.js)として新生させていただきました。
オーバーレイの使用設定
オーバーレイを使用したテクスチャ用途のフォグについては設定で表示のON/OFFが切り替え可能です。スペックが十分な環境では表示させ、それ以外ではOFFにできるようになります。
この設定はプラグイン設定やゲームオプション、プラグインコマンドで変更可能です。
- プラグイン設定で初期値の設定（スマホ向け/PC向けで別設定）
- オプション画面への設定項目の登録
- プラグインコマンド
詳しくはプラグイン設定のヘルプをご参照ください。
フォグプラグイン機能
フロアテクスチャプラグイン（TRP_FloorTexture.js）の各種機能に加えてフォグ表示に必要な機能を追加しました。
動画ではプリセットのテクスチャ画像を使ってますが、手持ちのフォグ画像を「trp_fogs」に入れて使用することも可能です。（fog10.pngといった連番のファイル名にリネームする必要があります）
フォグの自動スクロール
X・Y方向の自動スクロール速度を設定できます。
（数値は１秒あたりの移動ピクセル数です。）
また、タイリングスプライトの性質上ゆっくりとスクロールさせるとピクセル単位でカクカクと動いてみえます。
「trpTiling」の値を1にすると独自のタイリングスプライトを使用することでなめらかにスクロールが可能です。
画面スクロールへの付随率
画面スクロールへの付随率を設定できます。
- 0で画面固定
- 1:スクロール追随
例えば「1.2」とするとタイルより少しだけ早くスクロールし、近景のように視差をつけることができます。
編集画面で複数フォグの編集
複数のフォグを重ねて表示でき、編集画面でもフォグを切り替えながら設定可能です。
例えば手持ちの雲の影のフォグ画像を追加し、
- 高スペック向けのオーバーレイテクスチャ
- 雲の影画像
- 霧フォグ
といった複数のフォグを手軽に設定できます。
（※設定でオーバーレイテクスチャを無効にすれば、雲の影と霧フォグだけ表示されます）
フロアテクスチャプラグインからの移行作業
TRP_FloorTexture.jsを使用している方は移行作業が必要です。
お手数ですが以下の手順のとおりよろしくお願いいたします。
プラグインの入れ替え
「TRP_FloorTexture.js」をプラグイン設定より除外し、新たに「TRP_FogTexture.js」を導入してください。
画像の入れ替え
「img/floor_textures」フォルダを削除し、あらたに「img/trp_fogs」フォルダを素材フォルダ(ExPlugins/materials/trp_fogs)よりコピぺしてください。
floor_texturesフォルダに自作素材を追加していた場合は、「floor_texture○○.png」から「fog○○.png」にリネームした上で「trp_fogs」フォルダに追加してください。
マップオブジェクトプラグイン
マップオブジェクトプラグインでは、マップ自動装飾プラグインの手動オブジェクト配置機能と組み合わせて「ボリュームライト(光束)画像」をブレンドモード：オーバーレイで設置する演出例を紹介しました。
これもMZではかなり重い描画処理となります。
複数の対応を実装してますので順に解説します。
- 負荷の軽減（内部処理の変更）
- オーバーレイ表示オプション設定
- 加算描画での代替
負荷の軽減（内部処理の変更）
「MapObject.js」プラグインのver1.25よりツクールMZでは、
オーバーレイブレンドモードを使用するオブジェクトスプライトをレイヤー(Z値)ごとにコンテナにまとめてオーバーレイを適用する機能を追加しました。
これで、光束画像ごとにオーバーレイを適用するよりも低負荷となります。
（※MVでは仕様上この機能は使えませんが、配置しすぎなければ大丈夫かと思います）
ただし、これでもスマホ・低スペック向けでは処理が重いため以下の対応が推奨です。
オーバーレイ表示オプション設定
フォグテクスチャプラグインと同じく、オーバーレイ画像を無効にする設定を切り替え可能です。（詳しくはプラグイン設定を参照）
- プラグイン設定で初期値の設定（スマホ向け/PC向けで別設定）
- オプション画面への設定項目の登録
- プラグインコマンド
加算描画での代替
オーバーレイ表示無効時に、非表示ではなく別の画像やブレンドモードで表示させる代替機能を用意しています。
プラグイン設定で以下を設定することで代替機能を使用できます。
（※表示を確かめるにはオプションやプラグインコマンドでオーバーレイ表示を一時的に無効にしてください）
- 代替させるキャラクター画像名
- 代替後のキャラクター画像名
- 代替後のブレンドモード
- 代替後のオパシティの変更割合(1.0で等倍)
光束画像の代替案
オーバーレイ表示の光束画像をそのまま加算表示で代替すると真っ白になります。
代替後のオパシティの変更割合を0.5(50%)にして明るさを調整した例↓
オーバーレイの透明感ある光とは雰囲気が変わりますが、温かい日差しのようなイメージで使えるかと思います……どうでしょうか？
輪郭をぼかして束感を調整した画像もプリセット素材に用意してみたので、お好みで代替設定で画像を切り替えてご利用ください。
各プラグインのオーバーレイの動作対応について、以上となります。
一度プラグイン設定などで調整を行えば表示・非表示に両対応できますので、お手数ですが動作想定スペックに合わせて設定をよろしくお願いいたします。
補足：なぜMZだとオーバーレイ描画が重いのか
WebGLやPIXI.jsやといった言葉の意味がわかる、少し上級者向けの解説です。
読み飛ばして問題ありません。
ブレンドモード「オーバーレイ」は他の加算や乗算といったブレンドモードとは違い、WebGLの標準機能では描画できず、フィルターなどと同じくシェーダを介してエミュレートすることで実現できます。
そのためオーバーレイでの描画は標準搭載のブレンドモードと比べて処理がどうしても重くなります。
また、オーバーレイでの描画は描画ライブラリpixi.js単体では扱えず、pixi-picture.jsというライブラリを導入することで描画できるようになります。
これはツクールMVではデフォルトで導入されていますが、ツクールMZには導入されていません。
これはツクールMVがPIXIのメジャーバージョンが4系だったのに対し、ツクールMZは少し新しいPIXIのメジャーバージョン5系を採用しており、pixi-picture.jsが5.0.0~5.3.11までは未対応だったからと思われます。
ツクールMZのコアスクリプトver1.6.0にてPIXIのバージョン5.3.12が採用され、pixi-picture.jsを手動で導入することで晴れてオーバーレイでの描画ができるようになったわけです。
ただし、MVで採用していたpixi-pictureのバージョンとは内部の描画処理が大きく変わっています。
旧バージョンではPictureRendererというカスタムレンダラーを使って描画していたのに対し、新バージョンではBlendFilterというフィルターを介してブレンドモードを適用する方式に変わりました。
その影響か（あるいはPIXI本体側のメジャーバージョンの変更の影響かは分かりませんが）、MZ(ver1.6.0以降)でpixi-picture.jsを導入しても以前（MV）よりパフォーマンスが出なくなっているようです。
（本当はpixi-picture.jsを改造して以前のバージョンのパフォーマンスが出るようにできれば良いのですが、いかんせん巨大なPIXI.jsの構造を理解できていないため自分では手が負えません…）