We will start by creating a clipped, draggable background, and then add linked scroll bars as shown in the following screenshot:
We want the player to be able to scroll on both axes. That means we need a background both larger and taller than the screen size. For this game, we will need quite a large environment to force him or her to scroll regularly. Let's create one that is twice the screen's size.
Perform the following steps to create the environment:
Viewport
.1920
x 1080
.10
. Over 10, the background will continue scrolling too much on release.1
, 1
, 0
} to enable X and Y scrolling.3840
, 2160
, 1
}.Now that our Draggable Panel is set up, let's add a tiling background as shown in the following screenshot:
Background
.0
, 40
, 40
, 255
}.0
.3840
x 2160
.Click on the play button. That's it, we now have a scrollable viewport. You can drag the background by dragging your mouse while clicking.
Let's add scroll bars to know where we are on the viewport. They must be on a separate panel rendered over our viewport, so that they won't move with the draggable background. Perform the following steps to add the scroll bars:
UI
.1
so that it can be displayed over the viewport.We have created both our horizontal and vertical scroll bars at the center of the scene as shown in the following screenshot:
Now, we need to place them correctly and adjust their size to fit the entire screen.
VerticalScrollbar
.-11
, 0
}.130
, 255
, 245
, 110
}.0
, -540
, 0
}.22
, 1080
, 0
}.1
, 0.983
} in order to leave space for our horizontal scroll bar at the bottom of the screen.0
, 255
, 128
, 255
}.Our vertical scroll bar is configured. Let's do the same for the horizontal scroll bar.
HorizontalScrollbar
.0
, 11
}.130
, 255
, 245
, 110
}.960
, 0
, 0
}.1920
, 22
, 0
}.0
, 255
, 128
, 255
}.Good. Both our horizontal and vertical scroll bars are set up. Now, we need to assign them to our scrollable viewport by performing the following steps:
Click on the play button. That's it. Our scroll bars can be used to scroll, and they indicate where we are on the viewport as we scroll. Your hierarchy should be as shown in the following screenshot:
Now, let's add keyboard scrolling.
For this game, scrolling with the keyboard is important. In order to do so, we will create a custom script that will force our scroll bars to move depending on the pressed key. Select our Viewport GameObject, and attach a new KeyboardScroll.cs
script to it. Open this new script, and declare the required variables and the Awake()
method:
//We need the Scrollbars for keyboard scroll UIScrollBar hScrollbar; UIScrollBar vScrollbar; public float keyboardSensitivity = 1; void Awake() { //Assign both scrollbars on Awake hScrollbar = GetComponent<UIDraggablePanel>().horizontalScrollBar; vScrollbar = GetComponent<UIDraggablePanel>().verticalScrollBar; }
Okay, we have both of our scroll bars on Awake()
, and a float value for sensitivity.
Now, let's check the horizontal and vertical input axes at each frame, and change our scroll bars' values consequently:
void Update() { //Get keyboard input axes values Vector2 keyDelta = Vector2.zero; keyDelta.Set(Input.GetAxis("Horizontal"), Input.GetAxis("Vertical")); //If no keyboard arrow is pressed, leave if(keyDelta == Vector2.zero) return; //Make it framerate independent and multiply by sensitivity keyDelta *= Time.deltaTime * keyboardSensitivity; //Scroll by adjusting scrollbars' values hScrollbar.value += keyDelta.x; vScrollbar.value -= keyDelta.y; }
Save the script and click on the play button. You can now scroll using the keyboard arrows. You may also adjust the Sensitivity parameter in the Inspector window as you see fit.
Now, it's time to create draggable barriers that we can drop inside our Viewport GameObject.
18.227.72.212