Creating a shop

Now that we have clicking working, let's add the ability to increase our cash per second or the amount we get per click!

  1. Start off by going to GameObject | UI | Panel and then rename the object to ShopPanel. Change the values of Left, Right, Top, and Bottom to 150.
  2. Now we need to create a holder for all of our buttons. Select the ShopPanel object from the Hierarchy and then create an Image object by going to GameObject | UI | Image.

    Note

    Note that because we had the ShopPanel object selected, it automatically knew that we wanted the image object to be a child of the ShopPanel object.

  3. Then, rename this new 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:
    Creating a shop
  4. Next, we will create a new component on this object to resize as needed, based on the size of our buttons. To do this, go to Add Component and search for 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:
    Creating a shop
  5. Now we will create our first button outside of the 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.
  6. From the Scene tab, change to the Rect tool (press R or press on the button on the top left of the screen) and then hold down Alt keys and drag from one of the edges of the button to have it resize to whatever height and width you'd like the buttons to be:
    Creating a shop
  7. The text is a little difficult to read, so open up the Button text object and change the Font Size to 50.
  8. Go back to the Button object and add a LayoutElement component, check the Preferred Height property, and check Flexible Width to let it know that we can modify how wide the button is but we prefer it to be where we have it currently:
    Creating a shop
  9. We now have our base object created, so now it's time to make it possible to create many of them and work with our ShopElements object. To do that, drag and drop the Button object on top of the ShopElements object to make it a child.
  10. Then, select the ShopElements object from the Hierarchy tab and add a Vertical Layout Group component to it (do a search like before):
    Creating a shop
  11. Next go to the Vertical Layout Group component and extend the Padding property. From there, change Left, Right, Top, and Bottom to 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.
  12. Let's get rid of the white image blocking the panel from being seen. To do this, select the 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:

Creating a shop

Making the list scrollable with ScrollView

As you can see, it goes off the screen. To avoid this, we will make use of the ScrollView component:

  1. Go back to the ShopPanel object and then add a Mask component to it:
    Making the list scrollable with ScrollView

    As you can see, this cuts off the contents of all of its children to fit within the Panel's image.

  2. Select the 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:
    Making the list scrollable with ScrollView

    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.

  3. Right-click on the 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:
    Making the list scrollable with ScrollView
  4. Select the ShopPanel object and then from Vertical Scrollbar, assign the newly created Scrollbar object:
    Making the list scrollable with ScrollView
  5. Now, let's create an empty game object to hold the entire menu. To do this, right-click on the Canvas object and select Create Empty. From there, rename the object to 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:
    Making the list scrollable with ScrollView
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset