Low framerate when using lots of text nodes in gui

[snakky]

I need to use lots of text nodes in gui (around 70). In such case the frame rate drops substantially. How can I improve the situation? I’m running a debug version on windows.
Here’s what profiler shows:

[AGulev]

Profiler shows 301 Draw Call, it seems like your GUI do not optimized.
Please read this topic about the draw calls optimization, it should help you:

Draw calls and Defold

I am by no means an expert in this field, but sometimes I think about performance. Here is some thoughts about draw calls in Defold. Draw Calls What is a draw call? In a one liner: “A command that tells the GPU to render a certain set of vertices as triangles with a certain state (shaders, blend state and so on). A command like this is often more than one object.” A batch is a term that is basically means multiple commands that share the same state. If you are curios of a more in depth explan…

[snakky]

It helped. I used templates with text nodes mixed with box nodes which broke batching. I’ve put text nodes to a separate layer and it worked out perfectly.
Here’s what profiler shows now:

[Pkeod]

Still too many drawcalls, you should try to get it under 100 for mobile.

[snakky]

Ok, thanks, I will.

[britzl]

you should try to get it under 100 for mobile.

Yes, it should be possible to get lower than 100, probably a lot lower.

Ok, thanks, I will.

Do you know where you draw calls originate from? How many game objects and sprites do you have? How many gui components? Share a screenshot of the table to the right (Counters).

[snakky]

Well, yes, there’s a lot of nodes and many of them are text nodes with different fonts. I’m currently using a separate font for different font sizes (I was trying to get better text look, unfortunately it didn’t help, but I left it for a time being). Here’s the table to the right:

[Pkeod]

Are you using df/distance field fonts? You can make a custom material with a custom fp to add extra sharpness so that when text is scaled down it doesn’t get as blurry, then it’s more useful to use one font for multiple sizes.

[snakky]

I’m using bitmap fonts because df font gets weird color tint when scaled too much. Is there such fp shader already exists? Shaders are my weak spot

[Pkeod]

Example modification is very simple, you only halve the smoothing, or whatever value looks best for your project.

Top has this modification, bottom uses builtin. So you can see the builtin version turns grey when scaled down but reducing the smoothing helps to minimize that.

What do your fonts look like currently?

[britzl]

I’m currently using a separate font for different font sizes (I was trying to get better text look, unfortunately it didn’t help, but I left it for a time being)

I’m sure there’s more to be done with layers to reduce draw calls! Can you share a screenshot? In theory and sometimes in practice you can get draw calls down to the number of atlases+number of fonts+possibly one or two more if you want stuff both above and below text.

[Pkeod]

Here’s a slightly different modification, instead of reducing all smoothing only reduce the edge. Again in each screenshot top is modified bottom is builtin.

This stays more consistently colored when scaled and looks a bit smoother.

[snakky]

Thank you guys! Everything you suggested helped a lot. I managed to get it to 15 draw calls.

[britzl]

Cool! I’m happy that to hear that you managed to rework and optimize your GUI!