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

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.

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.

Action adventure tutorial part 6

Hi everyone, I apologize for being absent for so long. I will try to keep myself on a weekly schedule on it right now, starting this month. Okay so last time we just added the codes to kill the rats, but after that we don't have much to do, so why don't we move around the level. Of course, moving in the level is not so great when all you can see is a white background, so we'll add some scenery now.

There are several ways of adding a background for a 2D game, such as:

• Adding one big image as a background
• Use several sprite objects that act as scenery together
• Use the tiled background object to create a repetitive background
• Use the tilemap object on a layer

the least appropriate way to create a background is by using one big image as a background, because updating a large sprite is not efficient and causes slow performance, this method is really not recommended. It's better to use several sprite objects to create a level, it's faster and doesn't cause lag in the game and also the group of small parts can be reused in another place to create a new level without the artist have to draw something new.

But, even if that is a good method all the images are different sprites, this means that if you have a few hundred small sprites to create a floor and walls it could still slow the game. In this case you can use the tiled background object to create your level. The tiled background object is a special object for creating repetitive sprites, the advantage is that the tiled background object counts as one object (even if you've made about 100 repeated tiles for a floor). It makes the tiled background object very efficient for repetitive sprites.

The tilemap object is a new-ish feature of Construct 2 created to easily use a tilesheet image, a tilesheet is a collection of sprites in a single image. It also support an external level editor, Tiled which is commonly used as level editor in games. In this tutorial we'll use the tilemap object to create our background.

One thing to note is that the tilemap object fills an entire layer, so it's better to add more layers before working with it. To add a layer simply look at your layer bar and click on the "+" sign, it will add a layer on top of already created layers, remember that the free version of Construct 2 can only create 4 layers. Let's create 3 layers and rename them to: "HUD", "Main", and "Background. To rename a layer, click on a layer name and then click on the pencil icon.

Add a layer

Three layers

Action adventure tutorial part 5: Combat with the enemy

Hi there guys, we meet again in another one of my action adventure tutorial. Last time we've added our rats into the scene and have them move around, now I'm gonna try to keep my promise to finally add the code for combat. What we need for combat is simple, only two things: whether or not the axe is in collision with the rat, and whether or not the axe is swung at that time. If these two conditions are met, then we have our combat.

First, we need to add an instance variable to the axe object. This instance variable will be used to determine whether the axe is swung or not. So add an instance variable and name it "swung", make the type to be a boolean and then we're done. More informations about instance variables are in the previous chapter. I don't think I have introduced the boolean type yet, a "boolean" is a type that can only be one of two values: true or false. A boolean can only be used in an instance variable not a global variable, and usually used to check the state of an object (e.g if a lamp is turned on, if a button is pushed, or if a door is unlocked). The default value is false, and we'll leave it at that.

Next, we're going to handle collision detection between the axe and the rat. Just like the name suggests, a collision detection is a technique for checking if an object (in this case, a sprite) overlaps another object, the overlapping can be as simple as two objects "bumping" each other, or  one object totally overlaps on top another. But do you know which part of a sprite is actually checked for collision?

To find out, double click on the axe to show the edit image window. On the left side of the edit image window, you'll see several small icons for different uses. Click on the bottom icon to reveal the collision polygon.

Collision polygon icon

Collision polygon is a shape formed by a series of red squares linked together by blue lines. Everything inside this shape is collide-able, by default Construct 2 will try to make the collision polygon as close to the image used by the sprite, by ignoring transparent pixels. But if it can't do that it will default the collision polygon to a square. If an animation has more than one frame, each of them will have their own collision polygon.

Collision polygon default

 You can change the shape of the collision polygon by click-and-drag on the small red squares, and make it to only fill the part of the sprite you want it to collide against other objects. For our axe object we will modify the collision polygon in the three animations: "AttackRight", "AttackUp", "AttackDown", and make them fit in the axe, remember to modify all the frames.

Collision polygon edited

After that's done, close the edit image window and open the event sheet, because it's time to code. The logic to our combat is this: if the axe's collision polygon hit the rat's collision polygon while the axe is swung, then there's a hit. So, create a new event and go from axe -> Is overlapping another object -> choose rat. And on the same event add another condition: axe -> Is boolean instance variable set -> swung. Next up is the action, go from: rat -> Set animation -> fill animation with "Destroyed".

Destroyed animation

Action adventure tutorial part 4: Make an enemy

Hi there everyone, it's been a while since I last wrote a tutorial here. Well, I was on a vacation after Eid so I can't write anything. But now I'm back and we can continue the tutorial! Last time we added attacking animations to our hero, now let's give something for our hero to attack.

Go to our browserquest-images -> img -> 2 folder, and we'll pick an enemy from there. For now, let's use a rat as an enemy because it looks like it's easy to kill and fits for our first encounter. So, open our project again if you haven't already and insert a new Sprite object called "rat". We'll use the rat.png file from the folder we just opened, import the frames from sprite strip like we usually do. For this spritesheet there are 6 horizontal cells, and 10 vertical cells.

After you split it correctly you'll get a few animations divided like this:

• Idle / default animation: one frame, the first frame on first row
• Destroyed animation:  three frames, starting from second frame on first row
• Attack right / left animation: five frames, second row
• Walk right / left animation: four frames, one from second row and three from the third row
• Sniffing right / left animation: two frames, fourth row
• Attacking up animation: four frames, fifth row
• Walking up animation: four frames, sixth row
• Sniffing up animation: four animations, seventh row
• Attacking down animation: four frames, eight row
• Walking down animation: four frames, ninth row
• Sniffing down animation: four frames, tenth row

add the animations of the rat object like I laid out above, and you'll get the animations like these:

Enemy's animations

Some of these will be looped (like walking animations), while some aren't, and probably they'll have different speed. So for each of these animations, apply these changes to their properties:

• Default animation: speed 5, no loop
• Destroyed animation: speed 9, no loop
• AttackRight animation: speed 15, no loop
• WalkRight animation: speed 15, loop
• SniffingRight animation: speed 5, no loop, repeat count 3
• AttackUp animation: speed 12, no loop
• WalkUp animation: speed 12, loop
• SniffUp animation: speed 4, no loop, repeat count 3
• AttackDown animation: speed 12, no loop
• WalkDown animation: speed 12, loop
• SniffDown animation: speed 4, no loop, repeat count 3

and we're done with the animations, next up we'll move our rat around. We can move it by using 8 Direction behavior like our character, we just move it using code instead of default keyboard control. Also remember that we only have animation for moving in four directions, so we have to write the code to make sure our rat doesn't move diagonally.

Add the 8 Direction behavior to the rat,and change both the "Set angle" and "Default controls" to no. Then we'll switch to the event sheet, before we move the rat it must first make a random decision about where to go: is it to go left, up, right, or down? Construct 2 has an expression to randomly select a set of options, called "choose". For now add a new event to compare the rat's playing animation, if it's the Default animation then we'll start randomly choosing a direction.

Action adventure tutorial part 3: Time to attack!

Hi everyone, welcome back to my Construct 2 action adventure tutorial! Previously, we have made our character to move around the screen. But we can't call our game an action adventure without some action in it, right? So, this time we're gonna add some fight to our game.

Just like before, we're going to add some more animations to our character, this time it's attacking animations. So add three more animations: AttackUp, AttackRight, and AttackDown and then give each animations their respective attack frames from the clotharmor.png file that we have been using. There are five frames in the attacking animation.

Attack animation frames

After that, we're going to play the animation by pressing a certain key on our keyboard according to which direction our character is facing. Let's make the "Z" key as our attack button. To play the attack animation according to our character's direction, we're gonna compare it with the currently running animation. If it's Up or MoveUp then we play the AttackUp animation, if it's Right or MoveRight then we play the AttackRight animation, and the same goes for the Down and MoveDown animation.

Alright, first make the event Keyboard On Z pressed just like what we did with other animations. Now I'm going to explain to you about sub-events. Sub-events are basically an event inside another event, these events (and its actions) are only run when its parent event's conditions are met. Parent events are the events from which sub-events are from. There's no limit on how many sub-events an event can have (sub-events can also have their own sub-events) but for readability's sake, it's not recommended to have too many sub-events.

To create sub-events, right click on the event you want to create sub-events from and choose Add -> sub-event. You can also press "S" on your keyboard as a shortcut.

Adding a sub-event

After you create your sub-event, an Add event window will pop up. This is the same as when you're adding a normal event. For now we want to see if a certain animation is playing, so double click our character and then select the Is playing condition. After that an empty textbox will appear, enter it with the name of an animation we want to check, for now it's "Down".

We don't want to check for just a "Down" animation, but also a "MoveDown" animation. So right click on that sub-event we just create, go to Add -> Add another condition (the shortcut is "C" button). Adding a condition is similar to adding an event, but instead of making new events we're modifying an existing one. For now follow the same steps as before and check whether or not "MoveDown" animation is playing.

Action adventure tutorial part 2: It's time to move!

Hi there everyone, welcome back to my series of tutorial where I guide you into making an action adventure game. Last time, we added our own character into the layout and I explained to you quite a lot about the Sprite object. This time we're gonna try to move our character.

Before, I wanted you to keep two frames for each animation. We're using this for the idle animation where only part of the character moves. I'm going to show you how but first, we're going to test our game as-is so that you know what change later. Press the run layout button on the upper left corner of the screen to test your current build. Construct 2 will test your game on your web browser.

The run layout button

after you test your game you'll notice that our character moves his arm up a bit and then stop. Why is this? Well, we only have two frames for each animation and that's it. That's why the animation automatically stopped after it reach the last frame. But that's not what we want, we want the idle animation to loop forever. How do we do this?

First, double click on your character to open the edit image window again. Look at the left side of the screen, you'll see the properties bar for this animation. By default, the Loop property is set to No, change this to Yes to make this animation loops.

Animation properties

This property is only for one animation, if we want the rest of the idle animation to loop then we have to change their properties as well. To change it, click on each animation name on the Animation window and change their properties. Run your layout again and now you'll see that the idle animation have looped infinitely.

But one thing seems a bit off, the animation runs too fast. We don't want our character to move his hand that fast when he's doing nothing, so let's slow him down. We do this by changing the Speed property on the animation's property bar. By default, the value is 5, change its value to 2 and run your layout again. You'll see that the idle animation has slowed down.

It's great that we have a working animation now, but we don't want a game where the character is standing still all the time, right? We're going to add some movement but before that, we'll need to add the input device first. Construct 2 supports 4 method of inputs:

1. Mouse
2. Keyboard
3. Gamepad
4. Touch

For now, let's add keyboard support to our game so that we can play it using our keyboard. Right click on the layout and insert a new object, after the insert new object window opens scroll down until you see the Input category. You'll see the 4 input objects I just explained, add the keyboard object to our project. Another way of inserting an object (beside pressing the insert button) is to double click on it. Try double clicking on it.

You'll notice that unlike the Sprite object, nothing seems to be added to the layout. This because the Keyboard object is different than the Sprite object, Sprite object gets added to the layout we open and see on the screen (also called, the "active" layout), while Keyboard object gets added to the entire project so other layout can use it as well. We'll cover the creation of another layout when we get to it.

Basically, now we can use the Keyboard to move our character by changing its X and Y position, but there's an easier way to do that. Construct 2 comes with a bunch of built in Behaviors,  Behaviors are collection of small features that we can use for our games. Behaviors are also can be written by the communities to add some custom functionality to our game. Some of the features that Behaviors provide are movements.

Our first quest! Making action adventure game, part 1

Hi there everyone, and welcome to my blog about game development. Here, I will teach you step-by-step on how to make your own video game. I will mostly use Construct 2 as my tool of trade, but sometimes I'll write something not tool specific.

In this series of tutorial I will make a 2D action adventure game, pretty much like The Legend of Zelda series, but perhaps a bit more simplified than that. I will use sprites and graphics available from open game art (http://opengameart.org ) to make sure I don't break any ownership.

So to start, open up Construct 2 (if you haven't downloaded it, you can visit Scirra's website) and create a new project (from File -> New). If this is your first time opening Construct 2, you'll see a lot of templates to get you started. For now click New empty project and open it.

Templates to work on

You'll see a big white part in the middle, and some UI on the left and right side of the screen. The white part is your layout, it's the place where you design your game. Because Construct 2 is a drag-and-drop style game making tool, what you see in the layout is what's gonna appear in your game. You can move the scroll bar on the side and bottom of the layout to move around, mouse scroll wheel do the same for scrolling vertically.

An empty layout

To zoom in or out, hold down ctrl and then scroll wheel. It will make it easier to see your game in a bigger picture. While you zoom out, you'll notice that there's a stripe / dash on the layout. That's the window size of the game, that's the limit on what your player will see when they play your game. So any objects outside of that won't be seen (at least initially).

We're going to add something to our layout, but before that we'll download the asset first. As I've said we'll use graphics available from Open Game Art, so go to this link and download the browser quest graphics (we only need the browserquest-images.7z file). Save the file somewhere you can find easily.