Platform-Style Video Games with Construct

Creating Items with Animation Effects

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 animated items for the player character to collect during the game.

Keywords

  • Construct 2
  • Animation

About this video

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

Video Transcript

Lee Stemkoski: In this video, you’ll add some items for Jack the Koala to collect as he moves across the level. Those items will include coins, hearts and clocks. Each one of these items will have some type of animation to draw the player’s attention and indicate that the items are in fact interactive, and finally, when the items are collected, we’ll need to update the value of the corresponding variable using events.

To begin, let’s open our project from last time. Previously, we’ve added some variables to store the values of how many coins Jack is collected, how much health Jack has, and how much time is remaining, and we’ve also added text objects to display these values. Next, we’re going to add the items for Jack to collect. To begin, it’s very important to change the active layer to the Main layer. We want to add the items to the Main layer, not the User Interface. So in the Layers panel, click on Main, make sure that is selected. Then move your mouse over to the layout and right click and a pop-up menu. Choose Insert New Object. Click once on Sprite and next To name when inserted, we will enter Coin. The cross hairs will appear along with the yellow box indicating we’re adding this to the Main layer.

Click and the image editor window will appear. The coin image is actually an image-based animation, so when he used the animation frames window down here. But unlike the Koala walking animation, for the coin, all the different frames of the animation, the images which when put together composed the animation, they’re all included in one file. And when this happens, the file is called a sprite sheet or a sprite strip. So to begin, in the Animation frames window, let’s right click, the mouse has hovered over that. And in the pop-up window choose Import frames. This time, From sprite strip. In the Jumping Jack Assets folder, in sprite sub folder, there’s an image called coin,png and notice that this image has six smaller images of a coin which make it look like it’s rotating. That number six will be important. Remember that, select the image and click on Open.

Then a window will appear that says Import sprite strip and Construct will try to guess how many smaller images are within the larger image. In this case, it guessed correctly, but if it doesn’t, then change the number of horizontal cells to six. That’s how many images appear across. The number of vertical cells is one. And those two numbers entered. Also, check the box next to Replace entire existing animation and then you click on OK. Ask us if we’re sure and click on OK again. We should see the six frames of the animation. If you forgot to check that box and you see an empty animation frame, you could right click and delete it.

Right? Also, similar to the Koala’s walking animation, we want this animation to repeat or loop, so to set that, click on the animation name. And over in the Properties panel on the left, change Loop from No to Yes. To see what this animation will look like, in the Animations window, right click on the name of the animation and choose Preview and we should see a spinning coin. That looks fine. If you’d like to speed it up, you can close the animation, enter a larger number for the Speed. Might enter eight. But when you’re done, you can click on the x to close this.

Now this appears rather large for our quality collect, so I’ll hover the mouse over one of the white squares on the border. Make the coin a little bit smaller. I might place a coin over here and add a couple more coins as well to create copies of this object. Remember you select the object, hold down the control key, and then click and drag as if you were repositioning the coin. And a copy will appear to peel right off from the original image. So you could add a great number of coins.

We’ll repeat the same process to create additional objects. All right. Click on the layout and choose Insert New Object. Click once on Sprite. Name when inserted, we’ll call this Heart. Click on Insert and click to position it on the Main layer. And this is just a single image, so we’ll use the folder icon from on top. Choose heart.png. Now there’s no animation for this, so we’re all done. We’ll choose the x there, but we do want it to appear animated or to change its appearance in some way so as to draw the player’s attention. One simple way to do this is by adding a behavior.

So with a Heart selected, let’s go over to the properties and click the underlying to blue word Behaviors. The Heart Behaviors list is empty. Click on the plus icon to add a behavior. And underneath them Movements category, I’d like to add Sine. This is a behavior which can make any property of a sprite oscillate. Click on Add and click the x to close this window.

I’d like to create a pulsing style effect like a beating heart. So with the Heart still selected, we’re going to go over to the Properties panel. Under Behaviors, there’s now a category called Sine. Let’s change the movement type from Horizontal, click the dropdown list and change that to Size. The period is how many seconds it takes to go through one complete oscillation of values. Let’s change that number from 4 to 1. And the magnitude is the other important value to change here. This is, in this case is how many pixels different the size is going to be. We only need a subtle effect, so maybe I’ll change this to the number 3. So the size will increase and decrease by three pixels every one second.

All right. To see how this looks, let’s save our project and let’s press Run layout to see what it looks like. All right. And here we have Jack the Koala walking around the level and we should probably change that time from five seconds to something longer, but we can see the pulsing heart and the spinning coins. Excellent. The last object we’re going to add will be our Clock object. So again, let’s return to Construct. Let’s right click on the layout. Let’s Insert a New Object. Click once on Sprite, the Name when inserted, let’s make that say Clock. And let’s click on the Main layer and again, this is a single image, so let’s choose the folder icon. Let’s choose item-clock and then Open. Then x. Now we have our Clock object right next to our Heart.

Once again, I’d like to do an animation. Since I don’t have an image-based animation like we do for the coins, let’s add a behavior to the clock. Let’s click the plus icon. In this case, let’s make the clock tilt back and forth. Since this is a repeating oscillating style movement, we can use the Sine behavior again. So let’s add the Sine behavior to the clock, close that window. And then under the Behaviors extra movement. Let’s change that to Angle. The period, let’s change that to 1 again and then the magnitude, maybe we’ll have that rotate back and forth by five degrees.

To see how this looks, let’s save the project and run that again. All right. A very subtle effect, trying to make it more magnified, we could change that value. Let’s close the Preview window. Maybe it will make that tilt back and forth by 10 degrees. Excellent. We have our animated effects. Our next task is to add events which allow the Koala to collect these objects and change the values of the variables.