Platform-Style Video Games with Construct

Creating Animated Visual Effects from Spritesheets

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 visual special effects from spritesheets.

Keywords

  • Construct 2
  • Animation
  • Spritesheets

About this video

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

Video Transcript

Lee Stemkoski: In this video, we’re going to provide some visual feedback for the player whenever their character interacts with one of the various objects in the scene. This will include some sparkle effects whenever Jack the Koala collects one of the various items throughout the level, including coins, hearts, clocks and keys, and the sparkle effects will be colored based on the object which is collected. In addition, we’ll introduce an explosion or a smoky effect that will appear whenever an enemy is destroyed.

To begin, let’s open up our project from last time and we’ll start by creating some sprites. There’s really two ways you could create special effects, either with a sprite sheet or a sprite strip using an animated sprite, or you could use a particle effect as we did for the bricks. For simplicity this time, we’ll use the sprite strip approach. To begin, let’s right click on the layout area and Insert a new object. This will be a Sprite. We’ll name this sprite Sparkle. This is going to be accomplished with a sprite strip. So in the Animation frames window, let’s right click, choose Import frames From sprite strip. And in the Jumping Jack assets folder in the sprites sub folder, there’s a folder called effects. And we’ll start by selecting the sparkle-red effect. You might notice this one has eight rows and four columns. That’ll be important to set this up. Click on Open.

When importing the sprite strip, horizontal cells, there were four images going across the image. And vertical cells, there were eight rows going up and down. We’re gonna choose replacing entire existing animation and click OK. Click OK again, and it’ll split that image up into smaller images for us. Since it was a 4 by 8 image, there are 32 frames. So the first thing we want to do is actually change the animation speeds. This goes a little bit faster. It was changed the speed to 32. That way it’ll be over in approximately one second. And we’ll leave Loop set to No. The sparkle will happen only one time.

Now we’re going to include a lot of sparkle colored effects. So let’s change this animation name. Let’s rename it to Red, and we’re going to import additional animations with different colors. Let’s right click Add a new animation. Let’s call this one Yellow. Click on the animation we just created. As before, right click in Animation frames, Import From a sprite strip. Choose sparkle-yellow.png. Horizontal cells going across, that’s 4. Vertical sales going up and down, that was 8. Check the box to replace the existing animation. As before, change the Speed to 32.

Right click, we’ll add an animation. Let’s make this one Blue. Click the Animation frames window, right click, Import frames From sprite strip. We’ll choose sparkle-blue this time. Horizontal cells is 4, vertical sales is 8. Check the box and press OK. And change the Speed to 32. One more time. We’ll right click and Add an animation named Violet. Click the Animation, right click in Animation frames, Import From sprite strip, sparkle-violent. 4 horizontal cells, 8 vertical cells. Replace the existing animation and click OK. And change the speed to 32.

That’s all we need to do to set up the image-based animations. We’re going to move this out into the margin area because we don’t want to see this on the screen when the game begins. We also want to add a behavior. We’re going to add the Fade behavior, so it fades out when it’s done. So in Properties, click on Behaviors, we will add the behavior Fade. In this case we do want it to be active at start. After the sparkles appear, they will start to fade out as they go through their animation.

Let’s also right click and create another new sprite. So right click, Insert a new object. This will be a sprite called Explosion. Once again with the Animation frames. Let’s right click and Import frames From a sprite strip. This time I’d like to choose explosion-gray. You might be able to notice there’s six images across and six images down. Open the gray image, change a number of horizontal cells to 6, vertical sales to 6, replace the existing animation. All right. And we’ll change the animation speed to 36. Again, so it’s finished in one second. I’d like to change the name of this animation as well, but in this case, not to the color of the animation, but rather to the corresponding enemy.

In this case, we want this explosion animation to appear once the fly enemy is defeated. So I’m going to rename this animation to Fly. Let’s right click in the Animations window and add a second animation. This one will be called Slime. Click on that animation name and in Animation frames, let’s right click and Import frames From a sprite strip. This will be the explosion-pink. There are six horizontal cells, six vertical cells. Check the box to replace the existing animation and click on OK. We’ll change the animation speed to 36 and we’re done with this animation. We can close this with the x and again, move it into the margins. We don’t want to see this at the beginning of the game. The next thing we need to do with the explosion, just as we added fade to the sparkle, we want to add Fade behavior to the explosion as well. So let’s click on Behaviors and we’ll add the behavior of Fade.