Rpg Maker Developers Group

Hello everybody,
I managed to update RPG Maker MV's PIXI version to v6.5.0. There is a flaw, but game works. I also exported the game to Android. The game is working there as well.

This guide is going to help you to update PIXI version of MV.

WARNING: Backup your files!

1- nw.js update [Required for PIXI v6+]
A. Go to https://nwjs.io/downloads/, and download (depending on your environment) Windows 64 bit SDK and NORMAL versions of nw.js'.

B1. Extract SDK to a new folder.

B2. Extract NORMAL to a new folder (different folder from SDK).

C. If you have steam version, go to YOURDRIVE:\SteamLibrary\steamapps\common\RPG Maker MV in your computer's file explorer. If you don't have steam version, go to your engine's folder where its located on your computer.

D1. In that folder (Our example: YOURDRIVE:\SteamLibrary\steamapps\common\RPG Maker MV), first go to "nwjs-win-test" folder. Copy and paste everything that you extracted as SDK before and choose "Replace the files in the destination" option. (Look B1 of this guide). After that process, find "Game.exe" and delete it in the same folder ("nwjs-win-test"). Afterwards, find "nw.exe" and rename as "Game.exe" in the same folder ("nwjs-win-test").

D2. Go back to YOURDRIVE:\SteamLibrary\steamapps\common\RPG Maker MV and go to "nwjs-win" folder. Copy and paste everything that you extracted as NORMAL before and choose "Replace the files in the destination" option. (Look B2 of this guide). After that process, find "Game.exe" and delete it in the same folder ("nwjs-win"). Afterwards, find "nw.exe" and rename as "Game.exe" in the same folder ("nwjs-win").

Congratulations. You updated nw.js.

2- PIXI v6.5.0 Update
A. Go to https://github.com/pixijs/pixijs/releases/tag/v6.5.0-rc.4 link. Download these under "Development Build" header:
a. pixi.js
b. pixi.js.map

B. Go to https://github.com/pixijs/tilemap/releases/tag/v3.2.1 link. Download "Source code (zip)" file under "Assets" header. Open downloaded "Source code (zip)" file, find "dist" folder in it. In "dist" folder, there are two files. Extract those files to your computer. Files: "pixi-tilemap.umd.js" and "pixi-tilemap.umd.js.map".

C. Go to https://github.com/pixijs/tilemap/blob/e7d26dde5b47a9ea941c50e62ad151acfc7ca57b/demo/rpgmaker.js link. Click "Raw". New page is going to open when you click the "Raw" button of GitHub. Right click on that page, click "Save As". Locate a place on your computer and click ok. You downloaded "rpgmaker.js" file.

D. After all these download actions, you have to have these files:
a. pixi.js
b. pixi.js.map
c. pixi-tilemap.umd.js
d. pixi-tilemap.umd.js.map
e. rpgmaker.js
Copy and paste these files to YOURDRIVE:\Users\YOURUSER\OneDrive\Documents\Games\YOURGAMENAME\js\libs folder and of course, choose "Replace the files in the destination" option. If your game is located different location than MV's default location, locate your game folder and go to \js\libs folder and do the same process.

E. Now, we are going to some changes on codes.
Find "index.html" file in YOURDRIVE:\Users\YOURUSER\OneDrive\Documents\Games\YOURGAMENAME folder.
a. index.html
Add this code <script type="text/javascript" src="js/libs/rpgmaker.js"></script> to under of <script type="text/javascript" src="js/libs/pixi-tilemap.js"></script>
Remove this code <script type="text/javascript" src="js/libs/pixi-picture.js"></script>

Save and close the file.

Go to YOURDRIVE:\Users\YOURUSER\OneDrive\Documents\Games\YOURGAMENAME\js\libs folder and find rpgmaker.js.
b. rpgmaker.js
Open file. Go to last blank line and add this:
requireRpgMaker();
Save and close the file.

