Now that we have clicking working, let's add the ability to increase our cash per second or the amount we get per click!
ShopPanel
. Change the values of Left, Right, Top, and Bottom to 150
.ShopPanel
object from the Hierarchy and then create an Image object by going to GameObject | UI | Image.Image
object to ShopElements
. Open up the Anchor Presets menu and hold down Alt + Shift and then click on the top-stretch option on the bottom right:Content Size Fitter
by typing in the name to filter through all of the components until you see it. Under the newly created component, change the Vertical Fit to Preferred Size
to make it change its size based on the eventual children we will be creating:ShopElements
object until we have it finished. The reason for this is that we don't want the fitter component to modify things until we are done with it. Right-click on the ShopPanel
object and select GameObject | UI | Button.Button
text object and change the Font Size to 50
.ShopElements
object. To do that, drag and drop the Button
object on top of the ShopElements
object to make it a child.ShopElements
object from the Hierarchy tab and add a Vertical Layout Group component to it (do a search like before):20
as well as Spacing to 20
as well. This will give some much needed space between each of the objects we place as well as move them away from the center of their parent.ShopElements
object and then under the Image component's Color property, change Alpha to 0
.We will be customizing the functionality of these buttons later on, but right now I want to point out as we keep adding new buttons to the list, it will be added to the bottom of the object, which is great but if we add too many:
As you can see, it goes off the screen. To avoid this, we will make use of the ScrollView
component:
ShopPanel
object and then add a Mask component to it:As you can see, this cuts off the contents of all of its children to fit within the Panel's image.
ShopPanel
object and add a ScrollRect component to it. Connect the Content component to the ShopElements
object. We want it to just move vertically so uncheck the Horizontal option and change Movement Type to Clamped
. To make it easier to scroll with the mouse's scrollwheel, change Scroll Sensitivity to 50
:We can now scroll down the buttons by either clicking and dragging or using the mouse wheel, but we can make it easier to see by using a Scrollbar.
Canvas
object and select GameObject | UI | Scrollbar. Under the Scrollbar component, change the Direction to Bottom to Top
. Then to make it easier to work with, change the Anchor Preset to stretch-right and change the Scale X to 2
. Then, move it over to the right of the window:ShopPanel
object and then from Vertical Scrollbar, assign the newly created Scrollbar
object:ShopMenu
and then drag and drop the ShopPanel
and Scrollbar
objects on top of it to become children. Finally, from the top of the Inspector tab, uncheck the ShopMenu
object to easily hide the menu options: