Echolite - Update #5 - Inventory, Crafting

Echolite - Update #5 - Inventory, Crafting

Play this article

Table of contents

No heading

No headings in the article.

This devlog touches on the more technical additions to the game thus far! Several revisions, tutorials, and playtest sessions later, and we were able to achieve the impossible - an inventory and crafting system!


Inventory

As with most features, some base UI elements were in order. I looked to the same Golden UI atlas for guidance by the wonderful Buch. It is a relatively simple design in that items are stored in a grid fashion. Here is what that initial draft looks like:

image.png

Similarly, I used grid patterns to form a hotbar UI. The animation goal here is that the ends will collapse and fly up from the bottom, then fold out with the items. For now, the coding will just focus on the UI as-is, but this animation could be worth adding in the future. This is usually the trend in my development timeline - future self despises younger self for staying simplistic and leaving work half-finished. Oh well!

For setting up the elements in-editor, we use the same useful node explored in the echolocation dashboard - the GridContainer! This allows for easy spacing of the inventory slots as well as the ability to quickly add more slots if needed.

image.png

An identical setup is also leveraged for the hotbar as shown here:

image.png

This is where coding begins (as well as some major oversights). The general idea was to have a basic array of items and then reorder them as the player desires. This is still present in the final implementation, but many of the nuanced behaviors were difficult to nail. Particularly, dealing with stack sizes, held items, splitting, etc…

Perhaps the greatest issue was that I treated the hotbar as a “secondary” inventory. Beyond not being able to move items between them, this small distinction made it difficult to have custom slots for handling usable items. If a player wanted to place an item from the hotbar into the world for instance, it would be difficult to tell if the player was trying to move it into the world or into the inventory. That switch in states could get quite messy as more features are extended over time. I did eventually achieve a “workable” system at first, but it was still too limiting. When I got to crafting, I realized that the inventory system was not compatible. As frustrating as it was, I decided to redo the coding with guidance from some amazing tutorials, particularly this series: https://www.youtube.com/watch?v=FHYb63ppHmk

This decision to accept help and scrap my previous work was difficult to make, but it was ultimately the smartest choice. I encourage all indie game developers to learn from this! If someone out there has implemented your systems better, don’t feel bad about adopting it into your project. Just make sure you understand the ins and outs of it for easy expansion.

Perhaps the best part of this rework was that equippable slots were now possible! This enables custom items like gear or tools to be equipped by the player that can provide various effects. It’s opened up a lot more design options within the game that we’ll get to see in the coming months.

image.png

With the inventory and place, we can add some basic items in the world that the player can pick up. I opted for a neat magnet-like effect where items within a certain range of the player would “fly” towards them. This made item pickup more automatic and satisfying. One thing I would love to add is a queued popup for picked-up items to better indicate what was found, but this will have to do! Here is what that looks like:

via GIPHY


Crafting

With the inventory finally established, the crafting element “built” itself fairly easily (full of puns today!). This opened up the discussion on game data, since common values like item names or crafting recipes could be stored in a variety of locations. I ultimately decided on JSON files as they were fairly easy to stitch together and read through the editor. Here is how some of those turned out:

image.png

The crafting interface needed to be drafted next, using the same GUI atlas above. It mirrors the inventory to help show the relationship between collecting and creating items. The extra panel will help denote the resources needed for a recipe, along with quantity controls and a crafting button.

image.png

In usual fashion, we move over to the code now! My approach here was to split coding into three phases. First, I used the JSON values to populate the interface, such as available recipes, items needed, etc… This part required a bit of a learning curve for reading JSONs, but once I understood the mix of loops to iterate over the data, this phase became fairly easy to complete. This led to the second phase, where we needed to evaluate if an item could be crafted. Planning this phase helped immensely, in which I found there to be several cases to consider:

  1. None of the resources are available
  2. Some resources are there, but not all
  3. All resources are there, but not the correct quantity
  4. All resources are there with correct quantities

With this in mind, I set up a looped function to go through the inventory and hotbar (all as one larger list) and evaluate these conditions. This meant tracking each item in the recipe to see if it was available and there was enough of it. The main issue that came up was that in evaluating on a per-slot basis, my recipe quantities were limited to the stack sizes of a given item. This could be circumvented by having several recipe slots of an identical item with varying amounts below the stack size. For now, I’m sticking with this workaround, but it has been added to the ever-growing "quality of life" to-do list that will be addressed in - you guessed it - the future!

The third coding phase was fairly straightforward, where I needed to allow the new item to be crafted following proper evaluation above. This meant adding the new item into the inventory/hotbar (in the next available slot), while also removing the other resources used to craft the item. Essentially, I created two functions under both the inventory and hotbar that allow an item name and quantity to be specified, then proceed to either add or remove items. These functions were super flexible, meaning I could add a single item or use a loop to remove multiple items. With this phase resolved, the crafting system is more or less complete! Here’s the final result:

via GIPHY


What’s Next?

The next devlog will fit neatly into the inventory and crafting features! First, manually placing items into the world is very tedious and defeats the purpose of resource tiles. This next update will add in a new resource collection system that allows the player to “dig” up items all around. Second, resource collecting and crafting is only exciting if those actions can be retained into the next play session. Yup! An initial saving/loading system will be implemented as a solution. This will allow key aspects of the game to be saved and loaded so that progress can be continued over (hopefully!) dozens of play sessions.