Best way to draw rectangle with border

[mawi1512]

Hi all,

I would like to know what's the most performant way to draw rectangles with borders. In my project I have to draw many such rectangles and they will change their width very often through different user actions. Actually I'm using NineSlicePlane, but maybe there is a other solutions with even better performance...

Thank you!

[bubamara]

sprite with another slightly smaller sprite as it's child

[xerver]

Are you encountering a performance issue with the method you are using?

[mawi1512]

On 1/31/2019 at 9:15 PM, bubamara said:

sprite with another slightly smaller sprite as it's child

I already had the idea, but somehow it feels like a workaround, not a native solution and I asked myself if there is no other native solution. But if the experts here in the forum also suggest it, then I'll take a closer look at it.

19 hours ago, xerver said:

Are you encountering a performance issue with the method you are using?

I can't answer that question with a clear yes or no. In my project the number of rectangles to draw depends on the users data model. And on large models there is a noticeable difference between normal sprite rect and a border rect with NineSlicePlane. Therefore my question how to get the difference smaller .

Thank you for your fast answers...

[bubamara]

Sorry, I should have been clearer : it depends on your use case and Pixi version. For example if you are using Pixi 4.x and mixing up NineSlicePlane with Sprites, then above mentioned Sprite-Sprite approach should be noticeably faster. Pixi 5.x can batch mesh (NineSlice) with Sprite, thus making speed difference less visible.

On the other hand Pixi 4 seems to have better raw performance than v5, feel free to compare yourself : https://themoonrat.github.io/webgl-benchmark/

And when you have mentioned that you are updating them often, then it's another reason to try pure sprites approach. Anyway, would love to hear your conclusion if you find a time to compare :)