Action adventure tutorial part 7: Inventory system

Hi there, we meet again at my game development tutorial blog. Last time we just added a nice looking scenery to our game, and we have our first level (or at least the beginning of it). Now I want to walk you through the making of an important system in a zelda-styled game which I suspect will take a long explanation to do: an inventory system. Because this tutorial seemed to be quite long, I will try to break it into several parts (maybe two or three). So now, let's start!

To begin, we'll create a new layout for our inventory, to do this right click on the Layouts folder on your projects bar and select "Add layout". A pop up window will appear asking you whether you'll want the new layout to have an event sheet or not. You can make a layout without an event sheet but for this tutorial, we'll add an event sheet. Click the "Add event sheet" and Construct 2 will add a new layout for you and you'll automatically switched to that layout. Rename this layout's name to "Inventory", and we're done adding a new layout.

Adding a layout

Now we want to resize the layout to be the same size as the window, because usually people don't scroll around in an inventory screen. You can make an inventory screen without resizing the layout size, by only working inside the dotted part of the layout, but I find resizing the layout makes it easier to work with so that's what I recommend doing. Take a look at the properties bar on the left-hand side and you'll see the default layout size is 1708 by 960, clearly this isn't the window's size so how do we know the size of the window? By looking at the project properties

Project properties

You can open the project properties by clicking the "View" link beside project properties in the layout properties. It will give you a lot of properties that affect your whole project and some are need to be filled before you export to certain platforms. For now, just focus on the window size property and we can see that the window size is 854 by 480.

Window size

To change the layout's size we need to open the layout properties bar again, to do this we simply need to click on an empty space on the layout (if you have objects on your layout, don't click on them). After that, click on the layout size and change them to 854, 480 and press enter. Your layout is now resized. Okay, now we can work on with the inventory.



The inventory system in zelda games are not like those in common RPGs, where you can store any item up to 99 items each, instead it's limited to a certain type of items and you can carry only one of those items (except for bombs and arrows), and that's what we're going to make. We're gonna have a 4 by 3 slots in total similar to LoZ: the minish cap.

First, let's make three layers: Background, Main, and HUD, it's a good habit to create these three layers every time we make a new layout, so we don't forget or put an object in a wrong layer. Next up is the logic behind an inventory. To sort an item in an inventory we need something called an array, an array is an object that acts as a container for a bunch of values. An array can be one dimensional, two dimensionals, or three dimensionals, if you're confused by this you only need to know that the difference between dimensions is how they store their values, I'm gonna explain this further in another tutorial.

Array object

For now let's add an array object, double click on the empty layout and double click on the array object. It will be added to the whole project so you won't see it in the layout, but you can find it in the objects bar. Click on the array object in the objects bar and take a look at its properties, you'll see that it have width, height, and depth properties all with their default values. The width is how many values it can store in the X axis, height is how many values it can store in the Y axis, and depth is the Z axis. Because we want to make a 4 by 3 slots this mean that we need to change the width and height properties.

Let's change paragraph first because the last one already look quite blocky. Done. Change both the width and height properties to 4, we set the height to 4 even though we only want to make 3 slots in it because the width and height properties can't be 0, and even if we don't want to store in Y and Z axis they must be set to 1, or else the array won't work. So to store 3 values in the Y axis we need to make 4 slots.

Before we get to actual code, we need to create the visible slots in our inventory, because we'll use this in the code later. So add a new sprite object to the Main layer, name them ItemSlot, resize them to 64 by 64 and to make them visible let's colour them blue. Place them in the layout 4 slots by 3 slots, like this.

Inventory layout

We've placed them but they don't look like are arranged nicely. It'd be nice if we can somehow snap them into certain points and put them in a nice order, in fact we can. Click on the view tab on top part of Construct 2 and you'll see a checkbox "snap to grid", it's unchecked now so let's check it. If you move your ItemSlot objects now you'll notice that they're snapped to certain positions in the layout. Now we can position them in a well-organized way.

Snap to grid

If you want to see the grid which the sprite objects are snapped to, you can check the "show grid" checkbox and it'll be visible. Please remember that this only affects the active layout, so it doesn't change anything on another layout we've worked on before. I think this is it for now, I actually want to continue because I don't cover much here, but the next one will be about the codes and you can expect it to be full of explanations.

As always, if you like what you read here then consider visiting my Patreon to support me to give you more tutorials in the future. Until next time!