Sometimes, UI elements require some kind of interaction with the player. This recipe, along with the previous and the following ones, will teach you how to create interactive panels. Furthermore, we will see how to make a panel resizable. For instance, the player will be able to resize the panel by dragging one of its corners. This is useful when the UI is full of panels and windows and we want to let the player choose their dimension to suit his needs. To do this, we will use the Event Trigger (Script) component and develop a script to handle the interaction.
- First, we can create a panel by right-clicking on the Hierarchy panel and then clicking on the UI | Panel. Rename it to ResizablePanel. We should also resize it so that we can see the entire panel on the screen.
- We need to create another panel inside the first one. To do this, right-click on ResizablePanel in the Hierarchy panel and then choose UI | Panel. We should rename it as ResizeArea in order to reduce confusion. Finally, place it in the bottom-right corner of the first panel, in this way:
- Now we have to change Anchor of ResizeArea. To do this, select Anchor. Then, in the Inspector, click on the icon with two squares and four blue arrows inside. Now, a drop-down menu should appear, with Anchor Presets. Let's select the bottom-right one. After doing this, you should see what is shown in the following screenshot:
- Now, we need to create our script on ResizablePanel. Therefore, click on Add Component | New Script and name it ResizablePanelScript. Then click on Create and Add.
- Double-click on the script in order to edit it. As usual, we need to add the
using UnityEngine.UI;statement at the beginning of the script. - Before we add functions, we need three private variables. Two of them are
Vector2, respectively, for keeping track of the original mouse position and the originalDeltaSizeofRectTransformwhen the player begins resizing. The third one is aRectTransform, so we can get access to theRectTranformofResizablePanel. Therefore, we can write the following lines:Vector2 initialMousePos; Vector2 initialDeltaSize; RectTransform rectTransform;
- In the
Start()function, we assign theRectTransformcomponent, attached to the same game object of this script, to therectTransformvariable. We can do this by writing these lines:void Start () { rectTransform = (RectTransform)this.transform; } - Then we have to write a function that will be called every time the player starts resizing the panel. We will call this function
onDragBegins()because in order to resize, we will be draggingResizeArea. Here, we just assign the initial start position of the mouse toinitialMousePosand the currentdeltaSizetoinitialDeltaSize:public void onDragBegins(){ initialMousePos = Input.mousePosition; initialDeltaSize = rectTransform.sizeDelta; } - The next step is to have a function that is called during the dragging of
ResizeArea; means resizing the panel according to how the player moves the mouse. Therefore, we need to create a function calledOnDrag, which will look like this:public void OnDrag(){ Vector2 temp = (Vector2)initialMousePos - (Vector2)Input.mousePosition; temp = new Vector2 (-temp.x, temp.y); temp += initialDeltaSize; rectTransform.sizeDelta = temp; } - Save the script and select ResizeArea from the Hierarchy panel. Then, in the Inspector, click on Add Component | Event | Event Trigger.
- Now we have to add two event types. To add the first, click on Add New Event Type | BeginDrag. Then, click on the + sign in the bottom-right corner of the panel to add a new event. Next, we have to drag ResizablePanel itself into the object variable. Subsequently, the drop-down menu should be enabled. Hence, click on it and select ResizablePanelScript | onDragBegins. As a result, when the player starts to drag ResizeArea, the
OnDragBegins()function from our script is called. - To add the second event, click on Add New Event Type | Drag. Then click on the + sign in the bottom-right corner of the panel to add a new event. Again, we have to drag ResizablePanel itself into the object variable. From the drop-down menu, select ResizablePanelScript | onDrag. As a result, when the player drags ResizeArea, the
OnDrag()function from our script is called. - Finally, we can check whether everything works as it should by clicking on the play button.
Each time the player drags Resize Area, Event Trigger (Script) calls our script. In particular, two functions are called: the OnDragBegins() function, in which we initialize our variables, and the OnDrag() function. In the latter, we first create a temporary variable that stores the difference of initialMousePos and the current mouse position, Input.mousePosition. This means the distance between where the player started to drag and the current mouse position. Since in this case the difference between vectors is ambiguous, we need to make an explicit cast. Then, we have to invert the x coordinate of the temporary vector if we want to resize the panel coherently. Finally, after adding the initialDeltaSize to our new vector, we assign it as the new sizeDelta of rectTransform.
- Keep in mind that rarely, and only in specific designs, can the player resize a panel without moving it around. Therefore, if this is not our design, we should integrate the resizable panel with what we have covered in a previous recipe, Making a draggable panel, to create a more immersive, interactive menu.