Chapter 2. Inventory GUIs

In this chapter, we will cover the following topics:

Creating a simple 2D mini-game – SpaceGirl
Displaying single object pickups with carrying and not-carrying text
Displaying single object pickups with carrying and not-carrying icons
Displaying multiple pickups of the same object with text totals
Displaying multiple pickups of the same object with multiple status icons
Revealing icons for multiple object pickups by changing the size of a tiled image
Displaying multiple pickups of different objects as a list of text via a dynamic List<> of PickUp objects
Displaying multiple pickups of different objects as text totals via a dynamic Dictionary<> of PickUp objects and "enum" pickup types
Generalizing multiple icon displays using UI Grid Layout Groups (with scrollbars!)

Introduction

Many games involve the player collecting items or choosing from a selection of items. Examples could be collecting keys to open doors, collecting ammo for weapons, choosing from a collection of spells to cast, and so on.

The recipes in this chapter offer a range of solutions for displaying to the player whether they are carrying an item or not, if they are allowed more than one of an item, and how many they have.

The big picture

The two parts of software design for implementing inventories relate to, first, how we choose to represent the data about inventory items (that is, the data types and structures to store the data) and, secondly, how we choose to display information about inventory items to the player (the UI: User Interface).

Also, whilst not strictly inventory items, player properties such as lives left, health, or time remaining can also be designed around the same concepts that we present in this chapter.

We need to first think about the nature of different inventory...

Creating a simple 2D mini-game – SpaceGirl

This recipe presents the steps to create the 2DSpaceGirl mini-game, on which all the recipes of this chapter are based.

Getting ready

For this recipe, we have prepared the images you need in a folder named Sprites in the 1362_02_01 folder. We have also provided the completed game as a Unity package in this folder named Simple2DGame_SpaceGirl.

How to do it...

To create the simple 2D mini-game Space Girl follow these steps:

Create a new, empty 2D project.
Import supplied folder Sprites into your project.
Convert each sprite image to be of type Sprite (2D and UI). To do this, select the sprite in the Project panel, then, in the Inspector, change choose Sprite (2D and UI) from the drop-down menu Texture Type, and click on the Apply button, as shown in the following screenshot:
Set the Unity Player screen size to 800 x 600: choose the Edit | Project Settings | Player menu, then for option Resolution and Presentation uncheck Default is Full Screen, and set the...

Displaying single object pickups with carrying and not-carrying text

Often the simplest inventory situation is to display text to tell players if they are carrying a single item (or not).

Getting ready

This recipe assumes that you are starting with the project Simple2Dgame_SpaceGirl setup from the first recipe in this chapter. So, either make a copy of that project or do the following:

Create a new, empty 2D project.
Import the Simple2Dgame_SpaceGirl package.
Open scene Scene1 (in the Scenes folder).
Set the Unity Player screen size to 800 x 600 (see the previous recipe for how to do this) and select this resolution in the Game panel the drop-down menu.
Convert each sprite image to be of type Sprite (2D and UI). In the Inspector, choose Sprite (2D and UI) from drop-down menu Texture Type, and click on the Apply button.

For this recipe, we have prepared the font you need in a folder named Fonts in the 1362_02_02 folder.

How to do it...

To display text to inform the user about the status of carrying...

Displaying single object pickups with carrying and not-carrying icons

Graphic icons are an effective way to inform the player that they are carrying an item. In this recipe, if no star is being carried, a grey-filled icon in a blocked-off circle is displayed; then, after the star has been picked up, a yellow-filled icon is displayed, as shown in the following screenshot.

