Making an image scrollable

Many fantasy games have huge worlds, along with very large maps, so in order to show them in the UI, they are usually scrollable. This allows the player to explore the map in sections without showing it entirely at once.

This recipe explains how to achieve this using the Mask (Script) component, which we have already used in the previous recipe, and the Scroll Rect (Script) component. The latter will handle the logic that will allow the UI elements to be scrollable.

How to do it...

1. So that we don't have to start over again, we can use the mask that we created in the previous recipe. In fact, we can change what we have done there to achieve this scrollable effect.
2. To begin, we need to add the Scroll Rect (Script) component to the panel.
3. Keeping the panel selected, drag the image that is parented to the panel into the Content variable inside Scroll Rect (Script).
4. By default, the image is set to have an elastic effect, which, in most cases, is quite nice. However, since we are using a circle instead of a rectangle, it is better that the image doesn't go out of the circle. This is because the image may appear distorted and affect the overall aesthetic experience, which may even prove to be uncomfortable to the player. Therefore, to solve this, change Movement Type to Clamped.
5. Finally, it is possible to modify the effect to better suit our needs by changing Deceleration Rate and Scroll Sensitivity. Thus, take time to test which values are best for you.
6. Once you have finished altering the values, your Inspector should look similar to this:
   

How it works...

First of all, we took the previous image, which is already masked. In fact, scrollable images are often used along with masks. This is because masks allow us to focus on specific locations within large images or text without overwhelming the player, as well as allow larger objects to feature within the UI in more compact ways. Once we had taken the outcome from the previous recipe, we then added a Scroll Rect (Script) component to the parent of our image. This component does the work, and it can be controlled by several options or parameters.

For example, we can change the Movement Type variable. Clamped is where the content is confined to the Scroll Rect bounds, Elastic means the content bounds when it reaches the edge, and Unrestricted means that there are no limitations. In addition to this, we can tweak Deceleration Rate, but only if Inertia is checked. This determines how much time it takes for the content to come to a complete stop. At a rate of 0, the movement will stop immediately, whereas at a rate of 1, it will never slow down. Among the most important parameters of this component is Scroll Sensitivity. This is, as the name suggests, the sensitivity when the content is scrolled.

See also

• It's always good to refer to the official Unity documentation if you are looking for more information. Besides the previous recipe, you can find more about masks at http://docs.unity3d.com/Manual/script-Mask.html.
• And you can follow the learn about the Scroll Rect (Script) component: