Performance issues with core js related to tilemaps.

[Kane Hart]

This is from this reddit post (Warning Colorful Language Title)

https://www.reddit.com/r/RPGMaker/comments/3q3o58/the_chickenshit_bit_that_is_killing_your_rpg/

The user did not seem to have a forum account so I thought I share it here because I think it's everyone's best interest to consider any performance issues that might be contained in the rpg_core.js even more so if we can rewrite parts of the code to make it run a lot faster.

Naive tilemap code.

Specifically, if you go to the actual Tilemap class definition; it's in js/rpg_core.js line 3732 down. It creates a Sprite object for each tile on the map (line 3996) and draws them in one-by-one (line 4050, lines 4064-4139, and a bunch of other functions).

The way you should do it is, at least in OpenGL / WebGL, upload all of your spritesheets as individual textures, upload another texture/buffer/whatever for each tile's ID (1-color, integer); and use a screen-filling fragment shader with a few uniforms to control scrolling behavior. This is very fast since your tilemap and spritesheet don't change except during scene transitions; you can tell the GL driver to just leave all the data on the GPU (GL_DRAW_STATIC).

On Canvas2D, since we don't have those nice things, I would instead recommend blitting the rendered tilemap onto itself and then redrawing just the strip of pixels on the side that need to be redrawn. IDK if that's possible. I have more OpenGL experience than Canvas2D, and I still have to figure out both RPG Maker MV as well as the graphics code it uses as it's base (PIXI) before I can get a performance-saving plugin written.

 

[MaxLionheart]

It would be interesting if someone with the required knowledge would study this to figure out a simpler solution to the performance problem...

The solution this guy suggest seems... very complicated...

As you said Kane, maybe a few modifications to the base script could be enough...

 

[KisaiTenshi]

Just FYI, OpenGL ES 2.0 (which WebGL is based on) is not straight OpenGL.

As for the "Drawing sprites" bit... googl search "Pixi.js tilemaps" and you'll see the advice suggested is in fact creating sprites. (If that is good advice or not depends on how large things are)

To quote 

 I think you're confusing a gl texture and a PIXI Texture. 

Like the reddit person is right, the correct way of doing a tilemap in OpenGL would be to upload the tileset as a texture and then use a fragment shader. But that isn't what PIXI.js is. Pretty much every tutorial, example and such refer to using tiles as sprites. Even this does it.

More or less the MV engine is a 1:1 equivalence to what VX/VX Ace did before.

Basically what the Reddit'or is suggesting is this

However, because the maps can be non-square sizes, the "render to texture" bit isn't straight forward since it would make the map maximum the same size as the maximum texture size (eg 2048x2048) and would have to be power of 2 (eg 1024x1024, 512,512) in size to function.

You'll note

This only really makes sense for static tiles. 

Which things like the animated water tiles are not. Though there isn't much preventing you from just updating those pixels in the tile map texture. This would require re-engineering how the tiles work.