An Adventure with the Babylon.js GUI System!

Woot! this is massive!

Here is one I was making with code.

There are UI states, animated buttons, value reactive controls, window panes, popup modals and a bunch of other custom controls.

Was just using it to prototype at one point and have actually used code from this in several projects now.

Ohh and I never turned on the moon dial on this one so here is a quick example of that being animated:



Wow, two amazeballs entries already, and each distinctively unique!

This bodes well for the rest of the contest :sunglasses:

Maybe not so good for @mawa, but we encourage competition! :laughing::blue_heart:

1 Like

Dear fellow BJSers,

Just so you know, I have started digging into the GUI Editor a bit more for this GUI Adventure ‘challenge’.

In my opinion, the GUI Editor is a great and promising tool. However, in its current Beta state, I couldn’t help but notice that it still has a number of issues with potential fixes, ‘must have’ and ‘nice to have’ features.

I’ve opened a new thread to share my UX with the Editor.

Please feel free (and obliged) to add your comments to it about your own experience.
The way I see it, it’s also our responsibility to turn this promising tool into a great tool.
And, there’s no better time to do this than during this ‘GUI Adventure’ and whilst the tool is still in Beta.

I have broad expectations for this tool. If you also have, don’t wait and please share your knowledge and XP today.

1 Like

Hi @PirateJC

I’m trying to make an imaginary game GUI. (Font, sub-menu and so on are not made yet)

  1. At the end of the summer (date TBD) we’ll ask everyone to submit what they’ve created.

If date is fixed, I’m happy to know and accelerate my work :slight_smile:


No fixed date to announce yet, we’re giving people time to get their feet wet with GUI and GUI Editor.

1 Like

The Adventure continues. We he hope everyone is getting time to dive in and try to build their own GUI using either the GUI Editor or the GUI code!

Here’s a little WIP the team has been working on:

And the GUI Editor Snippet that goes along with it:

We can’t wait to see what you all are making! Show us your work!


Thanks for your reply!
I’ll proceed to make my work further!!

Dear fellow BJSers,
I wanted to just quickly share with you my progress (or absence of progress) competing for this ‘adventure’. Fact is I had no time to work on it until yesterday. So I guess the question is: How can I possibly produce something in the very little time that’s left?

In my ‘space museum’ scene in preparation, I had the stupid idea of creating 5 elevators leading to 3 floors each. As if this was not enough, the elevators lead to different floors and 1 also leads to a private area (the restaurant terrasse kitchen). What does this mean in terms of GUI? This means 5 elevator controls, 3 being different plus 21 outside controls (to call the elevators). You can only imagine what it is to create these with code.

So, here is where the GUI Editor steps in. Just starting yesterday morning for about 2 hours and continuying this morning for about 2 more hours, and then starting from nothing - not even knowing what they should look like - I managed to create the base for all of my 5 elevators using the GUI Editor. In fact, it took me only minutes to sketch the GUI and about an hour to improve the design just a little. The rest of the time I have spent on modelling and base texturing the box of the elevator control (because when I say I started with nothing, it means nothing :stuck_out_tongue:

So, my findings are that creating this sort of controls with the GUI Editor is a blessing and an enormous gain of time. I can sketch and build at the same time. If I want to do an update on just one or all controls it takes me just minutes (thanks to the copy/paste of parent with all children). Next updating all of my elevator controls in my scene only requires me to change one snippet link. Done!

With this, I can already say that my scene will sure have adt for mesh for all of my elevators (and probably doors as well). Next, if there is still time left, I will be able to work on my FS GUI and 3D GUI.
If you are like me, late in the process, and haven’t yet experienced the GUI Editor, I can only recommend to try it out. I admit it, I was reluctant to try; I waited until the beta; Didn’t think it would deliver but trust me when I say, it does :smiley:


The GUI Adventure keeps on progressing! We hope everyone is having a good time learning more about the GUI tools in Babylon.js!

Here’s what we’ve been up to:

And the GUI Editor Snippet:

Don’t forget! Up for grabs are 5 signed copies of the upcoming Babylon.js Book “Going the Distance with Babylon.js.” Courtesy of our very own celebrity author and world renowned Manatee philanthropist: @jelster It’s not too late to join the contest and start posting your progress!


You’re just testing to see if I’m paying attention, aren’t ya? :laughing:

1 Like

Step Brothers Yep GIF by reactionseditor

I’m relieved to hear that.
Currently I’m making a battle game title and character selecting GUI.

I’ll keep to proceed :slight_smile:


Thanks for showing your progress. It sure starts to look like a GUI :smiley:
Are you using the editor or code? Just out of curiosity.
I hope we will both have enough time to be able to feature something polished before the (unknown yet) deadline.
As for my project and progress, extending the campaign for another 3 months would be just perfect :stuck_out_tongue_winking_eye:. @PirateJC We could just call this extended version the ‘GUI Xmas Adventure’, yes? :face_with_hand_over_mouth: :grin:

1 Like

Thanks for your reply. As these screenshots show, both screen has been made by GUI Editor.
I know some unique usages of GUI Editor, but I want to try the next gen GUI creating system :slight_smile:

(The second one is hard to see because of white font color)

I hope we will both have enough time to be able to feature something polished before the (unknown yet) deadline.

It is good news for me because the screens are just under development.

1 Like

So this is it. With just a little bit more effort than expected (as always :grinning:) I now have 21 controls with ADT for mesh, all assigned to objects built from instances of an already cloned merged base and parented to my holders or elevators’ structure (which are also all instances of a merged clone). The elevator itself is an assembly of clones recycled from other parts of the structure with just 3 original meshes (the door, the footstep and the glass capsule). Of course each elevator is also an instance of elevator.

As for my GUI, thanks to the GUI Editor, I have all of my controls with 5 different types of layout and interactions for 1) operating the elevators, 2) calling the elevators and 3) operating doors, all in a single edit.

