Jump to content

Overlapping rectangles with text


mawi1512
 Share

Recommended Posts

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!

3.png

1.png

2.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

4.png

Link to comment
Share on other sites

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')

Link to comment
Share on other sites

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.

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