Stuck with updateTransform performance issue

[rjerez1992]

First of all: hello. This is my first post, so thanks for reading it.
(I'm not a native English speaker. Sorry in advance for any mistakes)

I'm currently working on a multiplayer game for one of my school's projects. On the client I'm receiving the positions of the "players" about 30-40 times per second. Every time I get an update I take the positions and update that player's sprite.  It works perfectly for 2-3 players. The problem is that whenever I go over 4-5 players the performance goes way under the ground.

I tracked down the problem to the update of the coordinates of the sprites. Whenever I comment this two lines below, the performance stays good, up to 1000 players (fake players obviously).

if (otherCharactersInMap[chrId]!=null){		
	>>> otherCharactersInMap[chrId].x = (newx*stageWidth)/mapWidth; <<<
	>>> otherCharactersInMap[chrId].y = (newy*stageHeight)/mapHeight; <<<
}

I already checked if the math there was the problem. I tried running only the math without assigning them to the variable, and the performance was unaffected by it. So I think the problem is when I update the coordinates of the sprite. I'm running pixi on WebGL, my main container has 5 layers, one of those layers holds the "players". I tried disabling the sorting of the player's display group as I thought it was the problem. However it made little difference. This is how I'm creating the sprites for the characters.

var newCharacter = new PIXI.Sprite(PIXI.Texture.fromImage('sprites/char.png'));		
newCharacter.x = 0;
newCharacter.y = 0;
newCharacter.parentGroup = charactersGroup;
return newCharacter;

Any idea what could be wrong with it?
Thanks in advance.

 

[ivan.popelyshev]

My telepathy doesn't work on your case  Please provide more information. 

I think it should work with 500 players just fine.

[Owlzy]

maybe this a silly question.  but your not calling updateTransform() after setting the sprites x, y coordinates are you?

I can't imagine a scenario where simply setting a few sprites coordinates would cause slow down... 

[rjerez1992]

5 hours ago, ivan.popelyshev said:

My telepathy doesn't work on your case  Please provide more information. 

I think it should work with 500 players just fine.

I guess I have found my issue. I was using tilesets for rendering the map. The map was 32x32 and had 4 layers. I was rendering each tile as a separated sprite, same as I render character sprites. I guess there were too much sprites for my stage to hadle.

I disabled the map rendering and I was able to render 100 characters (which is my goal) at 60 fps.  I will changed how the map is being drawn and check if it fixes the issue. If not, I will update my post with more information.

 

3 minutes ago, Owlzy said:

maybe this a silly question.  but your not calling updateTransform() after setting the sprites x, y coordinates are you?

I can't imagine a scenario where simply setting a few sprites coordinates would cause slow down... 

No I'm not. I found that using the performance profiler of mozilla. I guess the problem what was I mentioned before. I will try and see if it fixes it (I was rendering 4k sprites for the map).

 

Thanks.

[rjerez1992]

I'm now trying to draw the map using pixi-tilemap. I'm using the following code to do it:

 

var tilemap = new PIXI.tilemap.CompositeRectTileLayer(0, [], true);	
 
for(i=0; i<qh; i++){	  
	for(j=0; j<qv; j++){  
		tilemap.addFrame(mapTextures[mapData[i][j]], j*tileWidth, i*tileHeight);	      
	}
}

app.renderer.render(tilemap);

 

However when I test it nothing is drawn on the stage. If I comment the last line and add the tilemap to the stage as a child,  It shows me many very little squares on the position where each tile should be. What am I doing wrong?

mapTexture is an array that holds many PIXI.Textures.

[ivan.popelyshev]

It should work. Please provide a fiddle to both cases.

[rjerez1992]

1 hour ago, ivan.popelyshev said:

It should work. Please provide a fiddle to both cases.

Here is a fiddle for the first case.

https://jsfiddle.net/8amcbvzd/1/

When I run the code on my machine I get a glimpse of the white square, but it dissapears in no time. Am I missing something here?

[ivan.popelyshev]

Application starts a gameloop that renders that thing on screen.

You render first frame manually, then it starts re-rendering the stage automatically.

If you really want to make a game, you should know how this class works, or even copy it and make your own - https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js Its made only for small demos. Single-frame, two-rnderers, anything can make it work wrongly.

[rjerez1992]

11 minutes ago, ivan.popelyshev said:

Application starts a gameloop that renders that thing on screen.

You render first frame manually, then it starts re-rendering the stage automatically.

If you really want to make a game, you should know how this class works, or even copy it and make your own - https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js Its made only for small demos. Single-frame, two-rnderers, anything can make it work wrongly.

Oh I get it. I never looked into the loop as I was always just rendering what the server told me.I added a loop that rendered the squares and it works.
After some work I made it work on my project, even with pixi-layers. It works flawlessly now, up to 300 players.

Thanks for the help. I have a final question. ¿How do I change the scale mode of  pixi-tilemap?
I tried doing PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;  before loading the textures, but as I see it works different.

[ivan.popelyshev]

Good question!

https://github.com/pixijs/pixi-tilemap/blob/master/src/TileRenderer.ts#L28
I think something like
 

renderer.plugins['tilemap'].SCALE_MODE = PIXI.SCALE_MODES.NEAREST

Thanks, I'll add it to README later.

[rjerez1992]

32 minutes ago, ivan.popelyshev said:

Good question!

https://github.com/pixijs/pixi-tilemap/blob/master/src/TileRenderer.ts#L28
I think something like
 

renderer.plugins['tilemap'].SCALE_MODE = PIXI.SCALE_MODES.NEAREST

Thanks, I'll add it to README later.

It did not work for me. Also if I inspect render.plugins['tilemap'], it has not field called SCALE_MODE.

 

[ivan.popelyshev]

oh right, its static field...

PIXI.tilemap.TileRenderer.SCALE_MODE = PIXI.SCALE_MODES.NEAREST

 

[rjerez1992]

4 minutes ago, ivan.popelyshev said:

oh right, its static field...

PIXI.tilemap.TileRenderer.SCALE_MODE = PIXI.SCALE_MODES.NEAREST

 

Works. Thank you, now I have everything working good.

Have a nice day.