Clone entity and run animation again and again

So I am getting some data from my api
on getting the first element , I want to run the animation on my entity, again i get some different data and I want to run the animation but with a few different conditions, the conditions work fine, but the thing is that the entity is suppose to stay in its place and the whole animation on second api call , is supposed to run on my cloned entity. I am unable to do that

Here is my code in main “game.js” added to my root component where I get response from my api and trigger the animation

var entity = this.app.root.findByName(‘playing_card’).clone();
console.log(entity,“the cloned entity”);
this.app.root.addChild(entity);
entity.setLocalPosition(86.243, 8.054,-49.547);
entity.setLocalRotation(-94.87,0,67.39);
// console.log(“abcd”);
this.state = false;
let value = data?.result[0]?.runners[0]?.name;
// console.log(value);
this.app.fire(“game:start-card”,value,entity);

second call is the same just that I change name of my variable from entity to entity2 and pass it with my this.app.fire

Following is where i receive my response to this.app.fire

var TweenPosition = pc.createScript(‘game_test’);

TweenPosition.attributes.add(‘duration’,{type:‘number’,default:1.0});

TweenPosition.attributes.add(‘easing’, {type: ‘string’, default: ‘Linear’});

TweenPosition.attributes.add(‘delay’, {type: ‘number’, default: 0});

TweenPosition.attributes.add(‘loop’, {type: ‘boolean’, default: true});

TweenPosition.attributes.add(‘yoyo’, {type: ‘boolean’, default: false});

TweenPosition.attributes.add(‘repeat’, {type: ‘number’, default: 2});

TweenPosition.prototype.initialize = function() {

// create our tween

 this.app.on("game:start-card",(v,entity)=>{

     console.log(entity,"I am so cool");

    this.reset(v,entity);

},this);

// console.log(this.entity,"before");

// this.entity=entity;

// console.log(this.entity,"after");

// handle attribute changes

this.on('attr:duration', function (value) {

    this.tween.duration = value;

}, this);



this.on('attr:easing', this.reset, this);

this.on('attr:delay', this.reset, this);    

this.on('attr:loop', this.reset, this);    

this.on('attr:yoyo', this.reset, this);    

this.on('attr:repeat', this.reset, this);
};

