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.

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.

 photo image 1_2.png
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

 photo image 2_2.png
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.

 photo image 3_3.png
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:
  • 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.

 photo image 1_1.png
Add a layer

 photo image 2_1.png
Three layers