Due to several inquiries about how I created my inventory, crafting, and storage systems, I would like to explain my approach in more detail. In this blog post, I won't use any code but rather focus on explaining the underlying logic.

1. The InventoryItem Class

The foundation of these systems is an Item class, which I abstractly created to represent different types of items (materials, placeable objects, weapons, consumables, etc.). The reason for an abstract class is straightforward: it allows me to pack all items into a vector and call defined functions based on the situation, such as OnPickup, OnDrop, and OnUse.

 Additionally, I've created an Item Definition JSON, which defines items, including details like icon, name, maximum stack size, and item type. However, this isn't crucial and can be skipped.

2. The Gridview Widget

After defining my base class, I created a custom widget for a GridView, as I introduced in a previous post. However, this widget doesn't use the previously created Item class; instead, it has its own GridView items. Why? Because it's crucial to separate data from the GUI, and I can use it in various other projects. The GridView serves to visually represent the items, and we'll delve into how it works later.

3. How to Display InventoryItems within the Widget

Now that I have the basic Item class and a GridView for displaying inventory content, let's move on to the inventory itself. The Inventory class is not a component; rather, it's a simple C++ class that includes a vector for items and various functions to add, remove, and retrieve items. Additionally (for simplicity), I created a reference to a Grid Widget for the inventory. When a change in items occurs, this GridView is updated. The process involves removing GridView items and adding new GridView items based on the inventory's items.

Now I have an inventory that shows the items the player has in their inventory.

4. New Items for the Player

Now let's talk about how the player obtains items, which is quite simple. For this, I created a component that assigns items to the inventory based on various conditions, such as the passage of time.

5. The Crafting UI & Concept

Since we can now gather items and see them in the inventory, let's do more with these items. We want to craft ItemZ from ItemX and ItemY. For crafting itself, I've also created a component (named Workbench) and its own UI. This is a bit more complex, so I'll try to explain it as precisely as possible.

The UI has two GridViews and a ListView, along with various other widgets that aren't as important. What's crucial is that I only have one UI managing the workbenches. For this, I created two global variables: one for the panel (the UI) and one for the component that's currently the owner of the UI. When the player opens the UI using a workbench, the UI owner is also set simultaneously. It can only be reopened after being closed, as the owner is then set back to a null pointer. When opening, I load all recipes into the ListView. The recipes themselves are defined in a JSON file. When the player selects an item they want to craft, the required materials are loaded into the first GridView. This serves purely as visual information and has no further functions.

6. Drag & Drop Items

Now let's discuss how I allow the player to place items from their inventory into the crafting window. For this, I created another class called ItemMover. Its task is to temporarily pick up an item and then transfer it. I use the events sent by the GridView. When the player performs a mouse drag, I now pick up the item(s) from the inventory slot and set it as a reference to the ItemMover. If I then receive the MouseDown event on another GridView, I check if the ItemMover has an item. If so, I add the item from the Mover to the Workbench's vector, update the UIs, and delete the item from the Mover. To make this look visually appealing with drag and drop, I created a simple widget that becomes visible when the ItemMover holds an item and is always set to the mouse's position. It becomes invisible on item drop.

7. The Crafting itself

Crafting itself is again quite simple. When the player clicks the button, the Workbench checks if the vector of materials (using the Item class again) has enough of the required items. If yes, the item is crafted and added to the vector of materials.

8. Get the Crafted items into the inventory

To allow the player to now take out the crafted item, we again use the ItemMover and drag-and-drop functions.

9. Done!

As you can see, the whole system is quite complex, making it challenging to provide any specific files due to many dependencies among themselves and with other components. I hope I have explained it comprehensibly. If you have further questions, feel free to ask them in the comments.

Watch the video how it works https://streamable.com/r2d0x5