Clone entity and run animation again and again

Harsh_Zota · December 15, 2021, 2:44pm

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

Harsh_Zota · December 15, 2021, 2:48pm

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();

Harsh_Zota · December 15, 2021, 5:13pm

@yaustar @Albertos looking forward to your reply

Albertos · December 15, 2021, 5:50pm

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

Harsh_Zota · December 15, 2021, 6:06pm

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

Albertos · December 15, 2021, 6:11pm

On which entity is the script attached?

Harsh_Zota · December 15, 2021, 6:22pm

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

Albertos · December 15, 2021, 6:37pm

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.

Harsh_Zota · December 15, 2021, 7:02pm

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…

Albertos · December 15, 2021, 7:35pm

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.

Harsh_Zota · December 16, 2021, 9:31am

okay will try that and update you

Harsh_Zota · December 16, 2021, 9:52am

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

Harsh_Zota · December 16, 2021, 10:06am

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

Albertos · December 16, 2021, 12:08pm

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.

Harsh_Zota · December 16, 2021, 12:31pm

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

Albertos · December 16, 2021, 12:36pm

Is it enabled and on the right position?

Harsh_Zota · December 16, 2021, 1:09pm

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

Albertos · December 16, 2021, 2:58pm

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

Harsh_Zota · December 16, 2021, 5:07pm

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");
} };

Albertos · December 16, 2021, 5:23pm

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