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