We will now learn how to turn our menu into a draggable window. Let's add the correct component to it and study its parameters, which are as follows:
- Select the Panel GameObject.
- Rename it as
MainMenu. - Attach the Draggable Panel component to it by navigating to Component | NGUI | Interaction.
The MainMenu GameObject now has a UIDraggable Panel component attached to it.
The following are the 13 parameters for setting values in the UIDraggable Panel:
- Drag Effect: This is the effect used while dragging the panel to have a smoother drag.
- Restrict Within Panel: This uses the parent panel to restrain the draggable panel within its clipping bounds.
- Disable Drag If Fits: If the content fits the parent panel's clipping bounds, dragging will be disabled.
- Smooth Drag Start: This avoids a "jump" effect on drag start.
- Reposition Clipping: This repositions the Clipping to the Top Left Corner immediately.
- IOS Drag Emulation: Dragging movement speed is reduced when overpassing the clipping edges.
- Scroll Wheel Factor: If you want the scroll wheel to drag the panel on the y axis, set this value to greater than 0.
- Momentum Amount: This is the effect applied when the panel is dropped. The panel will keep moving after releasing the scroll wheel.
- Horizontal Scroll Bar: This lets you drag a scroll bar to define it as the panel's horizontal scroll bar.
- Vertical Scroll Bar: This lets you drag another scroll bar to define it as the panel's vertical scroll bar.
- Show Scroll Bars: This allows you to show scroll bars always, show them only if necessary, or show them while dragging.
- Scale: This defines which axis the panel should drag on:
0means no dragging,1allows full dragging on this axis. - Relative Position On Reset: This is the offset relative to the mouse's position. It is useful if you want an offset from the mouse's position while dragging.
Now that we have seen the component's parameters, let's use them to drag our main menu.
We have added the UIDraggable Panel component that sets this UIPanel as a Draggable Panel. Now, we must mark our MainMenu as the GameObject that holds the draggable content.
We will also add a Box Collider component to define where the user must click to drag the panel:
- Select our MainMenu GameObject and perform the following steps:
- Set the Clipping parameter of UIPanel to Alpha Clip.
- Set the Size field in Clipping to
1920x1080. - Uncheck the IOS Drag Emulation Boolean.
- Add the Drag Panel Contents component to it.
- Add the Box Collider component to it and perform the following steps:
- Check the Is Trigger Boolean—we don't need collisions, just a trigger to receive Raycasts from the UICamera.
- Set its Center coordinates to {
0,395,0}. - Set its Size coordinates to {
1300,62,1}.
Click on the play button. By clicking on the window's title, you can drag the main menu. But still, it isn't configured correctly; you can only move it on the x axis.
Let's change an important parameter of the UIDraggable Panel component of MainMenu to allow dragging on the x axis by performing the following steps:
- Select our MainMenu GameObject.
- Set Scale in UIDraggable Panel to {
1,1,0}.
And that's it! Our MainMenu is now draggable on both the axes. If you drag it outside the screen, it will move back inside when dropped. We had to define a clipping of the screen's size for this Restrict Within Panel function to work.