Overlapping rectangles with text

[mawi1512]

Hi guys,

I am playing around with PIXI since a few weeks. Unfortunately, I run into some performance problems. What I want to do is drawing many rectangles with text, which are moving through the scene.
Some of them run outside the scene and new ones will appear. A few rectangles have a diagonal brush (implemented through lines).
It is also possible, that the rectangles overlap each other partially and when one rectangle overlaps another rectangle, the text has to be visible partially too.

In my first approach, I had one graphics object, where I draw all primitives and lines. For text I used bitmaptext and added the objects to the stage. With this solution I run into the problem,
that the texts are over the rectangles all the time, even when they overlap.

var graphics = new PIXI.Graphics();
stage.addChild(graphics);

graphics.beginFill(0xFF0000, 1);
graphics.drawRect(0, 0, 100, 20);
graphics.endFill();

var text1 = new PIXI.extras.BitmapText('Some example text', { font: '16px SegoeUI' });
text1.position.x = 0
text1.position.y = 0;
stage.addChild(text1);

graphics.beginFill(0x0000FF, 1);
graphics.drawRect(70, 0, 100, 20);
graphics.endFill();

var text2 = new PIXI.extras.BitmapText('Some example text', { font: '16px SegoeUI' });
text2.position.x = 70;
text2.position.y = 0;
stage.addChild(text2);

In my second approach, I created graphics objects for each rectangle and added the text as child. Now It looks fine with overlapping rectangles, but with this solution I reach only slow fps.

var graphics = new PIXI.Graphics();
stage.addChild(graphics);

graphics.beginFill(0xFF0000, 1);
graphics.drawRect(0, 0, 100, 20);
graphics.endFill();

var text1 = new PIXI.extras.BitmapText('Some example text', { font: '16px SegoeUI' });
text1.position.x = 0
text1.position.y = 0;
stage.addChild(text1);

var graphics2 = new PIXI.Graphics();
stage.addChild(graphics2);
graphics2.beginFill(0x0000FF, 1);
graphics2.drawRect(70, 0, 100, 20);
graphics2.endFill();

var text2 = new PIXI.extras.BitmapText('Some example text', { font: '16px SegoeUI' });
text2.position.x = 70;
text2.position.y = 0;
stage.addChild(text2);

So what can I do to solve this issue? I hope you can help me. Thank you!

[ivan.popelyshev]

You can switch Graphics to Sprite with "Texture.WHITE" and 'tint', that way pixi will use the same renderer for them and they'll be properly batched.

[ivan.popelyshev]

However, PIXI Graphics is smart enough to actually do that via "_fastRect" mechanism, and it depends on your case, whether it was enabled automagically or not.

If FPS stays the same, please check if you specified "legacy" mode in renderer, it may break the batching in single-texture mode.

[mawi1512]

Thank you for this fast answer. I already tried that, but some of the rectangles have a 'diagonal brush', which are implemented through simple lines. Because of that I think I cannot use the 'Texture.WHITE'-approach and also it is not a fastrect, when lines are in the graphics object. Or am I wrong? Thank you for your help!

[ivan.popelyshev]

Make an atlas with all the brushes in rows and use regions(new PIXI.Texture) from it.

The only problem is tint, well, you can make black-white brushes and use https://github.com/gameofbombs/pixi-heaven/ to set two color tint instead. Make sure that Text uses heaven renderer too (text.pluginName='spriteHeaven')

[ivan.popelyshev]

Also, we've entered "not safe for newbies" area, so you have to give me more info about your use-case, how many texts are there, link to a demo, which devices you want to run it on.

If fillrate (fragment shader calls) is your bottleneck  then batching wont help  We need estimation on your drawcalls count.