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.



To add an object to Construct 2, right click on the layout and select Insert new object. You'll see a lot of objects that can be added to your layout. Graphical object is represented by a Sprite, so select a Sprite and then rename it to "character" and then click insert. Your mouse will become a crosshair with "layer 0" text. This is only to confirm on which layer you want to place the sprite. We only have one layer right now, so left click on your mouse to put it.

Insert a Sprite

After that you'll see the edit image window, this is where you load or edit your sprite. Construct 2 can load sprites from a single image or a spritesheet. the browser quest sprites that we downloaded earlier contains both sprites and spritesheets. But the images we want to load is from a spritesheet. So, right click in the animation frames (the lower window) and select Import frames -> from sprite strip. And then navigate to where you saved the browser quest files, go to img -> 2 and open the clotharmor.png file.

pick the clotharmor

You'll be asked how many cells for horizontal and vertical cells. Choose 5 for horizontal, and 9 for vertical and press OK. You'll see that Construct 2 has split the spritesheet into individual sprites.

Sprite sheet

But the edit image window in the middle is still empty and not showing any sprites, why? Well, it's because that window only shows the frame selected so if you select a different frame than the default (frame 0) the window will show the sprite.

But we don't need this many frames in an animation, we will make 4 animations: right, left, up, and down, each one with the sprite facing at that direction. So in this default animation we'll delete all frames but the ones we need: frame 11 and 12. We delete them by selecting the frames we want to delete and press delete key on the keyboard. You should be left with only two frames in the default animation.

Two frames facing right

Now, we're going to add a new animation. See the animations window on the right side, by default you'll only have the "Default" animation, this is the animation we edited earlier. To add an animation, right click on that window and select "add animation", you'll have a new animation that you can rename. Rename the first one to "Up", and do this one more time for "Down" animation

Now you have the "Default", "Up" and "Down" animation. But it doesn't feel right to have the right facing animation called "Default". Right click on that animation and select rename, rename it to "Right". Clicking on each animation will focus you on that animation, showing the sprites of that animation only.

Now, import spritesheet of clotharmor on each animation and delete the unnecessary frames, just like what you did with the first animation. In the end, you'll have right animation facing right, up animation facing up, and down animation facing down. Maybe you're wondering: "Where's the left animation?", we can "reverse" the right animation so that it faces left, so in this case we don't need a left animation.

Animation window

So now, after we added all the animation let's close the image editing window by clicking the big X icon on the edit image window (the big one). Don't worry, this will not erase your sprite but will add it to our layout. You can now see your image on the layout, and you can move it around using mouse by click and dragging it. The explanation on the Sprite object was kinda long because this object is complex, but all other objects are not like this.

I'm thinking of making the object move by code, but I think that will be a big explanation too, so I'll hold that until our next tutorial. You can download the file of this tutorial from my Google Drive here. If you like what you read here, then consider supporting my Patreon so that I can continue making tutorials like this one. Peace out.