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:
- Mouse
- Keyboard
- Gamepad
- Touch
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.
Focus on our character by single click on it, and see the left hand side of the screen. You'll see the properties for this object. Look for Behaviors section and then click on the blue Behaviors link.
 |
| Behaviors section |
after that you'll open the Behaviors window, this is where you can see all the Behaviors that have been added to this object. By default it will be empty because we haven't added any Behaviors yet.
 |
| Behavior list |
Let's add our Behavior. Click on the plus sign on the window to open the list of available Behaviors. Scroll down until you see the Movement section, you'll see a Behavior called 8 Direction. Click on it and then press the add button.
 |
| 8 Direction Behavior |
This Behavior allows you to move in 8 directions: up, down, left, right, and all the directions between them. This is useful if you want to make a top-down style game like an old-school RPG, or an action adventure game like what we're making. After you add it, you'll notice that the 8 Direction behavior is now added to the Behavior window. It's because this Behavior is now added to the character object. Close the Behaviors window by clicking on the red x button on the upper right corner.
If you see the character's properties bar on the left, now there are properties for the 8 Direction Behavior. Every Behaviors may have their own properties and they are shown on the properties bar of the object they're added to. This Behavior have properties like Max speed, Acceleration and Deceleration, but the one that we need to pay attention to right now is the Set angle property.
 |
| 8 Direction properties |
This property will automatically change the angle of our object as we move it around. This is useful when we make a game where we rely on rotation to change the direction our character is moving, like a 2D shooter where we view the game from directly above our character. But we already have our animation for when our character moves to other direction so we don't want to change its angle. Change the Set angle property to No.
Run your game now and now you can move your character around with keyboard's arrow keys. This is because the Default controls property of 8 Direction Behavior was set to Yes, enabling us to control the movement with arrow keys. And we can move our character to all 8 directions, it's because the Directions property was set to 8 directions, if you change this property you can limit the movement of our character.
One thing is strange, though: our character doesn't change animation. It will always look at right no matter where you move it. We can fix it by first adding movement animation to its animation list. What we want to do is this: show the correct movement animation when our character is moving, and show the idle animation when our character stopped moving.
So for now let's add three more moving animations: MoveUp, MoveRight, and MoveDown. Just like previously, we add animation frames from the clotharmor.png and delete the frames that we don't need. We also want to make all these animations to loop, so change the Loop property on each of the animation properties.
 |
| More animations |
 |
| Walking frames |
After that you can close the image edit window and let me explain about event sheet a bit. Event sheet is a visual programming style that Construct 2 uses. Event sheet eases the game development process because you don't have to deal with complicated programming commands, instead you just tell what object to do which action at what time. To make it clear, let's go to the event sheet to get our hands on to it.
 |
| Event sheet tab |
So after you go to the event sheet tab, you'll see a blank space of something. It's empty because we haven't add our events, so let's do that. Right click on the blank space and select Add event and you'll see a window with a list of objects from which we can make events from. The System object is there by default, so that we can make game-level events and not from objects we add to our project.
Right now, double click on Keyboard. You'll see a list of events that the Keyboard object can do. Double click on the On key pressed event. This event will let our game know to do something when a key is first pressed. You'll see a <click to choose> button, this button is used to choose which key to watch for. After clicking that button, press the right arrow button. Click OK and then Done. You'll see that you've added an event to the empty event sheet.
 |
| On key pressed event |
 |
| Our first event |
Okay, after this we're gonna tell the game what to do when we click the right arrow. What we want is to change the animation to MoveRight, so let's do that. Click on the Add action link, and you'll see a window similar to when you add an event. Double click on the character object, and select Set animation action.
 |
| Set animation |
This action will change the object's animation to the one we want. Double click on it, and on the animation column that appear next, fill it with "MoveRight", and click Done. You did it! You told the game to change the animation based on user input. Repeat this for the rest of arrow keys, but for the left arrow key make it change to "MoveRight" animation. Your event sheet will look like the image below.
 |
| Movement event sheet |
I told you that we'll reverse the animation when the left arrow is pressed, so let's do that. Click on the add action link on the Keyboard On left arrow pressed event, and double click on character. Scroll down and look for the Set mirrored action. Double click on it and set it to Mirrored. This will flip the image horizontally.
 |
| Set mirrored |
One more thing we need to do is to "unflip" the image when we move right. Because if not, our character will move backward when we move it to the right. So, do the same thing we just did to the on right arrow pressed event, but we will set the character to Not mirrored. Your event sheet will look like the image below.
 |
| Our event sheet |
And that's it, try to run your game now and our character now moves around just like we want it. If you don't like how it looks like because we only handle 4 directional movements, you can change the 8 Direction Behavior's properties to only allow movement to 4 directions. If you want an additional challenge, you can try to figure out how to make the character change his animation to the idle animation when he stops walking.
Well, it's been a long read, longer than I thought. If you want to see the source code, you can download it from my Google Drive here. If you like what you read here, then why don't you support my Patreon to help me write more awesome tutorials like this one? Peace out!
Tidak ada komentar:
Posting Komentar