Create two tilemaps and render both in screen make game lag

[chyj4747]

Edit: Problem found, check Post #9, but still not solved.
Edit: Solved. See Post #10
-----------------------------------------------------
I'm new to rpg maker, using mv now.

I'm making a game in pokemon style, the first problem is that rmmv does not support rendering multiple maps.
In pokemon the towns and routes are separated as small maps, but it uses seamless transfer to make players feel it is a single big map.

I have searched online for days but couldn't find a plugin for this feature. So I decide to make one by myself.

My idea is creating a new tilemap for the second map, just like what Spriteset_Map does for the main map. I added the new tilemap to _baseSprite after creating.

When Game_Player.updateScroll(), both maps' displayX and displayY will be updated.

The heavy lag happens when two maps are scrolling. As shown below:

It's ok when player moves to left but keeps lagging after the second map is rendered.

Both maps are in default size which is 17x13 so it's not supposed to make any problem with rendering efficiency.

Anyone can give me a tip to solve this?
Thanks.

My plugin is uploaded.
Usage:
Simply making two default maps and write note as below.
<cmap:u 2 7 0> for map 1
<cmap:d 1 6 12> for map 2

Or actually, I am a game maker not plugin maker. So if there is any plugin can do the same thing, it would be better.
More specific, the plugin should render two maps at same time, and allow player to move from one map to another seamlessly.
I know there are plugins to merge maps, but it's not the same. At least these merge plugins not allow different tilesets.

 

[Eliaquim]

Hi!
I'm not an expert, but I will try to help.

In pokemon the towns and routes are separated as small maps, but it uses seamless transfer to make players feel it is a single big map.

So I will focus on this first, instead of helping you with the code(Because I think that others can help better in this case);

Did you try to make the transfer between maps without the fade option, instantly?
I think maybe you can simulate this with a parallax image.
For example, make the two maps.

• Draw Map 1 as you wish.
• Draw Map 2 as you wish.
• Then, take a screenshot of the two maps with OrangeMapShot.js from @Hudell
• Add the Map 2 screenshot in parallax for Map 1.
• Add the Map 1 screenshot in parallax for Map 2.
• Note: You don't need to add the whole map screenshot, only the part that the player will see.
• Now you will have to change the size of the two maps. Because if you enter in Map 2 from the top of Map 1, you have to leave blank space(not draw tiles) on Map 1 for it to show the parallax image of Map 2.
• Then when the player is close to the top of Map 1, he will see the parallax of Map2.
• When he touches the "limit" of Map 1, he can touch an event or region and transfer him to Map 2 on the proper coordinate(because in Map 2 you have to show the parallax for Map 1 behind the player).

Obviously, I do not test this, in theory, it may work.
If I had the time, I will make an example.
A plugin for preload the parallaxes maybe help when you are transferring, to avoid any delay.
Maybe you can use pictures too, but you will have to remove or change the place of each one when the player transfers.
I think the parallax is best for this.

 

[ShadowDragon]

here is a tutorial how to make transitions like pokemon (eventening).

 

[chyj4747]

Did you try to make the transfer between maps without the fade option, instantly?
I think maybe you can simulate this with a parallax image.

How to handle animated tiles in your method?
It seems that screenshots are required for both maps when animated tiles changing.
So I think the render flow is similar as rendering two maps, where the game needs to draw two maps each frame.
But in your case, it may not lag because it only renders one map each time, not two maps at the same time.

 

[chyj4747]

here is a tutorial how to make transitions like pokemon (eventening).

I know this method, making common parts for each map, which increases the total amount of work I have to do. And also I have to handle events in the common area.
It's my last choice if plugin cannot make this feature.

 

[Eliaquim]

Well... I have not though about that
With a lot of patience and practice, you can reproduce the animated tiles with a parallax plugin...
But I have seen the video that @ShadowDragon shows and I think it is a better way for doing it. It's best then use parallax I think, and you can use the animated tiles.
The logic is similar to what I show.

But I think, either way, you will have a decent amount of work, but I don't think this is a bad thing.

 

[chyj4747]

I've tried several ways (create new tilemap, new sprite, new spriteset_map) and pretty sure that it's the algorithm of tilemap makes rendering lag.

To render one map, it costs about 70ms so rendering two maps costs 140ms or even more make sense actually, which makes the game lag.

Another thing is the FPS drops to 6 and keep there when rendering two maps.

After doing these tests and tries, I found that the key point is the algorithm of rendering tilemap. It will not cost more time when rendering one map with size 17x13x2. But it costs double or more time when rendering two maps both in size 17x13.

The algorithm is in js/libs/pixi-tilemap.js. Its function is RectTileLayer.prototype.renderWebGL.

I also tried to render one map per frame. That is, the first frame only render map 1, second frame only render map 2, and so on. But in this way, the screen quickly flashes. Because in the frame to render map 2, the map 1 is cleared and leave black background there.

For now, I decide to merge the two tilemaps into one for the algorithm only. And hope I can do some tricks to let the algorithm notice there are two tilemaps. In this way, the algorithm will run only once.

But I feel the real reason is deeper inside the algorithm and what I am going to try cannot solve the problem....

Edit:
Rendering one map with size 17x26 takes 50+ms, ShaderTilemap takes 35-38ms for rendering tilemap.
When rendering two maps with size 17x13, of course ShaderTilemap runs twice, but both time it costs more then 100ms, which cause the final rendering time over 250ms.

 

[chyj4747]

The rendering flow of rendering ShaderTilemap in pixi_tilemap.js, which makes the game lag:
RectTileLayer.prototype.renderWebGL
TileRenderer.prototype.bindTextures
_hackSubImage
gl.texSubImage2D

gl.texSubImage2D takes much more time than rendering single tilemap

 

[chyj4747]

I found the reason that causes the lag.

When mv rendering a tilemap, its shader uses the tileset that is loaded into webgl.

When rendering two maps, let's say map1 and map2, and also the two maps will be rendered in this order, MV will load tileset1 for rendering map1. Then it loads tileset2 for rendering map2. Because it can only store one tileset (not means it can't store more but mv writes in this way), it keeps switching two tilesets.

We know that the tileset is a combination of many pictures so it's big, and of course loading tileset will cost a lot time.

Normally the tileset is loaded only when the actor goes into a new map. So it is only loaded once and never change during rendering.

Well, now I have to figure out a way to change this way of rendering...

 

[chyj4747]

It's solved. Not by me, I asked someone else.
As you can see there are still some problems. But at least it's not lag any more.
Once I finishing this plugin, I will upload here.