Hello Creators,
We are excited to announce the Studio-only beta release of UIDragDetectors, a new instance type designed to make interacting with UI elements easy! Similar to DragDetectors, UIDragDetectors are designed to make dragging behaviors and interactions easy for developers of all skill levels, but for 2D UI instead of 3D objects. They can be used to instantly inject 2D dragging behaviors under both ScreenGui and SurfaceGui instances, allowing you to make elements like sliders and spinners with little to no code.
This feature is currently enabled in Studio for all users, and we are targeting enabling it on client in a couple weeks’ time.
No scripting is required to make UI elements draggable; properties let you define how UIDragDetectors respond to interactions. However, scripting can unlock more advanced features, such as constraints, custom drag styles, or how your game responds when UI is dragged.
Examples of UIDragDetectors being used in SurfaceGuis to interact with 3D objects
How to use UIDragDetectors
To use UIDragDetectors, you will first need to enable the beta. To do that, go to File > Beta Features, then enable the UIDragDetectors Beta Feature.
To get started, add a UIDragDetector under any GuiObject instance, like a Frame. Hit Play and you will be able to interact with the Frame! In addition, you can move the Frame without hitting Play if there are no dragger tools (such as Select, Move, Scale, or Rotate) or plugins (such as the UIEditor) active.
You can also customize UIDragDetectors through properties. Below you’ll find detailed documentation and a couple examples.
- DragStyle - choose between different kinds of dragging behaviors.
- ResponseStyle - choose whether to drag in Offset or Scale, and whether you want the computed drag to be applied to the UI element or not
- Axis/Movement Limits
-
BoundingUI - designate another
GuiBase2dorGuiObjectinstance to define the boundary of the drag -
ReferenceUIInstance - designate another
GuiObjectinstance to change the reference frame of some drag behaviors and properties.
Additionally, event connections and methods can be used to customize UIDragDetector behavior and perform game logic.
For more information, read through our API Documentation and Guide.
Examples
Adding a basic UIDragDetector
It only takes a couple steps to create a draggable UI element with UIDragDetectors:
- Create a ScreenGui under StarterGui
- Add a GuiObject like a Frame as its child
- Add a UIDragDetector to the GuiObject
- Hit Play.
- Drag the GuiObject to move it in the screen plane.
You can also drag it in edit mode if you turn off the Dragger Tools.
Playing with DragStyle
DragStyle changes how you translate or rotate when you click and drag.
- Create a draggable UI element like you did in Example # 1.
- Change DragStyle of the UIDragDetector to TranslateLine.
- Hit Play.
- Drag the GuiObject to move it in the screen plane.
- You will only be able to drag in the X-axis!
- A property called DragAxis will show, which controls the axis in which the UIDragDetector drags in for the TranslateLine DragStyle.
Try playing with the Rotate DragStyle, too! For the Scriptable DragStyle, refer to the API documentation and Guide for details on how it works.
Try it out in our TestWorld
You can find all of the demos in the GIFs above, and many others, in our UIDragDetector TestWorld that is free to download, inspect, alter, copy, and reuse as you like! Click here, click ‘…’ near the title, then Edit to open them in Roblox Studio, then File → Download to save your own copy.
The world consists of both ScreenGui and SurfaceGui examples, showing you how to take advantage of all the properties and scripting options.
- To interact with the ScreenGui examples, press Play and navigate to examples through the menu on the right.
- You can change the Enabled property on the corresponding ScreenGui instances to test them out in Edit mode!
- For the SurfaceGui examples, press Play and walk over to the examples to interact with them. It is possible to drag these elements in edit mode, but relevant scripts will not run. You can also copy the contents of the SurfaceGui examples onto a ScreenGui to see them in the screen plane– they will work just the same.
Check it out in UIDragDetectors Testing Examples.
Known issues
Since this is still in beta, you may run into some issues when working with UIDragDetectors. Here are some common bugs that we are currently in the process of squashing:
- Bounding issues may exist with UIDragDetectors that have a DragStyle of Rotate, a ReferenceUIInstance set, and a rotated BoundingUI set.
- Changing the DragRotation property of a UIDragDetector with a defined ReferenceUIInstance performs a relative rotation, not a rotation to the absolute value; so if the current value is 9 and the new value is 10, the result will be a rotation of 19, although it should be 10.
- Some GuiObject events, such as MouseEnter and MouseLeave, won’t fire properly during a UIDragDetector drag.
- The UIDragDetector hover cursor may not change correctly when moving over overlapping GuiObjects with different UIDragDetectors.
What’s next?
There are a couple features that we’d like to add before exiting beta! These include, but are not limited to:
- Having a clearly defined behavior for dragging GuiObjects influenced by UILayouts
- Possible support for BillboardGui
We’ll update you once these features are available in the beta.
Finally, I’d like to thank @PrinceTybalt, @PolarPorcupine, @rbx_dert, @IgnisRBX, @bluff_006, @frecklesnspectacles, members of the UI team, our QA team, and everyone throughout Roblox that helped shape and bring this feature to work in the Roblox ecosystem.
Thank you!
