Mobile Game Progression
Adding scrollable UI to the store
Another feature that is on the list to add for our game is to have the store sell more items such as potions to heal our player. Since our UI window for the current store layout is limited to only show 3 items a once, we need to incorporate the ability to scroll up and down to show more items on a list.
Understanding the UI scrollable panel:
In order to create the scrollable content, we first must understand how the scroll function is going to work. The scrollable content is first place within a folder that contains everything. Then we have the mask layer which the scrollable content is within. This Mask layer is what keeps the items inside the bounding area and not bleed outside it. Finally we would have the Scroll Panel which is the object which contains the mask layer and also the scrollable content.
Creating the UI Scrollable:
Start by having all your content that is going to be displayed within the store placed under one empty game object. Then within that empty game object that houses everything we are going to add the Vertical Layout Group component and also Content Size Fitter component. The Vertical Layout Group basically sets up the content inside in a orderly fashion, keeping everything restrained an within a preset grid. The Content Size Fitter is an component that makes the content housing be flexible and be able to adjust extra content if they were added in.
Next we will need to mask the content that is outside of the shop window. The Mask component is going to be added within the game object above the content housing. Make sure that the Image component is the same size as the shop window, this will control where the content cuts off.
Additionally make sure that the “Maskable” option is checked on and the Transparency of the Color should be set to 1. (setting the transparency to 0 would result in having everything disappear)
Finally for the Parent object of the entire scrollable panel, we are going to add the Scroll Rect Component which makes all the magic happen.
Within the Scroll Rect Component, we are going to draw in the Content game object (aka. the object that houses all our store items) into the Scroll Rect Content slot. Since we are going for a Vertical scrolling menu, we can uncheck the Horizontal checkbox.
The movement Type, I stuck with Elastic since it gives a nice bouncy animation when you have reached the end of the scroll. But you can play around with whatever suits your needs. Finally within the Viewport slot we are going to drag in the View/Mask.
Now when you test out the shop, you will see that everything should work shown below.
And Thanks to the Content Size Fitter component we added before, if your shop suddenly is scripted to handle more objects, it will automatically adjust to the appropriate size and formation.
