Create a queued item production interface in Unity/C#

Let’s see how we can show some buttons to produce a few items and handle queued production!

This article is also available on Medium.

Sometimes, in games, you have some kind of resource management and you have to produce units, or items. This kind of system obviously has a lot of components to it, like the initial gathering, displaying the production interface, perhaps finding recipes, etc.

Today, I want to focus on the interface and see how we can quickly setup a basic UI to produce various item types while handling queuing – this way, if the player clicks on the same item type as before, and the production isn’t yet finished, this new “command” will be stored and delayed until the first item instance is done.

Also: I’ll separate the queues between the different item types, meaning that I’ll be able to produce multiple items at the same time, as long as they have different types.

So in the end, we’ll have a basic row of buttons and we’ll be able to produce axes, shields or swords:

Are you ready? Then let’s dive in! 🙂

Note: the images I use in this tutorial come from either this free Unity asset or my own “wood-like” hand-drawn UI set, available in my RTS e-book bundle.

Preparing the UI

My interface for this quick session is pretty basic – I’ll just have three buttons inside a Grid Layout to make a row of squares.

Note that I’ll create the buttons dynamically in my C# logic so that it adapts to the list of items I give it without me having to manually keep the consistency!

Each of these buttons will be an instance of a prefab I prepared beforehand, the “QueuedProductionItemButton”. It has a simple hierarchy:

  • the root element has a Button component to catch the clicks
  • we have a UI Image for the icon
  • and a UI Text for the current queue count
  • finally, we have a progress bar that is composed of a background and, inside, the “Fill” image; this image can be set to the “Fill” mode so that we can easily tweak its length

Note: by default, I’ve set the fill amount of the progress bar “Fill” image to zero and the “Count” text to an empty string.

Coding up the queued production feature

Setting up the manager and the references

To begin with, let’s create a new C# script, QueuedProductionManager, and add it to some empty game object in our scene, for example named “MANAGER”. This will make sure our MonoBehaviour logic inside the QueuedProductionManager is called.

Now, in this script, we want to create three variables:

  1. a reference to the “Buttons” parent UI element (the one that has the Grid Layout component) – this will allow us to parent our dynamically created button to our grid
  2. a reference to the “QueuedProductionItemButton” prefab we prepared so we can instantiate it
  3. a list of items to show

To define this list of items, we first need to create our own Item C# class – this will hold the data relevant to an item in our interface. For now, let’s just give it an icon and a production time:

Make sure that you give this class the [System.Serializable] attribute so that it shows in Unity’s Inspector.

Now, we can add all of our references in the QueueProductionManager:

And then, we just have to fill the various slots in the Inspector:

Instantiating the buttons

The next step is to actually use our list of items to automatically create the matching UI buttons. All in all, it’s just about iterating over the _items array and instantiating a copy of the _buttonPrefab reference for each.

But I’ll also take this opportunity to store some additional info in my Item class; because I’ll need to access them regularly later on, I’ll create references to the count text and the progress bar fill image – we don’t need to show them in the Inspector, so I’ll give them the [HideInInspector] attribute:

This way, when I create my UI elements, I can also directly assign these UI sub-children to the Item instance:

Adding the logic on the buttons

Now, time to actually add some callback to our buttons!

Remember that I’ll separate the production between the different item types. So what we want is for the button to either start a new production queue if no item of this type is currently being produced, or else increment a counter to indicate there will be one more item to create when the current one is finished.

This means we need to two pieces of info: the current number of items to produce, and whether one is currently being produced or not.

The first thing is easy enough to get: we’ll just have a little integer in our Item class that starts at zero, that we increment when click on the button and that we decrement when we produce one new item instance.

For the second thing, I’ll rely on a coroutine.

Unity coroutines are sort of “special functions” that allow you to run some code parallel to the main process and therefore run multiple pieces of logic at the same time. They rely on an IEnumerator and the yield instruction so that the program can regularly “enter and step” the coroutine to have it run seemingly in parallel of the main loop.

The idea here will be to check if the coroutine corresponding to this item is null, which means that no production queue is currently running, or if it is already assigned to a coroutine process, which means that we are currently producing items of this type.

So let’s upgrade our Item class with a count and a coroutine:

Again, I’m going to hide these variables in this Inspector, and I’ll also initialise them.

Then, we can prepare an intermediary function, _ProduceItem(), to check if we the coroutine is null or not and optionally start it or update the count. We can assign this function as the callback for the item’s UI button:

Finally, we have to populate this coroutine with some code to:

  • produce items while the count for this Item slot is more than zero
  • each time we produce an item, update the progress bar and, in the end, decrement the count value (+ update the matching UI text)
  • if there is no items left in the queue, stop the coroutine and reset it to null

All this translates to the following in C#:

You’ll notice that if I have one item left in the queue, I just “hide” the count text by resetting it to an empty string.

The final demo

And here we are! With just these few lines of code, we now have a simple but working UI to make various item types and queue the production per type 🙂

Conclusion

In this short tutorial, I showed a basic way of implementing a simple queued production system for your RPG crafting or RTS game developments… up to you to re-adapt it and build on this!

I hope you like this tutorial – as usual, feel free to drop a comment with ideas for other Unity articles! Thanks for reading and see you soon for more posts on game dev 🙂

Leave a Reply

Your email address will not be published.