Currently, my ADTs for meshes are parsed from this single snippet or file. I can ‘ez as pie’ edit it and update for all at once. This is how I like it. Thank you BJS :smiley:

But then, now comes the best part (shhh, it’s a secret) :male_detective:: Thanks to @Deltakosh and @PatrickRyan sort of competing internally for this challenge as it seems :wink: :laughing: I will soon be able to replace my duplicates of ADT for mesh(es) by the ‘ADT.clone’ version. Yes, you did read correctly: It appears we will very soon be able to clone the advancedDynamicTexture. I cannot tell you how excited I am to try this out. :yum:

Warning for other members of the Community: Don’t even think of shortcutting me on this Premiere. I shall be the first one to feature this AMAZING new feature for the BJS GUI. I dare you, I double dare you :laughing:

Meanwhile, I’m gonna leave this base of ADT for meshes in my scene on the side for a while and start working on the next part of GUI I need: The 3D GUI which will be used to interact with things on display (that do not exist yet but doesn’t matter, I can still prepare the logic and design of my GUI for it).

Happy BJS GUI’ying everone and don’t worry, there are still 4 copies of the book awarded to winners left for Yours to grab :stuck_out_tongue_winking_eye: :rofl:


@Limes2018 - that’s looking like a mighty fine start!

Your continuing progress always impresses, @mawa!

I feel seen :sweat_smile::laughing::grin:

1 Like

Still working towards my GUI. Introduced the first parts of 3D GUI in the scene. I’m making only slow progress because there are just so many things missing in my scene that I can’t even figure the GUI and simply disregard the rest. Introduced a base of structure for the holder of my holo sphere (although the sphere itself will look nothing like this. It’s supposed to be a polysphere with lots of thumbnails and, upon selection, a slate (or plane with a behavior) should pop-out and display either an image or video.
Anyways, also introduced the base of my holo projection on the dome. Just a base, still needs a lot of work. Hope I will be able to continue with my GUI a little and share a link version before the time runs out.

What progress are you Guys doing?… I’m eager to see what Yours have been up to!

Happy GUI’ying Everyone. We’ll see us soon… :smiley:


Hey guys, just found out that this contest is still running. Let me share some Work In Progress before it ends.

I am having a lot of fun learning Babylon.js and Typescript, this is my first attempt using GUI lib (and babyonjs).

This is a CylinderPanel with 4 columns each of them is button3d with an image.


Oh, a 3D GUI, how nice :heart_eyes:. Incidentally, I am also working some more parts of my scene with the 3D GUI.

The 3D GUI is certainly the less worked from the BJS GUI offering as of today. I believe it deserves more interest from users to help improving it because I believe this GUI is a real fun base to explore further.

Please do not hesitate to share your experience, comments and feature requests. I.E: I find the handling of controls inside panels and the handling of materials within a single manager could may be do with some improvements to make it more ‘user friendly’. What are your thoughts?

Edit: Here’s for my upcoming progress with the 3D GUI. I will have some work of Arts you can interact with using the 3D GUI. You will be able to choose an Artist and scale-up a holographic projection of the artwork. All controls are parented to an anchor, all content is dynamic and this anchor shall be reassigned to the ~50 frames/artworks on display in the museum on the user click on the label below the picture. Understand that there will be of course only one 3D GUI set of controls of this type to interacts with all (instances of) frames and pictures in the scene. Currently still working towards both the logic and design but starting to build up not all too bad.