Jump to content

Stuck with updateTransform performance issue


rjerez1992
 Share

Recommended Posts

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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