Inventory and Advanced UIs

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

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

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, second, how we choose to display information about inventory items to the player (the UI).

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

First, we need to think about the nature of different...

Creating a simple 2D mini-game – SpaceGirl

This recipe will show you how to create the 2D SpaceGirl mini-game that almost all the recipes in this chapter are based on. The following figure shows an example of the mini-game we will be creating:

Figure 3.1: Example of the 2D SpaceGirl mini-game

Getting ready

For this recipe, we have prepared the images you need in a folder named Sprites in the 03_01 folder. We have also provided the completed game as a Unity package in this folder, named Simple2DGame_SpaceGirl: https://github.com/PacktPublishing/Unity-2023-Cookbook-Fifth-Edition.

How to do it...

To create the simple 2D SpaceGirl mini-game, follow these steps:

1. Create a new 2D (Core) project.
2. Import the supplied Sprites folder into your project.
3. Since it’s a 2D project, each sprite image should be of the Sprite (2D and UI) type. Check this by selecting the sprite in the Project panel; then, in the Inspector panel, check the...

Displaying single object pickups with carrying and not-carrying text

Often, the simplest inventory situation is to display text to tell players whether they are carrying a single item (or not). In this recipe, we’ll script the ability to detect collisions with the star GameObject and add this to the SpaceGirl mini-game. We will also display an on-screen message stating whether a star has been collected or not:

Figure 3.6: Example of text for displaying single-object pickups

At the end of the recipe, in the There’s more... section, we’ll learn how to adapt this recipe to maintain the Integer total for how many stars have been collected, for a version of the game with lots of stars to collect.

Getting ready

For this recipe, we have prepared a folder named _Scripts in the 03_02 folder.

This recipe assumes that you are starting with the Simple2Dgame_SpaceGirl project, which we set up in the previous recipe. So, make a copy of that project...

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 gray-filled icon in a blocked-off circle will be displayed in the top-left corner of the screen:

Figure 3.11: Example of a single-object pickup

Then, once a star has been picked up, a yellow-filled star icon will be displayed. In many cases, icons are clearer (they don’t require reading and thinking about) and can also be smaller on-screen than text messages that indicate player status and inventory items.

This recipe will also illustrate the benefits of the MVC design pattern, which we described in the previous recipe – we are changing how to communicate with the user (using the View via icons rather than text), but we can use, with no changes required, the PlayerInventory script class (the Model-Controller), which detects player-star collisions and...

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 effective UI approach is to display placeholder icons (empty or grayed-out pictures) to show the user how many of the same item are left to be collected. Each time an item is picked up, a placeholder icon is replaced with a full-color, collected icon.

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

Figure 3.14: UI showing multiple status icons

Getting ready

This recipe assumes that you are starting with the Simple2Dgame_SpaceGirl project, which we set up in the first recipe of this chapter.

How to do it...

To display multiple inventory icons for multiple pickups of the same type of object, follow these steps:

1. Start with a new copy of the Simple2Dgame_SpaceGirl...

Using panels to visually outline the inventory UI area and individual items

There are four kinds of objects we see when playing a game:

• GameObjects that have some visual elements, such as 2D and 3D objects.
• UI elements located in World Space, so they appear next to GameObjects in the scene.
• UI elements located in Screen Space - Camera, so they appear at a fixed distance from the camera (but can be obscured by GameObjects closer to the camera than these UI elements).
• UI elements located in Screen Space - Overlay. These always appear above the other three kinds of visual elements and are perfect for Heads-Up Display (HUD) elements, such as inventories.

Sometimes, we want to visually make it clear which elements are part of the UI’s HUD and which are visual objects in the scene. HUDs are often used to display multiple pieces of information at once, such as the player’s health, inventory, and game progress (score or level). Using Unity...

Creating a C# inventory slot UI to display scripted components

In the previous recipe, we started to work with UI panels and images to create a more general-purpose GameObject for displaying inventory slots, as well as images to indicate what is stored in them. In this recipe, we will take things a little further with the graphics and also create a C# script class that works with each inventory slot object:

Figure 3.23: Example showing stars inventory panel, with three slots

As shown in the above screenshot, in this recipe, we’ll create a UI (and scripts) for an inventory that has three locations for stars, and three more for keys, using colored and gray icons to indicate how many have been collected.

Getting ready

This recipe adapts the previous one. So, make a copy of the project from the previous recipe and work on this copy.

For this recipe, we have prepared a folder named _Scripts in the 03_06 folder.

How to do it...

To create a C# inventory...

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

When working with different kinds of pickups, one approach is to use a C# List to maintain a flexible-length data structure containing 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 will show how the text display for items is generated each time the inventory changes.

Here, we will 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:

Figure 3.29: Example of the UI displaying multiple pickups of different objects

Getting ready

This recipe assumes that you are starting with the Simple2Dgame_SpaceGirl project, which we set up in the first recipe of this chapter.

How to do it...

...

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 could have been typed into the description of 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 possibility of mistyping a string, it also means that we can write code to 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 before displaying these totals via a UI Text object on the screen. We will also switch from using a List to using a Dictionary, since the Dictionary data structure is designed specifically for key...

Further reading

The recipes in this chapter demonstrated a range of C# data representations for inventory items and a range of Unity UI interface components for displaying the status and contents of player inventories at runtime. The 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:

• The graphics for our SpaceGirl mini-game are from the Space Cute art by Daniel Cook; he generously publishes lots of free 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:
  • https://www.gameart2d.com/freebies.html
• Unity article on Model-View-Controller and Model-View-Presenter architectures:
  • https://unity.com/how-to/build-modular...

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask questions to the author, and learn about new releases – follow the QR code below:

https://packt.link/unitydev