Button click animation file not changing ( Help )

Help & Support
1

I am new to Playcanvas, am suck in this stage

i have changed 3d object from idle to play state through keyboard key, but i want this by using 2d screen button click event.

my code for animation :

AnimationBlending.states = {
idle: {
animation: ‘player.json’
},
punch: {
animation: ‘player_Animation.json’
}

this is keyboard shortcut key code :
AnimationBlending.prototype.keyDown = function (e) {
if ((e.key === pc.KEY_P) && (this.state !== ‘punch’)) {
this.setState(‘punch’);
}
};

2

Hi @santhosh_design,

Take a look at the following tutorial, it explains in detail how to add a 2D button using Playcanvas UI elements and how to program it to respond to click events:

https://developer.playcanvas.com/en/tutorials/ui-elements-buttons/

3

Hi [Leonidas],
Thanks for your help. i have read this tutorial and did some animations like rotation and moving
through findByName.

But i created btnstate.js for 2d button and animation.js for 3d animated object. the above code i mentioned was written in animation.js.

i dont know how to intract with btnstate.js click event to animation.js change state. i dont know am i on write way.

4

Good, what you need is to learn how to communicate events between scripts. So when something happens in one script (click event in btnstate.js) you can communicate that to the other script and respond by executing an action (play animation in animation.js).

Playcanvas provides a robust events API in all scripts which you can leverage to do that. You can learn how to use it here:

https://developer.playcanvas.com/en/user-manual/scripting/communication/

5

I tried the above link and got the result through console. But not able to change animation state.

var onPlayerMove = function(bt) {
console.log(bt); // result = punch
this.setState(bt); // i need some thing like this
};

this.app.on(‘animationBlending:move’,onPlayerMove);

6

Hi @santhosh_design, try sharing a project that reproduces your issue so we can take a look and help you out.

7

This is my project link : https://playcanvas.com/editor/scene/834887

8

Good, your issue lies in the different context of this inside your method.

To fix that you need to change the context of this. There are several ways to do that, here we will use one way provided by Playcanvas. Adding a third parameter, this, in your event listener (animationBlending.js):

this.app.on('animationBlending:move',onPlayerMove, this);

Try reading around on how this is being used in Javascript methods to understand it better.

9

I will. And, it works thanks a lot.

i have one more question is there a possible way to get transparent canvas (no bgcolor).

1 Like
10

Yes, sure, that setting lies in your project settings, in the Rendering tab:

image
image.png862×594 19.5 KB

I think for that to work, you were required to also set your active camera’s clear color alpha to 0, not sure if that is still the case. You can easily try that out:

image
image.png693×302 16.8 KB

11

I tried first one but not second one. i ll try both.

i am new to playcanvas, so for my doubts can i get in touch with you?

12

Hi @santhosh_design, if you require one to one consultancy, try posting in the jobs category. There are plenty of experienced developers to help you out, I might be interested as well.

Otherwise, feel free to post publicly in the forum, all questions are welcome, and everybody can learn something from them.

Also try the search button the forum provides, it is quite powerful, there is a lot of hidden knowledge on this forum.

13

Sure, Thanks for your help…