Platform-Style Video Games with Construct

Adding a Sprite with Animations

Your browser needs to be JavaScript capable to view this video

Try reloading this page, or reviewing your browser settings

This video shows how to create an animated sprite character that will be controlled by the player.

Keywords

  • Construct 2
  • Sprite
  • Animation

About this video

Author(s)
Lee Stemkoski
First online
15 February 2019
DOI
https://doi.org/10.1007/978-1-4842-4446-3_7
Online ISBN
978-1-4842-4446-3
Publisher
Apress
Copyright information
© Lee Stemkoski 2019

Video Transcript

Lee Stemkoski: In this video, you’ll add the player character that is the character controlled by the player, Jack the Koala. Along the way, we’ll be introduced to sprite objects. Jack the Koala also features different animations depending on whether he’s walking, standing still or jumping. So we’ll learn about image-based animations, and because Jack interacts with his environment by coming into contact with various objects, we’ll also learn about collision polygons. Also, you will add behaviors which is like prepackaged functionality to various objects to simplify development and we’ll add some custom instructions or events to our objects which allow us better control over Jack and we’ll activate animations at the correct times.

To begin, let’s open up our project from last time. Previously, we added a background image, the rolling hills and blue sky and we added a tilemap, a very basic layout, some ground, a floating platform and a stair like structure. Next, in the Layers panel, select the Main layer so that everything we add is added to the Main layer. Then position your mouse over the main layout, right click to bring up a menu and select Insert New Object. This time, for the first time, we’ll be adding a sprite object, the first of many. Click once on the sprite icon and down in the box next to Name when inserted, it will be important to give our sprites descriptive names because we’ll have many of them. I’m going to enter the name Koala and then click the insert button.

As before, the mouse cursor turns into cross hairs and there’s a little tool tip box that says Main indicating we’ll add this sprite at this position on the Main layer. It doesn’t really matter where you click initially because it’s easy to reposition the character later. I’ll click down here, and the image editor window will appear. In this case, the Koala actually features multiple animations. You might notice the image editor window has some extra windows. In contrast, when we added an image for the background, a tiled background didn’t have the animation frames window in the Animations window. We’ll make use of these shortly.

First, we’ll create the standing animation. This only uses a single image. So we can use the folder icon, click on that. And then in our Jumping Jack folder, Assets and the sprites sub folder, there’s another folder called koala. Double click and open that I’m going to choose the image called stand.png and open that. Also, zoom in so we can see it a little bit more easily. Since we’re using multiple animations, we want to give the animations good names. So in the small animations window which appears to the right, right click on default, the name of the animation, select to rename from the pop-up menu that appears and type in the word Stand.

Next, we’ll add another animation. We’ll right click and that Animations window once more. From the pop-up window, choose Add animation. I’ll rename this animation to Jump. Then click on that animation name you just added, and the image disappears or accurately, we haven’t added an image to the jump animation yet. Again, this consists of a single image, so we can click on the folder icon along the top and choose the image called junp.png. Open that. That looks fine. We’ll add one more animation. So go ahead, position your mouse cursor over the Animations window, right click and add an animation. Rename this animation to Walk. And again, click on that animation to select it.

Now the walk animation actually consists of a series of images played one after the other. To add these in, we’re going to go to the Animation frames window down below the main image editor window. Right click in this window and you’ll get a different pop-up menu. Hover the mouse over, import frames and choose from files. We’ll add these one at a time, starting with walk-1. Open that image. Right click again. Import frames from files, walk-2. Open. Right click again. Import frames from files, walk-3. And actually, we’ll do one more. Right click, import frames from files, walk-2. The reason we’re adding this a second time is walk-1 has the left foot of the quality going up. Walk-2 has both feet down, walk-3 has the Koala’s right foot up and Koala needs to put both feet down a second time. That’s why I will add walk-2 once more. So open that.

And we also have this blank image. Image 0 in the Animation frames. We need to delete that. So right click and choose Delete. Now we want to play these images in sequence again and again, so we’ll change some of the animation properties. To do that, in the Animations window up here, click on the walk animation once and you’ll notice that on the left-hand side you’ll see properties of the walk animation. I want to change the Loop property from No, clicking that to get a dropdown, change that to Yes. And to see what that looks like, if you go back to the list of animations, right click on the wok animation and select Preview. You’ll see what the Koala looks like if you play these frames in sequence. It’s a little bit small, but you get an idea of the speed and that looks pretty good, right?

So we’ll close that preview. We’ll close this window as well. And now we have our character. Next, we need to add some functionality to get this Koala to move around the screen.