Prefab + animation

Cocos Creator
#1

Greetings everyone.

I am using Cocos Creator 1.7 and creating some prefab assets. Inside one of these prefabs, I want to add an animation node so every prefab instance would use the same animation. Is it possible?

In my case, this way would be better than assigning an animation node from the scene node tree.

Thank you in advance.

Oh, I forgot to mention: I have already tried the “Add component” button while in prefab editor and assigned the animation there, but I don’t know how to access that animation item.

#2

hey man ,
you can attach an js script component to the prefab and then you can get your animation component in that js file.

cc.Class({
    extends: cc.Component,

    properties: {
       
    },

    // use this for initialization
    onLoad: function () {

        //getting the animation component
        this.animationCmp = this.node.getComponent(cc.Animation);



    },

    //method for playing the animation 
    playFooAnimation : function() {
        this.animationCmp.play("foo");
    },

    // called every frame
    update: function (dt) {

    },
});

temp.zip (523.2 KB)

i made this test project for you , its just an spirteSplash moving around with animation on click button. i hope it helps somehow :wink:

-michio

#3

Thank you my friend. I am wondering if the problem is because I am using TypeScript, because I have already tried that and still get a null reference inside onLoad(). Here is my code:

const {ccclass, property} = cc._decorator;

@ccclass
export default class LabelText extends cc.Component {
    private animated: boolean = true;
    private red: number = 0;
    private increment: number = 1;
    private animation: cc.Animation = null;

    onLoad() { 
        this.animation = this.node.getComponent(cc.Animation)
        cc.log("Animation: " + this.animation);
    };

    start() { 
    };

    pauseAnimation() {
        this.animation.pause();
    };

    resumeAnimation() {
        this.animation.play();
    };

    toogleAnimation() {
        this.animated = !this.animated;

        if (this.animated)
            this.resumeAnimation();
        else
            this.pauseAnimation();
    };

    update(dt) {
        this.red += this.increment;

        if (this.red === 0 || this.red === 255)
            this.increment = -this.increment;

        this.node.color = cc.color(this.red, this.red / 2, this.red / 3, 255);
    };
}
#4

hmm , not sure about typescript , im using js for scripts , but it must be ok.

are you sure you’re attaching the script component to the right node?

#5

Yes, because I can access all other things.

Another detail that I noticed is that you did not use a prefab in your temp project. That is another key difference, I guess.

#6

hmm , i made another project with prefabs , can play animation in prefabs too :

temp.zip (484.4 KB)

i don’t know TypeScript , this project is with js so you have to do the rest yourself :wink:

#7

Thank you again for your good will to help. I really appreciate it.

Just to clarify: you assigned the animation component after creating the prefab (like I did) or you assigned it to the asset before turning it into a prefab?

#8

i assigned the animation component before creating the prefab , but i don’t think it matters , you can save your prefab and modify it , but i didn’t try to add component to prefabs.
usually i make my nodes and it’s script and then turn it in to prefab.

#9

do you want to test adding component after prefab creation too??

it seems fun and helpful for me too :wink:

or you made your way out of it?

#10

I ended creating a new project from scratch and it worked. I have no idea why it was not working before, as the code from the prefab was copied and pasted into this new one.

Anyway, I agree with you: it is helpful because it keeps encapsulation strong and favours component-based development. But I am not sure how the framework handles these resources. If it duplicates these animation resources, than it could cause some memory-usage problems, I guess.

#11

glad to hear you’re up and running again :wink:

1 Like