Introducing the Babylon.js GUI Editor (Alpha)
Well.. It’s been a long time coming and yet I remember it like it was yesterday — when the idea for a GUI Editor for Babylon first popped into our heads. After a lot of blood, sweat and tears, the time has come for us to invite our incredible community into the process with us.
I’m very happy and humbly honored to present the Alpha public release of the Babylon.js GUI Editor! https://gui.babylonjs.com/
“GUI Made Simple”
One of our main goals with the Babylon Platform is to make one of the most simplest rendering engine on the web. How can we expand our reach to new developers? How do we make it more simple for our existing community? We are constantly aiming to improve this experience. Why should GUI be any different? And with this motivation driving us, the idea for the GUI Editor was born.
“GUI made simple”, that’s really the headline I’ve been using for this project. How can we take a feature of Babylon.js that has a lot of complexity to it and make it more accessible to developers. Many Babylon developers aren’t even aware of the platform’s GUI system, let alone how powerful in can be. When it came to creating the GUI Editor we wanted to create a tool that would be useable for all skill levels in development. Both as a way of simplifying the development process for coders and as a visual tool for people who don’t code at all. At the proverbial 100k ft. vantage point, the GUI Editor is an incredibly simple tool to help developers generate GUIs in Babylon. However it doesn’t stop there. The GUI Editor simplifies this process by replacing the process of writing GUI code, with a simple WYSIWYG (What You See Is What You Get) interface. With all of that in mind, lets hop right into the details of this wonderful new tool. Welcome to the GUI Editor!
Responsive Layouts
Pick either a responsive layout and choose from various popular sizes OR create your AdvancedDynamicTexture to the exact pixel value for your project. A responsive layout will resize the UI layout and reflow controls to accommodate different device screen sizes. Whether it be a GUI for mobile or desktop, responsive layout mode will auto-complete the project properties to work in percentages rather than pixels.
Create and Drag controls
Choose from over 14 different Controls from the Babylon GUI. Adding them is very simple: Just click! From buttons, to sliders, to grids, and even lines, pick the perfects controls for your GUI. Click on them in your canvas with the selection tool and then use the move tool to drag them around. You can even multi-select multiple GUI controls by holding the Ctrl key and clicking on any that you like.
Modify and Customize
Head on over to the Properties Panel to customize a control to your liking. Here you’ll find access to the full set of customizable properties and capabilities of the Babylon’s powerful GUI system. Move it, scale it, rotate it. Change the color, outline, border, and much more! The property tabs will also control specific properties depending on the control that’s selected. Happy with what you’ve created? Want another copy? That’s easy! Duplicate any control you’ve created and reuse it, or edit it even further!
The Layers Panel and Parenting
Similar to the inspector, the GUI editor also has a layers panel. Think of this like a scene explorer with an upgrade. In this panel, you can click and drag controls up and down in the list to change the render order. But wait there's more…when dragging a control in the layers panel, we can hover over a container control and then release the mouse button to parent our currently selected item into it. Perfect for grids, buttons, and more. You can even reorder the elements inside those containers.
Save, Load, and Reuse
So now you spent all this time creating and playing with the GUI editor. You’ve made your perfect layout and now want to save it for later. Not a problem! Just like every Babylon tool, you can choose to either save your progress locally to a .json object, or save it to the Babylon snippet server. When you’re ready to pick up where you left off, just hit one of the load buttons to jump back in.
The Power of GUI and the Playground
No matter where you’ve saved your progress, you can easily load your creation directly into your Babylon scene. This is definitely one of the coolest and most helpful features of the GUI system! Let’s go to the playground to see an example of loading in a GUI Editor created GUI directly from the Babylon snippet server. With a few keystrokes (ctrl+space to access playground templates) and a simple copy of your snippet ID and “BOOM” it’s loaded right into your scene. It’s that easy.
https://playground.babylonjs.com/#YXSQG8
GUIs that you’ve created in the GUI Editor can be loaded into your Babylon scene in two ways, as a fullscreen GUI, OR as a texture that can be projected onto a mesh. With proper management of your UVs, and a few lines of code, a GUI from the GUI Editor can be loaded right onto a mesh, including user interaction!
Since the GUI Editor sits on top of Babylon’s powerful GUI system, when you load a GUI Editor created GUI into your scene, you can easily access every property from your scene code. Want to add custom interactions and animations to your GUI? Easy! Just access a control by name and you’re off to the races. Check out these examples:
https://playground.babylonjs.com/#JSF3QM
https://playground.babylonjs.com/#5JEP1H
More On the Way
Wow, that’s a lot right? That’s about it for a summary of the GUI Editor for now. Of course this is just an alpha release with MUCH more in store for the future. As we march towards a beta version, you’ll find additional features coming online, such as a scaling gizmo and color picker as well as UX improvements. In the meantime we wanted to get this editor into your hands, our awesome community! And most importantly…
We Want Your Feedback! ❤
We need your help. This is an early version of the GUI Editor. We want your input, your suggestions, your insights, and desires. We want to know what you think about it! What do you like? What do you think can be improved? Please give it a try and give us your thoughts. Oh and don’t forget to share what you make with it! We can’t wait to see your awesome creations.
Personally it’s been quite the humbling experience bringing this tool to life, watching the development team play around with the editor and make fun little demos. It’s been even more touching to see the love and support on social media throughout the journey of bringing the GUI Editor to this moment, where we can share it all with you. Thank you so much for taking the time to help us make this platform even more powerful, beautiful, and simple than it is today.
Until next time,
Pamela Wolf — Babylon.js Team
https://twitter.com/ms_Destiny14
Click here to check out the forums and give feedback:
https://forum.babylonjs.com/t/introducing-the-gui-editor-alpha/24578
Click here to learn more about the GUI Editor:
