Dragging elements can be very useful and intuitive. That's where the UIDragObject
component comes in handy.
UIDragObject easily makes any UI element or other GameObject in the scene draggable with both mouse and touch.
Just like all NGUI interactive components, it requires a collider to detect the mouse or touches. That collider defines the area in which the player must click to start the drag.
Let's add the
UIDragObject
and Box Collider
components to our two windows. In Hierarchy, select both our UI Root
| Main
and Options
GameObjects, and then:
object
with your keyboard to search for components with that word.box
with your keyboard to search for components with that word.OK, we've just added the UIDragObject
and Box Collider
components to our main menu and options windows. First, let's configure Box Collider
so that the area initiating the window drag corresponds to the title bar.
With both Main
and Options
GameObjects selected, set the following parameters:
OK, the colliders are configured to fit the title bar for both windows. Let's see what the UIDragObject
parameters are.
Now added to our windows, the UIDrag Object component has six parameters, as follows:
None
: No effect, simple, and rough drag.Momentum
: The object is subject to inertia and decelerates smoothly when it's dropped. It cannot go outside its container.Momentum and Spring
: When the window is dropped outside the screen or container it is constrained in, it will return smoothly within its authorized area.Size
defined to define the dragged object's bounds. If this parameter is left to None (UI Rect), the dragged object will be constrained to remain onscreen.UIPanel
should have clipping enabled or set to Constrain But Dont Clip
.Now, let's configure them to enable drag on both windows.
Let's configure our UIDrag Object
components to enable drag on our windows:
Main
GameObject. For its attached UIDrag Object
:Main
GameObject) inside the Target fieldOptions
GameObject. For its attached UIDrag Object
:Options
GameObject) inside the Target fieldHit Unity's play button. You can now drag both windows by clicking on their title! We have checked Keep Visible and left its Content Rect to None, so when you drop the window out of the screen, it smoothly comes back.
We have a slight glitch right now. If you drag-and-drop the window far from the center and hit the options button, you'll see that our main menu jumps to the center of the screen. That's because the tween's From position is always set to {0, 0, 0}.
To resolve that issue, we simply have to update the From position to be the same as the window's current position.
The Tween Position
component has a SetStartToCurrentValue()
method that we can call when the appropriate buttons are clicked.
Select our UI Root
| Main
| Buttons
| Options
GameObject, and configure the On Click event for its attached UIButton
component, as follows:
UI Root
| Main
GameObject in the Notify field.Let's do the same for our options' Confirm
button, but this time updating the tween's end instead of the start position:
Select the Options
| Confirm
button. For On Click
of UIButton
event:
UI Root
| Options
GameObject in the Notify field.Hit Unity's play button. Now, both windows' positions are updated before the tween's start, making them stay where the player moved them as if they were saved. Great!
Now, let's move on to see how we can create scrollable text.
18.118.31.67