We’d love to hear from you. Whether you have a question that you’d like us to answer as part of our FAQ,  you’ve identified something that just doesn’t quite look right in one of our tutorials, you have a business opportunity or for any other reason, please use this simple form to contact us.

We’ll do our best to provide a prompt response.

Like what you see?...pass it on!

Animation

Introduction

Cocos Creator has pretty powerful animation tools built in. In this tutorial we are going to look at those capabilities, showing how to create animations.

Creating an Animation

Let’s jump right in a create our first animation. I have multiple individual frames of animation like so:

Animation Frames - Cocos Creator - Devga.me Tutorials

Drop the sprites into your game’s assets. Next create a Sprite node and set it’s graphic to the first frame of our walking animation.

Sprite Node - Cocos Creator - Devga.me Tutorials

Now it’s time to create an animation. With the sprite still selected, switch to the Timeline panel and click the Add Animation Component button… which predictably enough, adds a Animation Controller to your selected node.

Timeline Panel - Cocos Creator - Devga.me Tutorials

Now click Add New AnimClip:

Animclip - Cocos Creator - Devga.me Tutorials

A popup will be displayed asking you to name your new animation. I called mine walk.anim and saved it in a folder called animations. Finally click the Edit button to begin editing our new animation:

Edit new Animation - Cocos Creator - Devga.me Tutorials

We are now going to add a property to animate, click the Add Property button. Cocos will analyze the node you’ve got selected and show you an applicable list of properties that can be animated:

Animation Properties - Cocos Creator - Devga.me Tutorials

In this case we are interested in changing the spriteFrame as we advance the timeline. Select cc.Sprite.spriteFrame.

Now click the + icon and you will see an initial key frame was added in the timeline at the 0 second mark:

Sprite Frame - Cocos Creator - Devga.me Tutorials

Left click in the timeline to advance to the 0:05 mark, then click the + again to create another keyframe:

Keyframe - Cocos Creator - Devga.me Tutorial

Now drag the second frame of animation to the sprite frame property of our sprite.

sprite frame property - Cocos Creator - Devga.me Tutorial

Now repeat for all 6 frames of animation, then result should look like this:

Animation Frames - Cocos Creator - Devga.me Tutorial

Be careful when dragging individual frames to the sprite frame property not to hover over the timeline as it has the nasty habit of changing the selected keyframe! Now that our walk animation is defined, can set it to loop infinitely when done playing. Select Wrap Mode and choose Loop:

Loop Infinitely - animation - Cocos Creator

You can now preview your animation using the VCR style controls:

VCR style controls - Cocos Creator - Devga.me Tutorials

The animation is probably way faster than you’d like. In this case simply modify the speed value, try 0.3:

Animation Speed - Cocos Creator

This value can easily be changed on the fly in code. While we are here, let’s show how you can call some code during an animation. Now select about the midway point then click the insert event icon:

Event Icon - Cocos Creator - Devga.me Tutorial

This will add a little white marker to the timeline:

Animaton marker - Cocos Creator - Devga.me Tutorial

Double left click this and it will bring up the following (not fully translated dialog):

Editor Window - Cocos Creator - Devga.me Tutorial

Put the name of the function you want to call. If you have parameters to pass in, they can also be added here. The non-translated button simply adds another function call. I put halfway in the function text box. Now attach a new script and implement the halfway() function like so:

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
    halfway(){
        console.log("Halfway through animation");
    }
    start () {

    }
}

This function will then be called when that marker is reached. This is useful for synchronizing to an animation, such as playing a sound effect halfway through a shooting animation.

Now, and this part is tricky and catches me up all the time… be sure to save your animation! Click the Edit button again to signal that you are done working on the animation. This will prompt you to save… do so.

Save Animation - Cocos Creator - Devga.me Tutorial

Now drag your newly saved walk animation over to the Default Clip section of the Animation component. Also click Play on Load while you are here, so the animation starts automatically once it’s created.

Animation Component - Cocos Creator - Devga.me Tutorials

If you prefer to start the animation manually using code, you can do so with the following simple code:

    start () {
        this.getComponent(cc.Animation).play("walk");
    }

One thing to be aware of that we didn’t cover in this tutorial, you can animate basically any element of a node using the timeline. We only just scratched the surface of what it’s capable of. You can easily animate attributes like position, scale, rotation, color and much more.

Using code you can easily check the status of an animation. This following code simply waits for the user to press the P key. If the animation is currently playing, we pause it, otherwise start it playing.

If the animation is currently playing, we pause it, otherwise start it playing.
    start () {
        this.getComponent(cc.Animation).play();
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP,(e)=>{
            if(e.keyCode == cc.KEY.p){
                if(this.getComponent(cc.Animation).getAnimationState("walk").isPaused){
                    this.getComponent(cc.Animation).getAnimationState("walk").play();
                }
                else{
                    this.getComponent(cc.Animation).getAnimationState("walk").pause();
                }
            }
        },this);
    }

Sound and Music<<PreviousTable of Contents

Like what you see?...pass it on!

script ends --->