Dom element vs PIXI.Text performance

[caymanbruce]

I want to display some simple dynamic texts on the screen of my game. The texts change every few seconds. There are two options for me. One is PIXI.Text, but I've read some discussion about performance issues rendering texts in PIXI. And  I can't format the texts easily. The second reason kills it for me. So I am not very sure if this is a good idea. Another option is to use a dom element. This way it is easier for me to format the texts using html elements. But I am not sure about the performance to use it within a PIXI application too. Which one should I choose?

[xerver]

You should try both and choose the one that works best for you.

[Taz]

I'm pretty curious about any performance discussions and related testing comparing these two approaches. I'd been assuming/hoping that (for WebGL) having a few more small sprites to render each frame wont have much impact on FPS, but I suppose I too should test both methods for my use case.

[caymanbruce]

7 hours ago, magig said:

I'm pretty curious about any performance discussions and related testing comparing these two approaches. I'd been assuming/hoping that (for WebGL) having a few more small sprites to render each frame wont have much impact on FPS, but I suppose I too should test both methods for my use case.

In WebGL mode both methods give me 60FPS on my 5 years old laptop. But I am very happy with the html formatting. I hope PIXI.Text can do better formatting in the future though.

[xerver]

Both methods will have different performance characteristics based on the application. It isn't a simple A is faster than B situation. There are Pros and Cons for both, along with a ton of "if you do X" that changes the landscape. Best thing to do is try them both with you app, and see which one makes the most sense for you.

Glad you were able to test and move forward @caymanbruce

[themoonrat]

@caymanbruce I've actually come the opposite way to you; previous games used a combination of dom and canvas (no engine, just pure canvas commands), and now have everything fully on the canvas with pixi.

Advantages to dom text

• Looks sharper
• Less memory usage (pixi text creates textures)
• Less penalty for changing text (no need to re-recreate textures!)
• Less rendering time in canvas renderer (in my experience; on old libs started 4 years ago making games for old devices, we found less canvas draw calls was a big factor in performance; swapping text draw calls for dom overlay helped performance)

Advantages to pixi text

• Make text look fancier (complex gradients that work on all browsers with no hacks. With dom text, there's varying browser support with fallbacks needing to be created)
• Easier to move text around the screen, as well as changing it's z-index, as it is a child of on screen display objects (dom text always has to sit above everything)
• More accurate resizing of text (my games have to support 17 languages... so for every piece of text we need to give a max width and max height that can be in. Easy to iterate over measuring in canvas, tricky and not very accurate in dom, with hacks require to avoid dom reflows when trying to measure text)
• No worries about different browsers rendering things differently or in different places. Placement of text for me was important in the games, in dom, just a pixel or two difference on a small piece of text could make the difference between it looking good or not looking good.

So in the new libs, we're enjoying the advantages of pixi text, with a couple of things to help mitigate the negatives; pre-creating text textures so they're not being changed in game, caching text so 2 text objects with the same style and text share the same texture, rendering text at a higher resolution to the game etc.

But there are different use cases (perhaps yours) which makes going the dom route better suited for you

 

[caymanbruce]

@themoonrat Thanks for the info. I don't have a lot of experience with PIXI.Text. But I still use PIXI.Text in other part of my game when I need the texts to animate a lot. Maybe PIXI.Text can have fancier looks but aligning the texts is not so easy. I just need a quick and neat way to display the texts which align left and right at the same corner of the screen and I find that using Dom element saves my time. And I only want the texts to stay on top of every thing. But I am happy PIXI.Text suits your case. I am curious about changing size of texts written in different languages to fit an area. As I need to put different languages into one display area, with PIXI.Text I try aligning the texts and padding left and right but always failed to do so. I may consider doing that in the future if this looks really nice. But I guess this requires a lot of tweaking.

[themoonrat]

With pixi text, to get proper alignment working, you actually need to change the anchor.x value on that text object; the style alignment option only really works for multi-line text

[caymanbruce]

6 minutes ago, themoonrat said:

With pixi text, to get proper alignment working, you actually need to change the anchor.x value on that text object; the style alignment option only really works for multi-line text

Does that mean I need to use multiple text objects if I need to align many lines? Here is a question I posted on stackoverflow.com. I am curious about how to achieve the same result with PIXI.Text object. 

[ivan.popelyshev]

@caymanbruce ask @bQvle, he's an expert in that area.

[themoonrat]

44 minutes ago, caymanbruce said:

Does that mean I need to use multiple text objects if I need to align many lines? Here is a question I posted on stackoverflow.com. I am curious about how to achieve the same result with PIXI.Text object. 

You'd have a text object per column, and add text on a column by column basis, so column 1 in your example would be 

column1.text = "#1\n#2\n#3";

column2.text = "aabb\nとうきょう\ngood morning f";

[caymanbruce]

@themoonrat OK so using multiple text objects is inevitable. And if I want to have different colors for different rows it will be more complicated. In this case I guess using Dom element may be a good choice.

[themoonrat]

Perhaps, yeah https://github.com/tleunen/pixi-multistyle-text let's you do multi styled text within one text object, but you'd require multiple i think, unless you used a fixed width font