In many cases, icons are clearer (they don't require reading and thinking about) and can also be smaller onscreen than text messages for indicating player status and inventory items.

Getting ready

This recipe assumes that you are starting with the project Simple2Dgame_SpaceGirl setup from the first recipe in this chapter.

How to do it...

To toggle carrying and not-carrying icons for a single object pickup, follow these steps:

Start with a new copy of the mini-game Simple2Dgame_SpaceGirl.
In the Hierarchy panel, add a new UI Image object (Create | UI | Image). Rename it Image-star-icon.
Select Image-star-icon in the Hierarchy panel...

Displaying multiple pickups of the same object with text totals

When several items of the same type have been picked up, often the simplest way to convey what is being carried to the user is to display a text message showing the numeric total of each item type being carried, as shown in the following screenshot. In this recipe, the total number of stars collected is displayed using a UI Text object.

Getting ready

This recipe assumes you are starting with project Simple2Dgame_SpaceGirl setup from the first recipe in this chapter. The font you need can be found in folder 1362_02_02.

How to do it...

To display inventory total text for multiple pickups of same type of object, follow these steps:

Start with a new copy of the mini-game Simple2Dgame_SpaceGirl.
Add a UI Text object (Create | UI | Text). Rename it Text-carrying-star. Change its text to stars = 0.
Import the provided Fonts folder into your project.
In the Inspector panel, set the font of Text-carrying-star to Xolonium-Bold (folder Fonts)...

Displaying multiple pickups of the same object with multiple status icons

If there is a small, fixed total number of an item to be collected rather than text totals, an alternative effective UI approach is to display placeholder icons (empty or greyed out pictures) to show the user how many of the item remain to be collected, and each time an item is picked up, a placeholder icon is replaced by a full color collected icon.

In this recipe, we use grey-filled star icons as the placeholders and yellow-filled star icons to indicate each collected star, as shown in the following screenshot.

Since our UI code is getting a little more complicated, this recipe will implement the MVC design pattern to separate the view code from the core player logic (as introduced at the end of recipe Displaying single object pickups with carrying and not-carrying text).

Getting ready

This recipe assumes that you are starting with the project Simple2Dgame_SpaceGirl setup from the first recipe in this chapter.

How to...

Revealing icons for multiple object pickups by changing the size of a tiled image

Another approach that could be taken to show increasing numbers of images is to make use of tiled images. The same visual effect as in the previous recipe can also be achieved by making use of a tiled grey star image of width 400 (showing four copies of the grey star icon), behind a tiled yellow star image, whose width is 100 times the number of stars collected. We'll adapt the previous recipe to illustrate this technique.

Getting ready

This recipe follows on from the previous recipe in this chapter.

How to do it...

To display grey and yellow star icons for multiple object pickups using tiled images, follow these steps:

Make a copy of your work for the previous recipe.
In the Hierarchy panel, remove the four Image-star0/1/2/3 UI Images in the Canvas.
Select the Canvas in the Hierarchy panel and add a new UI Image object (Create | UI | Image). Rename it Image-stars-grey.
Select Image-stars-grey in the Hierarchy panel...

Displaying multiple pickups of different objects as a list of text via a dynamic List<> of PickUp objects

When working with different kinds of pickups, one approach is to use a C# List to maintain a flexible-length data structure of the items currently in the inventory. In this recipe, we will show you how, each time an item is picked up, a new object is added to such a List collection. An iteration through the List is how the text display of items is generated each time the inventory changes. We introduce a very simple PickUp script class, demonstrating how information about a pickup can be stored in a scripted component, extracted upon collision, and stored in our List.

Getting ready

This recipe assumes that you are starting with the project Simple2Dgame_SpaceGirl setup from the first recipe in this chapter. The font you need can be found in the 1362_02_02 folder.

How to do it...

To display inventory total text for multiple pickups of different object types, follow these steps:

Start...

Displaying multiple pickups of different objects as text totals via a dynamic Dictionary<> of PickUp objects and "enum" pickup types

While the previous recipe worked fine, any old text might have been typed into the description for a pickup or perhaps mistyped (star, Sstar, starr, and so on). A much better way of restricting game properties to one of a predefined (enumerated) list of possible values is to use C# enums. As well as removing the chance of mistyping a string, it also means that we can write code to appropriately deal with the predefined set of possible values. In this recipe, we will improve our general purpose PickUp class by introducing three possible pickup types (Star, Heart, and Key), and write inventory display code that counts the number of each type of pickup being carried and displays these totals via a UI Text object on screen. We also switch from using a List to using a Dictionary, since the Dictionary data structure is designed specifically for key-value pairs...

Generalizing multiple icon displays using UI Grid Layout Groups (with scrollbars!)

The recipes in this chapter up to this point have been hand-crafted for each situation. While this is fine, more general and automated approaches to inventory UIs can sometimes save time and effort but still achieve visual and usability results of equal quality. In the next recipe, we will begin to explore a more engineered approach to inventory UIs by exploiting the automated sizing and layouts offered by Unity 5's Grid Layout Group component.

Getting ready

This recipe assumes that you are starting with the project Simple2Dgame_SpaceGirl setup from the first recipe in this chapter. The font you need can be found in the 1362_02_02 folder.

How to do it...

To display grey and yellow star icons for multiple object pickups using UI grid layout groups, follow these steps:

Start with a new copy of the mini-game Simple2Dgame_SpaceGirl.
In the Hierarchy panel, create a UI Panel Panel–background (Create | UI | Panel).
Let...

Conclusion

In this chapter, we introduced recipes demonstrating a range of C# data representations for inventory items and a range of Unity UI interface components to display the status and contents of player inventories at run time.

Inventory UI needs good quality graphical assets for a high quality result. Some sources of assets that you might wish to explore include the following sites:

The graphics for our SpaceGirl mini game are from the Space Cute art by Daniel Cook; he generously publishes lots of 2D art for game developers to use:
- http://www.lostgarden.com/
- http://www.lostgarden.com/search?q=planet+cute
Sethbyrd—lots of fun 2D graphics:
- http://www.sethbyrd.com/
Royalty-free art for 2D games:
- http://www.gameart2d.com/freebies.html