In same cases, UI elements require some kind of interaction with the player, and the next three recipes will teach you how to create interactive panels. In this recipe, you will learn how to make a panel draggable. For instance, the player will be able to move the panel all around the screen by dragging it. This is useful when we want to allow the player to organize his UI with his logic and order. In order to do this, we will use the Event Trigger (Script) component and develop a script to handle the interaction.
- To begin, we can create a panel by right-clicking on the Hierarchy panel and then on UI | Panel. We should also resize it so that we can see the entire panel on the screen.
- Now we need to create our script on the panel, so we click on Add Component | New Script, name it DraggablePanelScript, and then click on Create and Add.
- Double-click on the script to edit it. This time, we don't need to add the
using UnityEngine.UI;statement at the beginning of the script. - In the next step, we need to create just one public function. This will be called from the Event Trigger (Script) component that will be attached to the panel. In this function, we change the position of the transform where the script is attached to the mouse by calling
Input.mousePosition. Therefore, we can write this:public void OnDrag(){ transform.position = Input.mousePosition; } - Let's save the script and add an Event Trigger (Script) component to the panel. Click on Add Component | Event | Event Trigger.
- Then click on Add New Event Type | Drag. A new menu that is similar to the one in the previous recipes should appear in the Inspector. By clicking on the + sign in the bottom-right corner of the panel, we can add a new event.
- Furthermore, we need to drag DraggablePanelScript itself into the object variable. As result, the drop-down menu should now be enabled. Click on it and select DraggablePanelScript | OnDrag. In this way, when the player drags the panel, the
OnDrag()function from our script is called, and therefore the position of the panel will change. - Finally, we can press the play button and make sure that everything works as it should.
Each time the player drags the panel, Event Trigger (Script) calls our script, and it will change the position of the panel with the mouse. As a result, the panel will move according to the player's dragging.
In the following section, we can learn how to drag the panel only from a specific area.
We may want to allow the player to drag the panel from just some specific parts or areas of it — for instance, only at the top of the panel, where the name of the window is usually placed. In this context, the panel can be considered a window. Therefore, we need to create another game object, which will be our draggable area, and follow the steps in the How to do it... section. After we have completed this, we also need to modify the script. Instead of changing the position of the transform of the game object that is attached to the script, we move an arbitrary transform that we want — in this case the entire panel.
- We may want to give the player more power to structure his UI. So, we can make the panel not only draggable but also resizable. Therefore, we can include the technique that we will cover in the next recipe, Making a resizable panel, by providing the player with more options to customize his experience.