GUI list of items, performance issue

Questions
#1

Hello,
I have a list of GUI nodes that I want to display, there are ~60 of the.
Each node contains other nodes (several texts, one image).

I’m using Druid library to handle the scrolling.

On my device, the performance is really poor, it’s lagging as soon as I start scrolling.

What is the best practice for optimising performance?
Should I check if a GUI node is visible in screen, and therefore enable/disable it?
Should I “recycle” the nodes? (Similar to list adapters in native Android)

Would like to know what the trick is to display long scrollable lists.

Thanks

3 Likes
#2

You probably need to use layers to reduce draw calls. See this topic for details.

4 Likes
#3

You would also try to disable elements outside the screen.

1 Like
#4

Layers is a great way to reduce draw calls significantly in your UI. Start by checking the web profiler how many draw calls you have:

You should theoretically be able to reduce any gui scene to as many draw calls as you have layers.

I thought Druid already did this. @Insality?

In Goooey I have two kinds of lists: 1) Static - all elements of the list exist as nodes at all times 2) Dynamic - only as many nodes as can be visible are needed regardless of the length of the list.

1 Like
#5

Right, layers optimisation will work for this case, as I can see. 60 elements is not so huge amount.

What about dynamic list in Druid: it still not released. It will be available in next release.

4 Likes
#6

Strange, I once made a match-3 game completely in GUI and with a table of 6x8 blocks and other GUI elements it was working on very low quality devices :smiley: It was custom made and all the elements on the board where a cloned of one original node and have changed flipbook animations on the go (to red, green, yellow and so on). I also never actually tried Druid’s list, only Gooey’s and Gooey has dynamic list, so it is a direct solution to your problem. And I guess you should definitely try to disable nodes outside of the screen, if Druid doesn’t do it.
If you don’t want to go with Gooey dynamic list and can go with a custom list, you can make just enough nodes (with child nodes that you need) to cover the screen (+ one set for scrolling purpose - that if you scroll outside of the view, will be placed on the other site, e.g. on the bottom with updated data) and set texts or change flipbooks on the go, taking data from a table in script. Really rough sketch:

image
image.png1038×438 23.2 KB

#7

So I’m using layers (3 layers) for the inner nodes inside my main node.
I still see 253 draw calls from the web profiler so something must be wrong.

I build my list by cloning a model node, cloning keeps the defined layers, right?

1 Like
#8

It should yes.

My recommendation:

  • Create a new collection and set it as your bootstrap/main collection
  • Create a new gui scene
  • Add it to the collection
  • Add two instances of the list item (using 3 layers)
  • Check the web profiler

If everything is ok you should see a total of 3 draw call.

1 Like
#9

I’m a bit confused about layers. Here is my structure:
image

I assign every TEXT node to “layer3”.
I assign every image BOX to “layer2”.

I see 9 draw calls being drawn, and not 3.

I dont’ know if I should assign a layer to the parent nodes as well.
How should I organize my layers on this specific template? Help would be much appreciated.

#10

Are the text nodes using the same font? If not it will break the batching of draw calls if you use the same layer.

Are they using the same atlas? If not it will break the batching of draw calls if you use the same layer.

More info here: https://defold.com/manuals/gui/#layers-and-draw-calls

#11

Yes there are 2 different textures being used, and 2 different fonts! That explains it.

2 Likes
#12

More layers to the rescue!

1 Like
#13

Allright thanks for the pointers.

Also - I disable/enable according to the screen position. It works well!

3 Likes
#14

Hello @Insality,
Any ETA for the dynamic list in Druid? I’m in a situation where it will be required to the amount of GUI nodes I will have to use (imagine a a list of 200 items, each items having several nodes…).
Just curious to see what’s the advancement on this topic,thanks!

1 Like
#15

Hello, @Lex
I’ll try spend time to finish it and release soon. When it will be ready, I’ll post in Druid topic.

(Can’t give the promise, but I’ll try to do it in this weekends)

1 Like
#16

Awesome, thanks for the update.
Can’t wait to try it!

1 Like