Sign in to follow this  
Existone

Low fps with 2-3k static circles

Recommended Posts

Strange thing i discovered. My game draw a lot of circles, i draw them once, they don't move. With ~1k visible circles fps is perfect but once more circles appears on screen fps starts to decrease.

how i do it for each circle:

this.circle = new PIXI.Graphics();
var lw = this.size * 0.03;
let clr  = this.color.replace('#','0x')
this.circle.beginFill(clr);
this.circle.drawCircle(0, 0, this.size - lw * 0.5 + 5);
this.circle.endFill();

in this bunny benchmark i can spawn 60k bunnies without lag (and they with texture!), on my project i draw simple circle without nothing. what is wrong? i tried cacheAsBitmap but it causes fps lag while circle start to draw. and quality of circle decreased this way..

here is screenshot of my circles http://joxi.ru/MAj7eDLHj1ExQr

Share this post


Link to post
Share on other sites

In v4, Graphics elements are not batched, and if you use cacheAsBitmap on every element, it will spawn extra texture, so its not a solution, Its even worse: instead of changing buffer and  2000 graphics elements, pixi will change a texture for each of those sprites. 

You have to spawn only one circle, render it into one texture, then spawn many sprites and use tint parameter.

In v5 graphics batching works, you dont have to do anything. Development version of v5 is here: pixijs.download/dev/pixi.js , docs here: http://pixijs.download/dev/docs/index.html

That's a short answer. For long one read all the threads of this subforum.

Share this post


Link to post
Share on other sites
7 hours ago, ivan.popelyshev said:

In v4, Graphics elements are not batched, and if you use cacheAsBitmap on every element, it will spawn extra texture, so its not a solution, Its even worse: instead of changing buffer and  2000 graphics elements, pixi will change a texture for each of those sprites. 

You have to spawn only one circle, render it into one texture, then spawn many sprites and use tint parameter.

In v5 graphics batching works, you dont have to do anything. Development version of v5 is here: pixijs.download/dev/pixi.js , docs here: http://pixijs.download/dev/docs/index.html

That's a short answer. For long one read all the threads of this subforum.

thanks, i'll try v5! 

and one more question: is it possible to change size of circle without using scale and without full re-render?

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.