Interacting with Enemy Characters
Try reloading this page, or reviewing your browser settings
This video shows how to create multiple types of animated enemies that move back and forth between two locations.
- Construct 2
- Non-player characters
About this video
- Lee Stemkoski
- First online
- 15 February 2019
- Online ISBN
- Copyright information
- © Lee Stemkoski 2019
Lee Stemkoski: In this video, we’ll create multiple types of enemy characters for the player to attempt to avoid using animations. The enemy characters will behave fairly simply. They’ll patrol back and forth between two points on the screen and we’ll need to create a series of events so that the enemies can interact with the player character. For example, the enemy will be destroyed if the Koala jumps on top of the character. That is to say they collide from above. Otherwise the Koala will lose health for any other type of collision.
To begin, let’s open up our project from last time. And we’ll start off by again, making some space and moving some of these objects from previous video out of the way. And now let’s right click and Insert a new object. This will be a sprite called Enemy. Now this features an animation created for a sprite strip. So we’ll load the image from the Animation frames window at the bottom. Go ahead and right click and in the pop-up menu, choose Import frames From sprite strip. And in the Jumping Jack Assets folder under sprites, there’s a folder called enemies.
And we’ll start by choosing the fly image. It’s a two-frame animation. Sometimes Construct guesses the number of images wrong. There are not four horizontal cells, there’s two horizontals cells, two going across, so make sure these numbers are 2 and 1. Check the box next to replace entire existing animation. Press OK. We also need to change some of the animation properties. For example, I’d like to change the Speed of the animation to 8 so the wings flap a little bit faster and Loop should be set to Yes.
In addition, we’ll create multiple enemy types using animations. So this first animation, let’s right click the name of the animation. From the pop-up menu, choose Rename and we’ll call this Fly. Then with our mouse still positioned over the animations window, right click and Add another animation. This one will be called Slime. Click to select that animation. And once again, we’ll load it in with the Animation frames window. Right click and Import frames From sprite strip. This time, choosing the slime.png image. You may need to change these numbers. Number of horizontal cells should be 2, the number of vertical cells should be 1. Check the box to replace the entire existing animation and click on OK.
And again, for the slime animation, it moves a little bit slower than the fly. So I’ll change the Speed down to 4 and Loop should be set to Yes. When you are finished, we also might want to adjust the collision polygon a little bit. The fly, the slime rather, isn’t that large. So I’ll move some of these vertices down and right click to Apply to whole animation. Not all animations because the fly looks slightly different. When you’re done, press x and we have our fly character.
Now the fly is going to be moving in a straight line back and forth between two other objects. There’s a behavior which moves sprites in a straight line, so with the fly selected, in the Properties panel, let’s click on Behaviors and we’ll add a behavior called Bullet. This is good for anything moving in a straight line. We’ll click on Add. Close that. We need to change a few properties of the bullet behavior. The first is a speed. 200 is really much too fast. Let’s change that to 150 pixels per second. I just want to change Set angle from Yes to No. Set angle would rotate the fly based on the direction it’s moving in, but we always want the fly to be facing in this direction. We might mirror reflect the fly when it’s moving the opposite direction, but we do not want to rotate it. Rotating it to the left would cause it to appear upside down, which is not what we want. If we were to save and run the game right now, fly will move straight ahead.
And once it’s gone, we’ll never see it again. We need to change that. We’d like it to move back and forth to patrol between two points. So let’s close the Preview window and we’re going to add two more objects, two more sprites, which will actually be invisible to the player, but can be used to control where the fly is flying. On the layout, right click, we’ll Insert a new object. This will be a Sprite. We’ll name it MoveRight. Then, click.
Now here, we don’t have a graphic for this, but that’s okay. We’re going to use some of the paint tools to draw a simple image. First, click on the fill tool. I’ll choose a color. It doesn’t really matter which color. Maybe I’ll choose red. Then I’ll click on the paintbrush tool. I’ll change the color to a dark black. I’ll draw an arrow pointing to the right, and this is just for us, the developer, so it doesn’t matter if this is a good picture or not. Once you’re done, go ahead and close this. That’s a very large will make it much smaller, probably 32 by 32.
And now we need to create another object that will indicate when the fly will move to the left. Let’s right click and Insert a new object. Once again, a Sprite. This time with a name MoveLeft. And in the image editor window, we’ll do the same process as before. I’ll use the fill tool to fill this with a red background color. Then I’ll use the paintbrush tool to draw an arrow pointing to the left. When you’re done, click to close, shrink this down to a reasonable size, and each one of these, it should not be visible to the player. So let’s select each one and in the Properties panel, change Initial visibility from Visible to Invisible. It’s important to do that for both of the objects.
Finally, we’ll add some events which caused the fly to change direction every time it hits one of these objects. So let’s go to the Event sheet. We’ll add a new event. This will be an Enemy event, On collision with another object and the object is a MoveLeft object. We want to do two things. First, we want to set the angle of motion to the left, which would be 180 degrees. So let’s add an action, Enemy action. Underneath the Bullet category, we have Set angle of motion. Let’s change that to 180. Next, we’ll add another action. This again will be an Enemy action. Just like with a Koala, when the Koala was moving to the left, we mirrored the image. We’ll do the same to the enemy. So under Appearance, select Set mirrored and change that to Mirrored.
Now we need to set up the same event for moving to the right, a very similar event. Click on Add event, an Enemy condition, On collision with another object. This time, we’ll click to choose and select the MoveRight object. The actions will be similar except we’ll be moving at an angle of 0 degrees. That’s to the right and we will unmirror this object. So let’s add an action. An Enemy action. We’ll choose Set angle of motion first under Bullet. The angle should be set to 0 and we’ll add a second action. Again, an Enemy action. Underneath Appearance, Set mirrored. We’ll change that to Not mirrored. Click on Done.
When these events are finished, we’re ready to test. So we’ll save and run this. What we should see is the fly moving back and forth between those two—invisible to us—arrows so that we can see the fly appears to be flying back and forth. At this point, nothing happens when the Koala interacts with it. We’ll address that next.