Action adventure tutorial part 8: Coding the inventory system

So, last time I said that we're going to make an inventory system for our game, and we have made a basic layout for it. And now I will get us started on the code part, I know that it's gonna be challenging for some (or most) people so I'll try to explain as good as I can. So, let's start.

We have 12 item slots placed nicely in the layout (in a 4 by 3 format), to store items in those slots we can either easily use a one dimensional array with 12 members in it, or a two dimensional array with 4 widths and 3 heights. Let me explain to you more about arrays, because I don't think I wrote about it.

I've explained to you that an array is an object that stores many values, these values can be texts or numbers, or a combination of both. Arrays are usually written inside brackets in other programming languages, so an example of an array of names would be like this: ["Jason", "Alan", "Mary", "Robert"] and an array of numbers (for example, list of scores that enemy would give) would be like this [50, 100, 225, 350, 400]. These values that an array holds is called an array's "members".

By default, an array created in Construct 2 can have 10 members. The amount of how many values an array can store is called an array's "length". In the above example we have 4 names in the name array, that means there are 6 empty slots in the array. We can programmatically add another member to this array, but we can't add its length by code, the only way to change an array's length is by modifying its properties from the properties bar.

Arrays store their values in an ordered list, meaning that we can retrieve a value from it by only knowing the order number of the element we want. So for example, we want to get the third name from the names array, we'll retrieve its second member, which will return as "Mary". You may notice that I said we retrieve the array's second member. No, I didn't count wrong because array's numbers are index-based, meaning that it starts counting from 0 instead of 1. So, "Alan" would be member number 1, and "Robert" is its third member.



One last thing that I think should be explained about arrays, is that arrays can have more than one dimension. So an array can be a two dimensional or a three dimensional. A one dimensional array is just a list of values, nothing difficult there, a two dimensional array stores its values in both X and Y axis, making a table. While a three dimensional array stores in X, Y, and Z axis, making it looks like a cube. For simple games one dimensional array is enough, and for most other games two dimensional is sufficient. A game rarely ever needs a three dimensional array, and it's only needed to store complex data (meaning, if you ever need a three dimensional array, you won't be reading this tutorial).

In our inventory system, we have made our array to have 4  members in the X axis (width) and 4 in the Y axis (height), and now we're going to implement the code. First, each slot must know which member it refers to in the array so let's add an instance variable called "index" and it'd be a number type. Now we'll edit the values manually so that the top left corner item slot has index 0, the one next to it is 1, and 2, and 3, and then the middle left will be 4, and so on.

Next we'll fill the array. In actual gameplay the array must be filled or changed its members after something happens in the game, usually after the player receive a certain item. But now we'll add the array's members at the start of layout, so change to the event sheet for inventory system and add "On start of layout" event.

For the actions, we'll set the value at X positions, there are 3 members we're going to add first: Boomerang, Shield, and Catapult, at index 0, 1, and 3. Your event will look like this.

Set the members of the array

I intentionally skipped index 2 to show you that we don't need to fill an array in a straight order. And for the second row, we'll add at both position X and Y because we're adding to the second dimension of the array. Set the value at (0, 1) to "Ocarina", this will fill the middle left part of the item slot. Now, we need something to show us that the slots are filled, in the final game this is where we put the item's icon in the respective item slot but for now we'll just use a text object.

Add a text (name it "itemName") and put it somewhere outside the layout, we only need this one so Construct 2 knows what textbox we're talking about. For its color we'll choose something bright, green would be good. And then change its Horizontal alignment, Vertical alignment, and Hotspot properties to "center", because we want to center everything. Oh, by default the text it will be showing is "Empty".

Back to the event sheet, create event itemSlot "On created" and in the action, we will spawn another object, which is our itemName text. After that we'll change the text, there are two conditions that we'll be checking: the index number, and if there is a member in that index. Firstly we'll check if the itemSlot's index is less than 4 (which is the top row of our itemSlot), and then we'll see if the array member in that position is not 0 (if it is, it's empty). The code is like this

First row of item slots

For the second row of array we'll check if the index is less than 8, and for the array index we're checking at, we'll use a bit of mathematical function. For the X pos we're looking at, we'll subtract the itemSlot's index by 4, and we'll always set the Y to 1. The result is we'll be looking at array index of (0, 1), (1, 1), (2, 1), and (3, 1).

Second row of item slots

For the third row, we'll use the similar function but we'll change the Y pos we're checking to 2. The result is we're checking the array at (0, 2), (1, 2), (2, 2), and (3, 2).

Third row of item slots

Try to run your game now, and you'll see item slots with... Empty texts written on them. Why? Haven't we already filled the array? Well, this is because we created the itemSlots first, and then fill the array later, that's why the texts don't change. So what do we do?

Well, we'll fill the array at the start of layout 1, and then we'll switch to the inventory layout with a single click. So now, copy the event "On start of layout" in the second event sheet to the first event sheet. And then we're going to switch to the inventory layout with a press of a button, for example the M key.

Event in the first layout

Now run your game starting from layout 1, and after you press the M key you'll switch to the inventory screen with the name of our items written on the item slots where we want them to. Congratulations, we have made the early version of our Inventory screen! We'll be perfecting this as we go.

Well, I think that's it for today's tutorial, hope you enjoy it! If you want to read the complete source code until now, it's available on my Drive. And as usual, if you like what you read and want to support me writing this, please consider visiting my Patreon. Thanks and I'll see you next time!