RPGツクールMVでアプリリリースを目指す開発室

RPGツクールMVでpixi.jsのバージョンアップを検証

■pixi.jsとは
javascriptライブラリで描画の担当役
たとえるならツクールMVという会社の中で、イラストを担当している人がpixi.js

pixi.jsはツクール以外でも働いていて、バージョンアップという成長をしている

今回、環境により、以下のエラーが出た
Failed to execute 'getProgramParameter' on WebGLRenderingContext': parameter 1 is not of type 'WebGLProgram'.
紐解いていくと、pixi.jsを使うフィルターやシェード処理を重ねているところで発生していた
ユーザーさんの環境を変えることなくゲーム側で対処できないか、試みている←今ここ

■pixi.jsの適用手順

https://github.com/pixijs/pixi.js/releases
・上記から「pixi.min.js」をDLして「pixi.js」にリネーム
・プロジェクトファイル\js\libsのpixi.jsと入れ替える

■pixi.js差し替え検証

4.5.4（ツクール1.6.2同梱）
4.5.4→4.8.7起動可能※1
4.5.4→5.0.0-rc1起動不可「TypeError　WebAudio.initialize is not a function」が発生
4.5.4→5.0.0-rc3起動不可「TypeError　WebAudio.initialize is not a function」が発生

※1　ただしコンソールに次の警告が出る
Deprecation Warning: VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter
pixi.js:16 at chrome-extension://odlameecjipmbmbejkplpemijjgpljce/js/rpg_core.js:4296:38

rpg_core.js:4296はこれ
Sprite.voidFilter = new PIXI.filters.VoidFilter();

■検証1
pixi4.8.7を適用した検証版を作成しました。
始めから、負荷のかかるイベントを試すことができます。

【検証版】地図の時間〜影泥棒と魔法の手記〜
https://game.nicovideo.jp/atsumaru/games/gm10593

こちらはいったん公開停止。
調査結果はまた後で書きます（制作優先のため、申し訳ない）。

比較（pixi4.5.4）はこちらです。
https://game.nicovideo.jp/atsumaru/games/gm10561

しかし、これでエラーが発生する環境の改善は見られませんでした。

■検証2
pixi.js4.5.4のPRECISION_FRAGMENTパラメーターをmediumからhighに設定を変える。

変更前（初期値）
PRECISION_FRAGMENT:"mediump",
変更後
PRECISION_FRAGMENT:"highp",

pixi.js内のコードを「PRECISION_FRAGMENT」で検索すると、改変箇所が分かると思います。
この続きは4/11朝か夜更新予定。

その他：
・自プロジェクトをベースに検証しているので、新規プロジェクトの場合、挙動が異なるかも
・4.5.4〜5.0.0-rc3までに不具合＃3981を明示的に修正したログはなし
（別の番号で管理されていたのでしょう）

・ツクールバージョン1.6.2コアスクリプトに同梱されているpixi.js4.5.4は本家で公開しているpixi4.5.4と同一コードではない
（日付からして違う。同一バージョン名でもマイナーチェンジが行われている様子）。

エラーについての話題
FXAA filter error, Failed to execute 'getProgramParameter' on 'WebGLRenderingContext' #3981
https://github.com/pixijs/pixi.js/issues/3981

↓
ivan.popelyshev氏が上記について回答

"antialias doesn't work with filters, because filters use FrameBuffers that dont have MSAA enabled. In webgl2 its possible, we'll add it to pixi-v5 later."

How to smooth out the line of the figure
http://www.html5gamedevs.com/topic/37813-how-to-smooth-out-the-line-of-the-figure/

pixi5で追加されたレイヤーでないと改善が見込めないのかも。
別の方法も教えて頂いたので、後で追記します。

■別の方法
上で書いたpixi.js4.5.4のPRECISION_FRAGMENTパラメーターをmediumからhighに設定変更、を実施。

参考：
http://pixijs.download/dev/docs/PIXI.settings.html#.PRECISION_FRAGMENT
PIXI.settings.PRECISION_FRAGMENT PIXI.PRECISION

http://pixijs.download/dev/docs/PIXI.html#.PRECISION
'lowp'
'mediump'☆初期値
'highp'

変更前
PRECISION_FRAGMENT:"mediump",
変更後
PRECISION_FRAGMENT:"highp",

こちらが更新版です。
https://game.nicovideo.jp/atsumaru/games/gm10561

経過観察中。
記事あとで見やすいように整形します。

■謝辞（50音、A-Z順）
しぐれん様
シロップ様
ゆかわ様
fuku様
Renfred様
terunon様