Cocos Creator Tutorial: The Cannon 2, Part 3

Making it Pretty

7 min readJun 28, 2018

Introduction

This is part 3 of my little tutorial on Cocos Creator. In part 1, we got our cannon set up. In part 2, we started spawning meteors and shooting at them to destroy them. In part 3, we’re going to touch up our project by:

Adding a cool background image
Adding a particle trail to our meteors
Adding an explosion animation when meteors are shot
Adding a sound effect when meteors are shot

Let’s get started!

Adding a Cool Background Image

Adding a cool background image is very important, but just about as simple as it gets. Just get yourself a cool image (I got mine from Opengameart here. All the resources being used here are from Opengameart, actually). Then move it into your image, and drag it into the node tree. That’s all you have to do:

Adding a Particle Trail to Our Meteors

Updating our Meteor prefab

First, we’re going to modify our meteor prefab––well, we’re going to create a new one––so that we will be able to add the particle trails to it later. Our new prefab is not going to just be the meteor image; instead, it is going to be a node with both the meteor image and the particle trail as its child nodes. Let’s make it:

With the game prefab open, create an Empty Node. You can do this by going to “Node Presets > Create Empty Node” in the top menu bar. This node will become our new prefab.
Then, drag the Meteor image (what was previously our entire prefab) onto the new node so that it becomes its child element
Drag our new node––with the meteor image as a child element––down to the file navigator to create a new prefab. This will be our new meteor
Finally, give our new node all the same components as our old meteor node (script, RigidBody, and collider) and then delete the old prefab

And that should be it! Set the Game’s “meteor” property to our new meteor, and if you go back into your game everything should look and act the same.

Add the Particle Trail

Cocos Creator conveniently comes with a built-in way to make a particle trail. If you’re looking to get a little more fancy, Apparticle works nicely as well, but for this tutorial I’m just going to use the built in version.

To create a “ParticleSystem” node, select “Node Presets > Create Renderer Nodes > Particle System Nodes” in the top menu bar. Make sure it is a child of our root node and that it has a position of (0, 0) so it’s right in the middle of our node. Also be sure that it appears above the meteor image in our node tree, so that the particles don’t cover our meteor.

That’s all you need to do to make the particles! You should be able to open up your project and see them in action:

Pretty cool, huh? Now you can feel free to touch up the particles as you wish. If you check the custom box, you’ll be given a bunch of options for your particles. This is what I came up with to give my meteors a pink/purple trail (to match the explosion animation––which I’ll be doing right now)

Add Explosion Animation

Creating the Animation Prefab

Now let’s add an explosion animation for when our bullets collide with our meteors. Again, just go over to Opengameart and grab one.

The way I did this was buy creating a Cocos animation using the individual images I got from Opengameart. It was a long and manual process, but it helped me learn how to create Cocos animations so I’m going to walk you through that entire process.

So, you’ve got your images:

In order to make your animation, go to the “Timeline” pane in the Cocos editor. You can find this right next to “Console” in the window below the scene editor. When you press “Add New AnimClip,” you will be prompted to create a .anim file. This is going to become our animation.

Now create your prefab. Make an empty node and drag it to your file navigator to make the prefab. Then, add an Animation component to your new prefab and make that play on load is checked.

In the animation timeline, you should now be able to edit your explosion animation. Select “Add Property” in the timeline pane and choose “cc.Sprite.spriteFrame” as the property type. If you don’t see that option, make sure (1) you’ve added the Sprite component to your animation and (2) you’re editing the right animation.

When you press the “+” next to the “cc.Sprite.spriteFrame” property in your timeline, you should see a diamond appear like so:

Now, move that diamond to the right so that the red bar isn’t at the same position as it, and press “+” again. Another diamond should appear.

You can think of these diamonds as “states” of our animation. We’re going to add one for each image in our explosion animation, each with a different sprite, so that when they are played sequentially the animation appears.

The way you add the sprites to the diamonds is very simple. Simply select the diamond in your timeline so that it turns white, and then drag your image into the “Sprite Frame” property in the properties pane. The image should then appear beneath your selected image.

And do that for every image you have. It’s a little tedious, and it may help if I note that you don’t need to create the diamonds. Just set the red line to a position (which you can do by dragging the white triangle above it) and then drag your image to the “SpriteFrame” property. Make sure you know how long your animation will be beforehand! Somewhere around 1/3 of a second is a good length.

here’s what my finished timeline looks like:

By pressing the “play” button in the top left, I can observe the animation in action in my scene editor.

And that’s it! Now we have our animation.

Show the Explosion When Our Meteor is Destroyed

There are 3 steps involved in displaying our animation on the screen. See if you can do them on your own before I show you my code:

Create an explosion property in Game.ts and set our new animation prefab to it
Create a function createExplosion() in Game.ts that displays our explosion at a location
When a collision is detected in Meteor.ts, call createExplosion() to create an explosion where the meteor used to be

Now let’s look at the code. This is what I added to Game.ts:

And this is my new Meteor.ts, in its entirety:

And that’s it! We are now doing explosions.

Adding Sound Effects

The last thing we’re going to do is make a sound play when the meteor is destroyed. Go ahead and grab a sound file and let’s get started.

The way this is done is just a matter of creating a property for our sound file and invoking a method to play it. Very simple. Just add a property to your Game.ts file:

@property(cc.AudioClip) explosionSound: cc.AudioClip = null

And then add this line of code to createExplosion():

cc.audioEngine.playEffect(this.explosionSound, false)

And voilá! We are now experiencing sound.

Wrapping Up

That’s it for part 3, where we touched up our project by adding a background, sounds, explosions, and particles. In part 4 I will go over more advanced Cocos Creator stuff that you have to worry about like memory management.

As always, the full code for every part is on Github.