Unity3D/C#: Scrolling a LIst Of Items

Following from my Inventory (part 1 & 2 are required) and Keyboard Controlled UI tutorials I figured I’d add how you’d scroll through a list of Items.

imageimageimage

Start with these public declarations:

public PlayerStats Stats;

public GUISkin Skin;
public float PosX = 100;
public float PosY = 100;
public float Width = 500;
public float Height = 100;
public float Gap = 15f;

And these private ones

private int scroll = 0;
private int selection = 0;
private bool atBottom = false;

private int ItemsLength;

The Items we want to scroll are stored in an array called:

Item[] (which is a string) and it’s inside of a class called ‘PlayerStats’, hence we’ve got that as a public.

For my BorderedTextBox code, visit code snippets.

In ‘OnGUI’ all you need is (paste into C# for better formatting):

Inventory.StackInventory(Stats);
Inventory.UpdateInventory(Stats);

GUI.Box(new Rect(PosX-5, Screen.height – PosY-5, Width+80, Height), “”);
var h = 0;
for (int x =  scroll; x < ItemsLength + scroll + 1 ; x++)
{

Interface.BorderTextBox(Stats.Item[x] + ” x” + Stats.ItemCount[x].ToString(), PosX, Screen.height – PosY + Gap*h, Width+ 75, Height, Color.white);
if (x == selection)
Interface.BorderTextBox(Stats.Item[x] + ” x” + Stats.ItemCount[x].ToString(), PosX, Screen.height – PosY + Gap*h, Width + 75, Height, Color.magenta);

h++;
}

Now, to break this down. You’ll need to update & stack your inventory like in the Part 2 Inventory tutorial.

First: Create the box background for the text. ‘h’ is used to multiply the ‘gap’ distance between each line of text so they look stacked. So the positions would be like this:

Item 1 = Position Y + 0 * 15 (or just position Y), Item 2 = Position Y + 1 * 15 (or position Y + 15), Item 2 = Position Y + 2 * 15 (or position Y + 30) and so on. This is what you’ll see with the 2 Interface.BorderTextBox lines. The second is the ‘selected’ item (see Keyboard Controlled UI).

What you need to worry about is this line:

for (int x =  scroll; x < ItemsLength + scroll + 1 ; x++)

Normally to display a menu selection of stored items I’d go for:

0 = The First

Total Number of Items = The Last

Which would be x = 0; x < Stats.Item.Length

But because we want to scroll through the item, we have a scroll variable, which will represent the item slot at the top, which might not necessarily be ‘0’. You might have item ‘17’ at the top of the list. I also have the ItemsLength variable, which is the number of items your menu will display at once. So if you have 50 items, you may only wish to display 7 at once. So you add this to your scroll variable and get your last items slot.

Next is the Update() method.

ItemsLength = Stats.Count;
ItemsLength = Mathf.Clamp(ItemsLength, 0, 6);

    if (Input.GetButtonUp(“Up”))
{
if (selection == scroll )
{
scroll–;
atBottom = false;
}
selection–;
}
    if (Input.GetButtonUp(“Down”))
{
if (selection == ItemsLength + scroll )
{
if (atBottom == false)
scroll++;

}
selection++;
}
selection = Mathf.Clamp(selection, scroll, ItemsLength + scroll   );

if (scroll == Stats.Count – ItemsLength)
{
atBottom = true;
}

scroll = Mathf.Clamp(scroll, 0, Stats.Count);

 

The total number of items displayed (ItemsLength) will equal the total number of items in the inventory (Stats.Count), but we will then use a Clamp to restrict it to between 0 and 6 (total of 7 slots). The reason we do this is, if you have less than 7 items, then ItemsLength will rely on the item count for the length of the list.

The 2 input statements:

If the player hits ‘Up’ then it’ll decrement the selection (moving it up) and if the selection is at the top of the list (scroll) the decrement scroll (thus scrolling up) and make sure Unity3D doesn’t think it’s at the bottom.

If the player hits ‘Down’ then it’ll increment the selection (moving it down) and if the selection is at the bottom of the list then increment scroll (scrolling down).

selection = Mathf.Clamp(selection, scroll, ItemsLength + scroll );
This makes it so your highest selection is the Item displayed at the bottom and your lowest selection is the top item displayed, this stop you from selecting items that aren’t displayed.

if (scroll == Stats.Count – ItemsLength)
{
atBottom = true;
}

If you’ve reached the last item in your inventory, then tell Unity3D you’re at the Bottom so it stops scrolling.

scroll = Mathf.Clamp(scroll, 0, Stats.Count);

This makes sure that your scroll variable doesn’t ever exceed the total number of items in the inventory.

So you should get a handy result:

image

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s