Skip to content

Player Inventory

connor-golin edited this page Oct 19, 2023 · 23 revisions

Overview

The Player Inventory is used to switch between weapons and buildable items. The Player Inventory adds further levels of depth to the game by allowing the player to hold melee, ranged, and buildables in an easily accessible manner - with either button pressing on the screen or keyboard buttons M, R, and H to equip each slot respectively. Throughout Sprints 3 and 4, anUpgradeDisplayComponent was implemented and iterated upon. This provides a UI representation of the InventoryComponent that draws weapons and buildables in a user-friendly manner. This allows the user to clearly see which slot and item is equipped, and an intuitive method of switching between them.

Switch Weapons

Weapons can be equipped by simply clicking on a weapon/buildable on the hotbar UI, or by using number keys M, R, or H to directly switch to a weapon or building hammer. The 3 buttons positioned to the right of the screen holds the current item equipped within each respective slot (melee, ranged, buildable) and can be clicked with MOUSE1 to switch between them. Drawn centrally at the bottom of the screen is all items currently unlocked within the currently equipped slot. This hotbar allows the user to more easily switch to the item they choose, given they have unlocked it by collecting enough Nebulite by extracting from a green fissure.

Weapon Details

Stores functional weapon details like weapon type, available ammo, and attack cooldown. Weapon ammo is displayed on the top left of the screen, which can be reloaded by pressing R. Weapon details such as attack damage, cooldown, cost, and more can be easily viewed within the Upgrade Tree menu (U) by hovering over the desired item (which displays a ToolTip).

Key Components

InventoryComponent class:

  • convertSave: Converts the saved map into a map containing the item's slot, and assigned ammo.
  • getSlotTypeMap: Returns a map containing the weapon's slot, and its type
  • getConfigs: Gets weapon configs
  • getEquipped: Gets the equipped weapon's assigned slot
  • setEquipped: Changes active inventory slot to a specific slot
  • replaceSlotWithWeapon: Replaces the specified slot with a given weapon
  • getEquippedWMap: Returns a mapping of item and its respective slot
  • getEquippedWeapons: Returns the current equipped weapons represented in an array
  • changeEquipped: Updates active weapon.
  • getEquippedType: Returns the equipped weapon type
  • getCurrentAmmo: Get the currently equipped weapons current ammo
  • changeEquippedAmmo: Changes the amount of ammo in current weapon slot by change
  • getCurrentAmmoUse: Returns the amount of ammo the currently equipped weapon uses per shot
  • getCurrentMaxAmmo: Returns the amount of max ammo for the current weapon slot
  • getEquippedCooldown: Returns the remaining tick cooldown for the currently equipped weapon slot
  • setEquippedCooldown: Sets the cooldown for the currently equipped weapon slot
  • reloadWeapon: Relaods weapons after 2 seconds
  • getReloading: Return if the weapon is being reloaded

InventoryComponent.InventoryItem class:

Private class to store inventory items

  • InventoryItem: Constructor to create inventory item
  • getItem: Returns weaponType of inventory item
  • changeItem: Updates inventory items weaponType
  • getAmmo: Returns ammo count of inventory item
  • changeAmmo: Updates available ammo for inventory item
  • setMaxAmmo: Sets max ammo capacity of inventory item
  • getMaxAmmo: Returns max ammo capacity of inventory item
  • setAttackCooldown: Sets attack cooldown for inventory item
  • getAttackCooldown: Returns attack cooldown for inventory item
  • decCoolDown: Decreases attack cooldown for inventory item

InventoryDisplayComponent class:

Displays a UI hotbar interface on the current equipped melee, ranged and building hammer.

  • makeTable : Creates a table with three buttons, each button including a label and image specific to the currently equipped item in that slot.
  • makeHotbar: Creates the centrally aligned hotbar at the bottom of the screen, iterating and displaying unlocked items.
  • updateButtonTableColour : Changes each buttons colour based on whether it is equipped or not - greyed-out for unequipped, else normal.
  • equipEvent : Is a listener function which updates the table if it detects an item change in any slot.

KeyboardPlayerInputComponent class:

  • triggerInventoryEvent: Updates player inventory based on user input; can cycle between weapons or equip a specific weapon.

PlayerActions class:

  • updateInventory: Updates Inventory.

Inventory Display UI

Sprint 3:

Initial design inspiration

Game: Counter Strike: Global Offensive

image

Final Sprint 3 Design

image

Sprint 4:

Unlocked items Hotbar

From the Sprint 3 iteration of the Hotbar, there were found to be a few drawbacks. One of which was that the user had no clear idea of what items they had unlocked. The user was required to visit the upgrade menu to see what they currently have unlocked. Additionally, the user could only swap between items currently equipped in the respective slot. In collaboration with Team 7, we implemented an unlocked items Hotbar to aid the existing right-aligned hotbar, which was inspired by popular existing solutions such as Minecraft or Terraria. To allow the user to have a seamless experience, we adhered to UX design principles such as ease of use and visibility. The Hotbar is located centrally at the bottom of the screen and allows the user to see/switch to their items as soon as they're unlocked. This was implemented with an Observer design pattern, with the concrete observer being the Hotbar UI, and the subject being the InventoryComponent, which notifies the Hotbar of any changes (equipped switches).

Inspiration; Minecraft hotbar

Sprint 4 Implementation: Ranged weapons equipped

image

Testing plan

Updated for Sprint 4

PlayerInventory and PlayerInventoryDisplay have been tested in accordance with the Player Inventory Testing Plan

UML Class Diagram

Note: Interactive, pan and zoom with the buttons located in the bottom right:

classDiagram


    InventoryDisplayComponent --|> UIComponent : extends
    UIComponent --|> RenderComponent : extends
    InventoryDisplayComponent o-- StructureToolPicker : uses
    
    Entity "*" *-- "1" InventoryComponent: has
    Entity "*" *-- "1" UpgradeTree: has
    Component <|-- InventoryComponent
    Component <|-- UpgradeTree

    InventoryDisplayComponent ..> Observer 
    Observer "observes" --* Subject
    Subject <-- InventoryComponent
    InventoryDisplayComponent --> InventoryComponent

    class InventoryDisplayComponent {
        +makeTable(): void
        +makeHotbar(): void
        +updateButtonColor(Button, WeaponType): void
        +equipEvent(): void
        +selectIndex(int): void
        +show(): void
        +hide(): void
        +create(): void
    }

    class UpgradeTree {
        +getUnlockedWeaponsConfigs(): List<WeaponConfig>
    }

    class InventoryComponent {
        +getEquippedWeapons(): List<WeaponType>
        +getConfigs(): WeaponConfigs
        +replaceSlotWithWeapon(String, WeaponType): void
        +changeEquipped(WeaponType): void
    }

    class Entity {
        +getComponent(Class<T>): T
        +getEvents(): EventSystem
    }

    class RenderComponent {

    }

    class UIComponent {
        +create(): void
    }

    class Component {

    }

    class Observer {
        <<interface>>
        +update()
    }

    class Subject {
        +attach(Observer)
        +detach(Observer)
        +notifyObservers()
    }

Loading
Clone this wiki locally