Let’s Create a Scrolling Panel

Jordan Evans
Nov 17, 2021 · 3 min read

Before we get into linking our panels together, let’s take a quick look at how we can go about creating a panel that will allow us to scroll up to see more information:

As we can see with the current panel, if we want to scroll up, there are a few things we need to fix. First, we need to actually put in place a scroll method, not just us moving it on our own from the scene view:

In order for this to work a little easier to start, we are going to build all of this with the program running. This will allow us to utilize the scroll option on our actual game view and not have to keep rotating between different objects in the hierarchy. Once we have created our scroll view, we will want to attach the panel we want to scroll to the scroll rect and see if it works as we would want:

By moving our panel into the viewport, we are able to create a dead zone at the bottom of the screen for a back button that we would want to put in place.

After we make any additional changes that we need within our game view, we will need to save these changes, as once we stop the game, all changes in the hierarchy are reverted. To do this, we are just going to move our canvas down to the project folder and turn it into a prefab. Once we stop the game, the canvas will revert back to it’s original view:

Once we delete our old canvas and drag in the prefab, we will want to delete that prefab. When that happens, we will want to unpack our prefab on the hierarchy so that it isn’t considered a prefab object anymore. With that fixed up, we can keep working within our scene view on the further changes, and to check them we can simply change the value of our scroll rect in the hierarchy to move our view about:

In order to have our background stay on the whole panel, and not just the viewport, we will want to remove the background image from the viewport and insert it into a new empty object that will house all of the pieces to this panel. We can then go about creating a button for the empty space at the bottom as well:

Now that we have figured our how to create a scroll panel, we will look at how we can create the ability to add pictures along with integrating gps location marking and then linking them all together through code so we can access the panels we want to.

Nerd For Tech

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Jordan Evans

Written by

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.