We can see 10 inventory slots now—but what if there are many more? One solution is to add a scroll bar so that the user can scroll left and right, viewing 10 at a time, as shown in the following screenshot. Let's add a horizontal scroll bar to our game. This can be achieved without any C# code changes, all through the Unity 5 UI system.

To implement a horizontal scrollbar for our inventory display, we need to do the following:

You should now have a working scrollable inventory system. Note that the last three new icons will just be empty circles, since the inventory display script does not have references to, or attempt to make, any changes to these extra three slots; so the script code would need to be changed to reflect every additional slot we add to Panel-slot-grid.

There was a lot of dragging slots from the Hierarchy panel into the array for the scripted component PlayerInventoryDisplay. This takes a bit of work (and mistakes might be made when dragging items in the wrong order or the same item twice). Also, if we change the number of slots, then we may have to do this all over again or try to remember to drag more slots if we increase the number, and so on. A better way of doing things is to make the first task of the script class PlayerInventoryDisplay when the scene begins to create each of these Image-slot GameObjects as a child of Panel-slot-grid and populate the array at the same time.

To implement the automated population of our scripted array of PickupUI objects for this recipe, we need to do the following:

The public array has been made private and no longer needs to be populated through manual drag-and-drop. When you run the game, it will play just the same as before, with the population of the array of images in our inventory grid panel now automated. The Awake() method creates new instances of the prefab (as many as defined by constant NUM_INVENTORY_SLOTS) and immediately childed them to Panel-slot-grid. Since we have a grid layout group component, their placement is automatically neat and tidy in our panel.

Note that we use the Awake() method for creating the instances of the prefab in PlayerInventoryDispay so that we know this will be executed before the Start() method in PlayerInventoryModel—since no Start() method is executed until all Awake() methods for all GameObjects in the scene have been completed.

Consider a situation where we wish to change the number of slots. Another alternative to using scrollbars is to change the cell size in the Grid Layout Group component. We can automate this through code so that the cell size is changed to ensure that NUM_INVENTORY_SLOTS will fit along the width of our panel at the top of the canvas.

To implement the automated resizing of the Grid Layout Group cell size for this recipe, we need to do the following:

We write our code in the Start() method, rather than adding to code in the Awake() method, to ensure that the RectTransform of GameObject Panel-slot-grid has finished sizing (in this recipe, it stretches based on the width of the Game panel). While we can't know the sequence in which Hierarchy GameObjects are created when a scene begins, we can rely on the Unity behavior that every GameObject sends the Awake()message, and only after all corresponding Awake() methods have finished executing all objects, and then sends the Start() message. So, any code in the Start() method can safely assume that every GameObject has been initialized.

The above screenshot shows the value of NUM_INVENTORY_SLOTS having been changed to 15, and the cell size, having been corresponding, changed, so that all 15 now fit horizontally in our panel. Note that the spacing between cells is subtracted from the calculated available with divided by the number of slots (xCellSize -= gridLayoutGroup.spacing.x) since that spacing is needed between each item displayed as well.

If we wish to further change, say, the RectTransform properties using code, we can add extension methods by creating a file containing special static methods and using the special "this" keyword. See the following code that adds SetWidth(…), SetHeight(…), and SetSize(…) methods to the RectTransform scripted component:

using UnityEngine;
using System;
using System.Collections;

public static class RectTransformExtensions
{
  public static void SetSize(this RectTransform trans, Vector2 newSize) {
    Vector2 oldSize = trans.rect.size;
    Vector2 deltaSize = newSize - oldSize;
    trans.offsetMin = trans.offsetMin - new Vector2(deltaSize.x * trans.pivot.x, deltaSize.y * trans.pivot.y);
    trans.offsetMax = trans.offsetMax + new Vector2(deltaSize.x * (1f - trans.pivot.x), deltaSize.y * (1f - trans.pivot.y));
  }

  public static void SetWidth(this RectTransform trans, float newSize) {
    SetSize(trans, new Vector2(newSize, trans.rect.size.y));
  }

  public static void SetHeight(this RectTransform trans, float newSize) {
    SetSize(trans, new Vector2(trans.rect.size.x, newSize));
  }
}

Unity C# allows us to add these extensions methods by declaring static void methods whose first argument is in the form this <ClassName> <var>. The method can then be called as a built-in method defined in the original class.

All we would need to do is create a new C# script class file RectTransformExtensions in the folder Scripts in the Project panel, containing the above code. In fact, you can find a whole set of useful extra RectTransform methods (on which the above is an extract) created by OrbcreationBV, and it is available online at http://www.orbcreation.com/orbcreation/page.orb?1099.