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.

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

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

 photo image 3_1.png
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".

 photo image 4_2.png
Destroyed animation