Action adventure tutorial part 9: more on the inventory system

Hi guys, it's been quite some time after my last blog post (which was in September), I apologize for not writing anything in October. The truth is, as long as this Patreon isn't enough to pay my bills I'll have to do outside contract job as well. I don't really ask for a lot, about $400-500 a month from Patreon would be great, but I'm still far from that goal so... yeah, I need to get outside job.

So, last time we're making an inventory system and we get to a good start, but there are at least two things missing: the functionality to choose an item, and the functionality to use that item. Beside those two important parts, we still can't return to the main game from the inventory screen. Let's fix the easy part first, return to the main game. We simply need to add the action Go to Layout 1 (or whatever you name the first layout) to the event of keyboard's key press, the result would be like this

Back to layout 1

And with that out of the way, let's add the functionality to choose an item. We first need a sprite that acts as a "selector", so we know which slot is currently being selected. So let's create it, add a new sprite object and name it "selector" and change the size to 64 by 64, because we want the selector to be as big as the item slot. And then you can use the Construct 2's image editor or your any other image editor you prefer, but make the selector to look something like this

Selector

The gray part is from Construct 2's editor, the selector is actually mostly transparent. Next, add an instance variable to the selector called itemIndex with the type number and we'll keep the default value to 0. The way it works is like this: we're going to check the selector's itemIndex at all times, and we're going  to put the selector's position to the position of the item slot with the same index, this way if we want to move the selector, we'll only need to add or subtract the itemIndex instance variable.

The code for the first part of our logic is like this

Putting the selector

for the second part we obviously need a keyboard event, and we'll add or subtract the itemIndex instance variable by one each time the right arrow key or the left arrow key is pressed. And we also need to put a limit on the code, so when the value is above 11 or below 0 the selector will still correctly selecting an item in the inventory. We could easily use the set value action to set the instance variable to 11 or to 0, but we're going to do something more, we're going to add or subtract the variable by 12 so that when the selector goes up or down, it will go back to the other side of the selection.

Moving the selector

Try to run your game now and when you go into the inventory screen, you can move the selector around! That's great! Next up, we're going to use these items in the main game screen. But there's one problem, we don't have the sprites for boomerang, shield, ocarina, and bomb, the browserquest assets don't have the same equipment as legend of zelda. So, rather than actually using the actual sprite we'll be using some placeholder images.

From the folder Browserquest-images > img > 2 look for these sprites:

• item-burger.png
• item-cake.png
• item-firepotion.png
• item-flask.png
• item-goldenarmor.png

 and add them all as sprite objects (each are its own object) and place them in the inventory layout outside the layout. We only put them there because Construct needs the object to be put in at least one layout to be able to use it. After that give them all a Fade behavior, because we want them to be destroyed quickly.

Now, before using them we want to be able to select them. In order to do so, the item slot needs to know the item it's referencing to. So, add a new text instance variable to the itemSlot object, name this instance variable "itemName". It will store the name of the item in the array that is shown in this item slot. To use this, go to the event sheet of our inventory screen and we'll edit the action of the event where we change the itemName's text to the item name in the array.

Giving item name to item slot

 Now we need to reference the items to the name in the array. To do this we need to give our item objects a name, so that Construct 2 will know which one to pick. So, add a new text instance variables to our item sprites, and name them this:

• Flash sprite -> "Boomerang"
• Fire potion sprite -> "Shield"
• Golden armor sprite -> "Catapult"
• Burger sprite -> "Ocarina"
• Cake sprite -> "Bomb"

 Pay attention to the capitals, because we want the value of the instance variable is the same as the one in the array. We want to select the item by pressing the C key (or whatever key you want) on the keyboard, so after pressing this key we will check which item slot is overlapping the selector, and we'll store the item name of that slot to a global variable. So first, create a text global variable with the name "selectedItem", and then add this events to the inventory screen

Selecting item

Okay, now that we have stored our selected item's name in a global variable, we can go back to the first layout and use it. Go to layout 1's event sheet where we'll use our item when we press C key, we'll use the instance variable from our items sprite to determine which one will be spawned. This is the event

Using item

Try to run your game now, start from layout 1 and then go to the inventory screen, select one item by using the C key, and then return back to the first layout. This time, press the C key again, and if you've been following me, you'll see our selected item appears and then fades away. Congrats! Now we can use our item. Sure, our item doesn't do much beside appearing and fading, I will cover on how to give different functionality to our item on another tutorial. Why? It's because the secret to give a unique functionality on each item is inside a function, and I haven't even teach you about that yet.

I think that's it for now, as always if you want to take a look at the source code then you can grab the capx file at my Drive! And if you like these tutorials and would like to support me writing more of them then please consider visiting my Patreon page. Thank you and I'll see you next time!