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.