Existone 0 Report post Posted January 18, 2019 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 Quote Share this post Link to post Share on other sites
ivan.popelyshev 1071 Report post Posted January 18, 2019 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. 1 Existone reacted to this Quote Share this post Link to post Share on other sites
Existone 0 Report post Posted January 18, 2019 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? Quote Share this post Link to post Share on other sites
ivan.popelyshev 1071 Report post Posted January 18, 2019 No, its not, because pixi has to rebuild the circle vertices each time. You can change "graphics.scale", try it, see what happens when there are not enough vertices. Maybe its ok for you. Quote Share this post Link to post Share on other sites