Hey developers,

We are happy to introduce the newest feature to your development resources: Lua Widgets for Plugins. Previously, if a plugin had any UI elements, those had to be rendered in the 3d viewport. Now, using Lua Widgets developers can optimize their Studio experience with dockable Lua widgets, separate from the Studio viewport.

Here is a GIF which showcases the new functionality by using terrain tools as an example. Terrain tools are now accessible from the home and view tab.

https://giant.gfycat.com/RepentantOrnateAmericanrobin.webm

Shared Lua Libraries for Consistent Studio Look & Feel

To help you use the PluginGui for your Lua widgets, we have created some code to create various GUI elements: buttons, checkboxes, radio buttons, etc. This code also includes common colors, sizes, spacing, etc. These widgets were used to make the new Terrain Tools, which are now hosted in a PluginGui.

The code is available on github:

GitHub Roblox/StudioWidgets Contribute to Roblox/StudioWidgets development by creating an account on GitHub.

Please keep the following in mind when using the new Lua Widgets:

Lua Widgets cannot be created by Hotswap and similar plugin virtualization at the moment (https://www.roblox.com/library/184216383/HotSwap-v1-1)

Lua Widgets have separate instances for “Edit” and “Play” mode

From Studio code Point Of View, there’s two completely different DataModels: one when you’re editing, and then a copy of that when you’re running.

Since Plugins (and therefore PluginGui and all contained GUI buttons, text labels, etc) all live in data model, it made sense to just keep that clean division.

There are two completely separate Dock widgets associated with any plugin that creates a PluginGui.

The “Edit” Dock widget exists/is available when editing, and the “Play” dock widget exists/is available when playing. The two widgets are unrelated: you may have toggled the “Edit” one to be visible, but the “Play” one will still be not-visible: you may have dragged the Edit one to dock on right side of screen while Play one docks on bottom, etc.

From Studio code Point Of View, there’s two completely different DataModels: one when you’re editing, and then a copy of that when you’re running. Since Plugins (and therefore PluginGui and all contained GUI buttons, text labels, etc) all live in data model, it made sense to just keep that clean division. There are two completely separate Dock widgets associated with any plugin that creates a PluginGui. The “Edit” Dock widget exists/is available when editing, and the “Play” dock widget exists/is available when playing. The two widgets are unrelated: you may have toggled the “Edit” one to be visible, but the “Play” one will still be not-visible: you may have dragged the Edit one to dock on right side of screen while Play one docks on bottom, etc. Lua Widgets don’t support UserInputService. You will need to listen to button and textbox events.

For debugging purposes, you can enable “Show Plugin GUI Service in Explorer” in Studio settings to modify the GUI in the explorer instead of just through scripts.

Check our documentation on the Developer Portal for more information:

Thanks,

The Roblox Team