Jump to content

Framerate when rendering tilemap is only 30


Recommended Posts

I am using "pixijs/pixi-tilemap" library to render maps exported from Tiled, but the rendering frame rate is low.

I am newbie and I guess there may be a problem with the rendering loop logic,

My thinking is as follows:
I have several rendering layers(PIXI.display.Layer) in my game, I call them 'RenderingLayer',

there are several cameras in the game (inherited from PIXI.Container),

each camera can render multiple 'RenderingLayer' And output to RenderTexture,

finally use the PIXI.Sprite group to render the final result according to the depth property of the camera.

I use the ECS architecture to implement the game

Code of RenderingSystem.update:

for ( const camera of this.cameraComponents ) {

	if ( camera.renderingLayers.length === 0 ) {

	// clear stage
	$app.stage.removeChildren ();

	// add current rendering camera
	$app.stage.addChild ( camera.cam );
	// collect camera rendering layer
	for ( const layerName of camera.renderingLayers ) {
		if ( $app.renderingLayers.has ( layerName )  ) {
			let layer = $app.renderingLayers.get ( layerName );
			if ( layer.visible ) {
				camera.cam.addChild ( layer );
	// rendering camera result
	Graphics.render ( $app.stage, camera.renderTexture, this.renderTarget );

	// clear
	camera.cam.removeChildren ();

// render final result
this.renderSprite.removeChildren ();
for ( const camera of this.cameraComponents ) {
	this.renderSprite.addChild ( camera.renderSprite );
renderer.render ( this.renderSprite, null, true );

May be frequent use of removeChildren / addChild affects rendering performance??

I use the ECS architecture to implement the game, You can find the code for the RenderingSystem class here: js/ecs/systems/rendering_system.js.

Another guess might be that I did not use the pixijs / pixi-tilemap library correctly.?

see here: https://lihaochen910.github.io/RPGMakerProject/

code is here: https://github.com/lihaochen910/RPGMakerProject

Link to comment
Share on other sites


This subforum has many threads related to tilemap, just search for them. I dont feel well and cant make a new post about it :( 

Basically you need both good high-level algo and good low-level implementation. There are variants for both.

Your choice of renderTexture caching depends on size of the map. Just "30FPS" is not enough for debugging, need more info. Profile it with devtools and https://spector.babylonjs.com/

Welcome to the forums!

Edited by ivan.popelyshev
Link to comment
Share on other sites

Thanks for your reply,

I tried using SpectorJS to debug rendering performance and found that it took a long time to call the gl.texSubImage2D method.

The call stack is as follows:

  • 0: _hackSubImage (TileRenderer.ts)
  • 1: TileRenderer.bindTextures
  • 2: RectTileLayer.renderWebGLCore
  • 3: TileLayer.CompositeRectTileLayer.renderWebGL



Link to comment
Share on other sites

oh, well, adjust the constants: https://github.com/pixijs/pixi-tilemap/blob/master/src/Constant.ts

Explanation is here: https://github.com/pixijs/pixi-tilemap#multi-texture-configuration-important

In v4 default mode was RMMV - tilemap is creating 4 textures by 2048 , each holds 4 subtextures of 1024 that you submit. Its bad because those texture are GLOBAL and if you have two tilemaps, or one tilemap that changes textures every frame - they will re-upload textures every tick.

You can configure constants to switch it off and use 16 textures directly, without re-uploading:

PIXI.tilemap.Constant.boundCountPerBuffer = 1;
PIXI.tilemap.Constant.maxTextures = 16;

For pixi-v5 that is default configuration.

The whole problem existed only because there are devices that support only 4 or 8 texture locations. Fortunately, now all devices support 16.

Edited by ivan.popelyshev
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...