Hi there everyone, happy new year 2016! I know I haven't been so active in the last one or two months, and I'm really sorry for that. I'm trying to make it up this year by making tutorials regularly (hopefully). Now, usually I'll continue from where I left off, but I think I'll start this year with a smaller tutorial. Hopefully this will kick my habit back up to writing more tutorials.
Okay, so let's start with making a simple tutorial: Waypoints. What are waypoints? They are small points that are positioned in your game for an object to follow. The objects are usually enemies that need to follow a certain route, and they follow these waypoints in order. There are several genres of games that can use this AI method in them, for example a shmup game can use this to make the route for enemy ships, an RPG can use this to make an enemy patrol system, and many others.
Let's start with an empty layout with a blue square for our player. For the graphics in this tutorial, I'll only use placeholder-worthy sprites, because I'll try to focus more on the code behind the game than the presentation. You can always change the graphics to fit your game later on. Resize it to 64x64 and add an 8 Direction behavior to it, because we want to move it around.
And then we'll make our enemy. The same as our player, we'll make it as a simple 64x64 sized square, just coloured it red now because we want the enemy to look scary. Then add a number instance variable named "targetPoint" to the enemy, this instance variable will hold the ID of the next waypoint this enemy must go to, this value will change to a new target after the enemy has arrived at the target waypoint. Don't forget that we want the enemy to move around so we'll need a behavior to do that, so add the bullet behavior and change the speed value to 200.
Jumat, 08 Januari 2016
Jumat, 13 November 2015
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
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
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
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.
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 |
Kamis, 24 September 2015
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.
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.
Kamis, 10 September 2015
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.
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
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.
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.
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.
Kamis, 03 September 2015
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:
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.
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
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 |
Selasa, 04 Agustus 2015
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 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.
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.
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".
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 default |
 |
| Collision polygon edited |
 |
| Destroyed animation |
Rabu, 29 Juli 2015
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:
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:
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.
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
 | |
| Enemy's animations |
- 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
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.
Langganan:
Postingan (Atom)