Character's Inventory Display - UQcsse3200/2024-studio-1 GitHub Wiki

Objective

The objective of this task is to provide users with a real-time display of the usable items on the GUI during gameplay. As the game begins, all usable items are displayed on the bottom of the screen. As the player picks up Usable items, such as Medkit or shield potion, their icon will be displayed in this corner, updating the player on their available inventory. The display includes an image of the item and the quantity the player has collected. When the player picks up an item or finishes using it, the item's count is reflected on the display. Additionally, when an item is used, its effects are visually displayed on the screen (e.g., a shield appearing over the player's health bar to indicate the activation of the shield).

Implementation Details:

Event System

To ensure the inventory display updates in real-time, an event system has been implemented

Event Listener: Monitors changes in the player's inventory and triggers an update to the UI
Event Trigger: Fires whenever the player collects an item, ensuring the inventory display is refreshed and updated.

Inventory Display

The inventory display is a simple UI componentt placed in the bottom of the screen

Item's Placement: Collected items are listed horizontally below the map, with the image and the count of each item Item Count Update: When the player picks up an item, the count of that item is immediately reflected on the display. Similarly, when the player uses an item, the count decreases. If an item count reaches zero, it remains visible in the inventory with a count of zero.

UI Structure

Inventory Table: The items are displayed within a Table, allowing for a flexible position and easy updates.
Item Display: Each item's count is displayed using a Label element, which is updated dynamically as the game progresses.
Image Display: Each item's image is also displayed using Image object which was created using it's texture defined in Items class
Background Display: A background box is drawn behind the inventory items using ShapeRenderer. This provides a clear separation of the inventory display from the game environment and enhances the visual clarity for the player. The ShapeRenderer draws a rectangular, light-gray box just behind the listed inventory items to create a background that visually supports the UI.

Example

An example of this on GUI as of sprint 2 is:

When no item is collected:

After collecting some items:

After the use of those items:

Usage

Here's a basic example of how inventory display component can be used:

Entity entity = new Entity();
// inventory to display 
InventoryComponent inventoryComponent = new InventoryComponent();
entity.addComponent(new PlayerInventoryDisplay(new inventoryComponent);

UML DIAGRAM

SEQUENCE DIAGRAM

Player Inventory Display

Player Health Display

Behind the Scenes

Why a Table-Based UI?

Using a Table to display the inventory provides flexibility in layout and easy management of UI elements. The table layout ensures that new items are correctly aligned and spaced, improving readability and user experience.