How to make a "scroll-system" with buttons Unity?

Question

The title is a bit unclear so here is a detailed explenation: I want to make a shop in a mobile game. When you click on the button that opens the shop, different item-types (sortet vertically) are shown, but there are to many elements of, for example one item-type to display them in one row (sorted horizontally). So I thought you could solve this by adding a "scrolling-system" that works like this: You click a button and the elements that couldn't be shown before are shown. You also see one of the elements that were shown before, so that you see in which direction you the row cycled. It can be a smooth movement or instant.

Here are the conditions that make it not so easy to implement that:

• When you buy an item, it should disappear from the shop.
• When you are at the end, a button should appear that lets you cycle back to the items before.
• It needs to support up to 8 elements.

Here a picture of how I imagine the shop:

I figuered I could use a Scroll rect, disable the scrolling and change the horizontalNormalizedPosition based on how many times you clicked the button. I haven't tried it yet, but I imagine if I have 6 elements and everytime I click the button to display other elements I add, let's say 0.2f to horizontalNormalizedPosition and I buy an item(so it gets removed), 0.2 isn't going to work anymore, because a bit of a other element could be shown, or something like that. So you would need to keep track of the number of elements and change the value based on that and their size.

But is there a simpler solution, or a solution to the problem, so that you only need to write code and not add a scroll rect?

Thx

Answer 1

Maybe you could use the Mask component to show only two shop itens per time,and enable and disable the right and left scroll buttons as you want to show that or not.

To do this you need three objects to be placed side by side: a scroll left button, a panel mask and a scroll right button:

The panel mask object must have the Mask component in it, so you can display only a part of its children objects. Add as a child of the panel mask object the object that contains the array of shop items. When you click in the right or left buttons, you move the transform position of the array of shop items.

Answer 2

You need to adjust your logic to dynamically create your items in the store. The most obvious logic will be:

• Make a prefab with the script on it almost codeless, think of it as about the view.
• Create your products as a non-monobehaviour c# class.
• Make your store react to calls like ShowProducts(List<MyProduct> products)
• For the first iteration you can just delete all the current products at the beginning of your ShowProducts and create the prefab for every MyProduct instance presented in the list, then add it to your root object.

I think this is enough to understand the principle. In such a case to be able to show more/fewer items you will only need to call ShowProducts with a different collection of items. Moreover, you can use several collections with different filters, for example, etc.