How to duplicate GUI elements

Questions
,
1

I’ve been playing with the gui editor. First of all, it’s amazing and easy to use! But a issue I encountered is that when I load a snippet, the entire advancedTexture is cleared and re-drawed with the snippet. Am I using it the wrong way? Is there a way to just load it and not clear everything else?

Another issue I’m facing right now is that I want to create a horizontal list of users(on mobile devices) based on data. I created a single user’s GUI instance in the GUI editor. Is there a way that I can clone that instance for each additional user? I created a simple PG to demonstrate. Babylon.js Playground

A solution I can think of is to put the user instance GUI in another snippet and then create a new advancaedTexture and load the snippet whenever a new user comes in. However, I worry that too many advancaedTexture will bring down the performance(on mobile devices).

Any help is appreciated! Thank you!

P.S, I saw a post in 2019 that said “GUI element clone is not supported so far”, is it supported now?

2

cc @DarraghBurke

3

Hi! Clone is not supported yet, but you can use Serialize() and then Parse() to clone a control. However, it will not clone observables, since they are not serializable. (Only things that can be serialized into a JSON object.)

I would recommend just having one ADT, and creating a “template” container inside of that which you can serialize and then make invisible. Then, you can just Parse() it to clone it for as many items in your user list as you need.

Here’s an example of doing just that: How to add unknown number of Items to a StackPanel made in the GUI editor? - Questions - Babylon.js (babylonjs.com)