TweenPosition.prototype.reset = function (value,entity) {

console.log(value);

console.log(entity,"I am not so cool");                

// if we are already tweening then stop first

if (this.tween) {

    this.tween.stop();

}

// reset our position

this.entity.setLocalPosition(86.243, 8.054,-49.547);



// create a new tween using our script attributes

this.tween = this.entity.tween(this.entity.getLocalPosition())

    .to(new pc.Vec3(0.013, -1.8, -51.201), 0.5, pc[this.easing])

    .delay(1.0);

this.tween2 = this.entity.tween(this.entity.getLocalPosition())

    .to(new pc.Vec3(0.013, 10, -51.201), 0.15, pc[this.easing])

    .delay(1.0);

this.tween3 = this.entity.tween(this.entity.getLocalPosition())

    .to(new pc.Vec3(0.013, -1.8, -51.201), 0.15, pc[this.easing]);

   

// this.tween2 = this.entity.tween(this.entity.getLocalPosition())

//     .to(new pc.Vec3(0, 10, -28.3), 0.2, pc[this.easing])

//     .delay(1.0);

// this.tween3 = this.entity.tween(this.entity.getLocalPosition())

//     .to(new pc.Vec3(0, 0, -28.3), 0.2, pc[this.easing])

//     .delay(1.0);

    if(value =="Player"){

        console.log("inplayer",this.entity.getLocalPosition());

        this.tween4 = this.entity.tween(this.entity.getLocalPosition())

            .to(new pc.Vec3(0.013,-0.248,-5.02), 0.3, pc[this.easing])

            .delay(1.0);

    }

    else if(value == "Dealer"){

        console.log("in dealer",this.entity.getLocalPosition());

        this.tween4 = this.entity.tween(this.entity.getLocalPosition())

            .to(new pc.Vec3(0.013,-0.248,-31.544 ), 0.3, pc[this.easing]).delay(1.0);

    }

    else{

        console.log("in else console");

        // this.tween4 = entity.tween(entity.getLocalPosition())

        //     .to(new pc.Vec3(-0.013, -2.058,-10.933), 0.3, pc[this.easing])

        //     .delay(1.0);

    }



// only set repeats if loop is false

if (! this.loop)

    this.tween.repeat(this.repeat);



// start the tween

this.tween.chain(this.tween2,this.tween3,this.tween4)

    .start();

@yaustar @Albertos looking forward to your reply

Hi @Harsh_Zota! Do I understand the things below correctly?

  • Your first entity is a clone of this.app.root.findByName(‘playing_card’)
  • You want to play your tween on a second entity
  • Your tween is playing on the first entity again instead of your second entity

yes , I am passing some different parameters to this tween and want the tween to play with those particular parameters

On which entity is the script attached?

It is attached to the “playing_card” entity which I am trying to clone in my code

Alright, I understand the problem. I think I should control the tweens in a manager and not on the entity itself. Then you can replace this.entity.tween with the entity that should play the tween.

Actually I’m a novice in playcanvas as well as javascript so can you please elaborate and also share some references , code or links if any , how should I attach my tween manager and to which script this that…

I’m unable to create an example at the moment.

The manager is just a script where you do the same as you do in your current script. But instead of using this.entity you use entity, where entity is the cloned entity. In your last tween you could use onComplete() function to replace entity with a new clone.

1 Like

okay will try that and update you

So how I am going about it , from my game.js
I am passing the cloned entity to the script where I am running my tween, but then I did not exactly get the use of manager script and to which entity should I attach the manager script

and at the momemt all my animation scripts are attached to the entity I want to animate in the following way

and also in my tween animation scripts should I keep them as this.entity or change it to entity

Sounds like game.js is already a manger script?

It can be any entity, for example the Root entity or the entity that has game.js attached.

I’m not sure why it are separated scripts, but I think you can attach them to the entity that has the manager script attached.

I cloned my entity and it is adding to the root component (i console it and i can see it) but i am not able to see it on the screen

Is it enabled and on the right position?

Yes it is , I am cloning the exact same object but it is not working
So as a trial I tried cloning another object and ran all my animations on that and it worked
I cloned both the objects to the same parent element, one is cloning and the other is not

I’ve made a sample project of what I mean. I hope it’s something similar as you’re trying to achieve.

https://playcanvas.com/project/862089/overview/tween

Thanks a ton , helped me get my work done,
I do need some other help, actually I am trying to add dynamic textures for the clones I create, like one texture to first one and other to second and so on…
The thing that I am facing it , I am able to to apply the texture to the entity , but when the second entity comes in the texture of second entity applies to both the entities , whereas I want the texture of first to stay and second texture to apply only on second one
Thanks

Here is my script that adds the texture

 var AddCard = pc.createScript('addCard');
 var texture;
AddCard.attributes.add("textures", {type: "asset", assetType: "texture", array: true, title: "Textures"});
// initialize code called once per entity
AddCard.prototype.initialize = function() {


// console.log();

this.app.on("game:setCard",(value,v,entity)=>{

   

    this.reset(value,v,entity);  

},this);};
 AddCard.prototype.reset= function(value,v,entity){

console.log(v,entity,"in add card");

if(value=="Player"){

    console.log(value,v,entity,"in player");

    texture = this.textures.filter((e,i)=>e.name == v)[0].resource;

    texture.addressV =1;

    entity.render.meshInstances[1].material.diffuseMap = texture;

    entity.render.meshInstances[1].material.update();

}

else if(value=="Dealer"){

    console.log(value,v,entity,"in dealer");

    texture = this.textures.filter((e,i)=>e.name == v)[0].resource;

    texture.addressV =1;

    entity.render.meshInstances[1].material.diffuseMap = texture;

    entity.render.meshInstances[1].material.update();

}
else{
    console.log("in set card else");
} };

Sounds like the same issue as we just solved? Where or how do you change entity?