# GUI list of items, performance issue

**URL:** <https://forum.defold.com/t/gui-list-of-items-performance-issue/67632>\
**Category:** Questions\
**Created:** [February 24, 2021, 11:43am UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632 "2021-02-24T11:43:21Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lex](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/lex/32/23856_2.png) [@Lex](https://forum.defold.com/u/Lex)\
**Post date:** [February 24, 2021, 11:43am UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/1 "2021-02-24T11:43:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Klear](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/klear/32/11577_2.png) [@Klear](https://forum.defold.com/u/Klear)\
**Post date:** [February 24, 2021, 12:41pm UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/2 "2021-02-24T12:41:26Z")

</div>

You probably need to use layers to reduce draw calls. See [this topic](https://forum.defold.com/t/draw-calls-and-defold/4674/10) for details.

---

<div class="post-metadata">

**Author:** ![roccosaienz](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/roccosaienz/32/19991_2.png) [@roccosaienz](https://forum.defold.com/u/roccosaienz)\
**Post date:** [February 24, 2021, 1:08pm UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/3 "2021-02-24T13:08:49Z")

</div>

You would also try to disable elements outside the screen.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [February 24, 2021, 1:34pm UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/4 "2021-02-24T13:34:02Z")

</div>

> [@Lex](#):
>
> What is the best practice for optimising performance?

> [@Klear](#):
>
> You probably need to use layers to reduce draw calls

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:

> **[The web profiler - Profiling in Defold](https://defold.com/manuals/profiling/#the-web-profiler)**
>
> Defold includes a set of profiling tools that are integrated with the engine and the build pipeline. These are designed to help find problems with performance and memory usage. The built-in profilers are available on debug builds only. The frame...

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

> [@Lex](#):
>
> Should I check if a GUI node is visible in screen, and therefore enable/disable it?

> [@Lex](#):
>
> Should I “recycle” the nodes? (Similar to list adapters in native Android)

I thought Druid already did this. @Insality?

In [Goooey](https://github.com/britzl/gooey) 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.

---

<div class="post-metadata">

**Author:** ![Insality](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/insality/32/39737_2.png) [@Insality](https://forum.defold.com/u/Insality)\
**Post date:** [February 24, 2021, 1:36pm UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/5 "2021-02-24T13:36:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Pawel](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pawel/32/24623_2.png) [@Pawel](https://forum.defold.com/u/Pawel)\
**Post date:** [February 24, 2021, 1:37pm UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/6 "2021-02-24T13:37:32Z")

</div>

Strange, I once made [a match-3 game completely in GUI](https://forum.defold.com/t/witchcrafter-empire-legends/32285/16) and with a table of 6x8 blocks and other GUI elements it was working on very low quality devices 😃 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](https://forum-defold-uploads.b-cdn.net/original/3X/d/7/d75530044ac3c323d2987a833b3587109fc69e87.png)

---

<div class="post-metadata">

**Author:** ![Lex](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/lex/32/23856_2.png) [@Lex](https://forum.defold.com/u/Lex)\
**Post date:** [February 24, 2021, 1:48pm UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/7 "2021-02-24T13:48:35Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [February 24, 2021, 2:06pm UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/8 "2021-02-24T14:06:51Z")

</div>

> [@Lex](#):
>
> I build my list by cloning a model node, cloning keeps the defined layers, right?

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.

---

<div class="post-metadata">

**Author:** ![Lex](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/lex/32/23856_2.png) [@Lex](https://forum.defold.com/u/Lex)\
**Post date:** [February 24, 2021, 2:43pm UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/9 "2021-02-24T14:43:57Z")

</div>

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

 ![image](https://forum-defold-uploads.b-cdn.net/original/3X/9/e/9e7187a3e01ea6502dd2bd2f40343947b692db7f.png)

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.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [February 24, 2021, 3:01pm UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/10 "2021-02-24T15:01:23Z")

</div>

> [@Lex](#):
>
> I assign every TEXT node to “layer3”.

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

> [@Lex](#):
>
> I assign every image BOX to “layer2”.

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: [GUI scenes in Defold](https://defold.com/manuals/gui/#layers-and-draw-calls)

---

<div class="post-metadata">

**Author:** ![Lex](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/lex/32/23856_2.png) [@Lex](https://forum.defold.com/u/Lex)\
**Post date:** [February 24, 2021, 3:18pm UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/11 "2021-02-24T15:18:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [February 24, 2021, 3:19pm UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/12 "2021-02-24T15:19:35Z")

</div>

More layers to the rescue!

---

<div class="post-metadata">

**Author:** ![Lex](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/lex/32/23856_2.png) [@Lex](https://forum.defold.com/u/Lex)\
**Post date:** [February 24, 2021, 3:30pm UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/13 "2021-02-24T15:30:28Z")

</div>

Allright thanks for the pointers.

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

---

<div class="post-metadata">

**Author:** ![Lex](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/lex/32/23856_2.png) [@Lex](https://forum.defold.com/u/Lex)\
**Post date:** [April 1, 2021, 1:46pm UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/14 "2021-04-01T13:46:10Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Insality](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/insality/32/39737_2.png) [@Insality](https://forum.defold.com/u/Insality)\
**Post date:** [April 1, 2021, 1:50pm UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/15 "2021-04-01T13:50:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Lex](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/lex/32/23856_2.png) [@Lex](https://forum.defold.com/u/Lex)\
**Post date:** [April 1, 2021, 2:12pm UTC](https://forum.defold.com/t/gui-list-of-items-performance-issue/67632/16 "2021-04-01T14:12:55Z")

</div>

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