After this process, all changes are going to make in YOURDRIVE:\Users\YOURUSER\OneDrive\Documents\Games\YOURGAMENAME\js folder. Find related files in that folder and open them respectively.
c. rpg_core.js
// Find this code: Sprite.voidFilter = new PIXI.filters.VoidFilter(); // Change it with this: Sprite.voidFilter = new PIXI.filters.AlphaFilter(); ------------------------------------------------- // Find this code: WindowLayer.voidFilter = new PIXI.filters.VoidFilter(); // Change it with this: WindowLayer.voidFilter = new PIXI.filters.AlphaFilter(); ------------------------------------------------- // Find this code and delete it: PIXI.glCore.VertexArrayObject.FORCE_NATIVE = true; ------------------------------------------------- // Find this code: TilingSprite.prototype = Object.create(PIXI.extras.PictureTilingSprite.prototype); // Change it with this: TilingSprite.prototype = Object.create(PIXI.TilingSprite.prototype); -------------------------------------------------- // Find this code: PIXI.extras.PictureTilingSprite.call(this, texture); // Change it with this: PIXI.TilingSprite.call(this, texture); -------------------------------------------------- // Find this code: TilingSprite.prototype._renderCanvas_PIXI = PIXI.extras.PictureTilingSprite.prototype._renderCanvas; // Change it with this: TilingSprite.prototype._renderCanvas_PIXI = PIXI.TilingSprite.prototype._renderCanvas; -------------------------------------------------- // Find this code: TilingSprite.prototype._renderWebGL_PIXI = PIXI.extras.PictureTilingSprite.prototype._renderWebGL; // Change it with this: TilingSprite.prototype._renderWebGL_PIXI = PIXI.TilingSprite.prototype._renderWebGL; -------------------------------------------------- // Find this code: TilingSprite.prototype.updateTransformTS = PIXI.extras.TilingSprite.prototype.updateTransform; // Change it with this: TilingSprite.prototype.updateTransformTS = PIXI.TilingSprite.prototype.updateTransform; --------------------------------------------------- // Find this code: this._windowRect = this._windowMask.graphicsData[0].shape; // Change it with this: this._windowRect = this._windowMask.geometry.graphicsData[0].shape; --------------------------------------------------- // Find these codes: Graphics._createRenderer = function() { PIXI.dontSayHello = true; var width = this._width; var height = this._height; var options = { view: this._canvas }; try { switch (this._rendererType) { case 'canvas': this._renderer = new PIXI.CanvasRenderer(width, height, options); break; case 'webgl': this._renderer = new PIXI.WebGLRenderer(width, height, options); break; default: this._renderer = PIXI.autoDetectRenderer(width, height, options); break; } if(this._renderer && this._renderer.textureGC) this._renderer.textureGC.maxIdle = 1; } catch (e) { this._renderer = null; } }; // Change them with these: Graphics._createRenderer = function() { PIXI.dontSayHello = true; var options = { view: this._canvas, width: this._width, height: this._height, resolution: window.devicePixelRatio, autoDensity: true }; try { this._renderer = new PIXI.Renderer(options); if(this._renderer && this._renderer.textureGC) { this._renderer.textureGC.maxIdle = 1; } } catch (e) { this._renderer = null; } }; ---------------------------------------------------- // Find these codes: ShaderTilemap.prototype.renderWebGL = function(renderer) { this._hackRenderer(renderer); PIXI.Container.prototype.renderWebGL.call(this, renderer); }; // Change them with these: ShaderTilemap.prototype.render = function(renderer) { this._hackRenderer(renderer); PIXI.Container.prototype.render.call(this, renderer); }; ----------------------------------------------------

d. rpg_sprites.js
// Find these codes: Spriteset_Map.prototype.updateTilemap = function() { this._tilemap.origin.x = $gameMap.displayX() * $gameMap.tileWidth(); this._tilemap.origin.y = $gameMap.displayY() * $gameMap.tileHeight(); }; // Change them with these: Spriteset_Map.prototype.updateTilemap = function() { this._tilemap.origin.x = $gameMap.displayX() * $gameMap.tileWidth(); this._tilemap.origin.y = $gameMap.displayY() * $gameMap.tileHeight(); if (this._tilemap.bitmaps) { if (!this.isTilesetReady && this._tilemap.bitmaps.every(bitmap => bitmap.isRequestReady())) { this._tilemap.refresh(); this._tilemap.refreshTileset() this.isTilesetReady = true } } };

e. rpg_scenes.js
// Find these codes: Scene_Base.prototype.addWindow = function(window) { this._windowLayer.addChild(window); }; // Change them with these: Scene_Base.prototype.addWindow = function(window) { this.addChild(window); }; --------------------------------------------------------- // Find these codes: Scene_Base.prototype.createWindowLayer = function() { var width = Graphics.boxWidth; var height = Graphics.boxHeight; var x = (Graphics.width - width) / 2; var y = (Graphics.height - height) / 2; this._windowLayer = new WindowLayer(); this._windowLayer.move(x, y, width, height); this.addChild(this._windowLayer); }; // Change them with these: Scene_Base.prototype.createWindowLayer = function() { var width = Graphics.boxWidth; var height = Graphics.boxHeight; var x = (Graphics.width - width) / 2; var y = (Graphics.height - height) / 2; this._windowLayer = new PIXI.Container(); this.addChild(this._windowLayer); }; ---------------------------------------------------------

Congratulations. You updated PIXI to version 6.5.0.

END OF GUIDE.

Yeah. But...
There is a problem. "Show Text" doesn't work properly. Texts are not writing to screen. It just shows some letters and stops showing rest of texts, but game runs. Some texts are disappeared (included "Show Text" and "Name Input" texts). Here is the example:


As you can see, texts are disappeared.

And there are these warnings in Developer Tools (I think deprecated PIXI utilities affect texts). Here:



If you can manage to get rid of this problem, let me know. Thank you.