2D Calculator Scripting issues

Help & Support
1

I am trying for like a week but I just don’t know how to Script this thing, how can I access all my buttons and how do I tell my program to differentiate those buttons? Does anyone have an idea? PS. my Script will show you I don’t know what I am doing, be gentle. This is my project: https://playcanvas.com/project/793816/overview/adnatest

2

Hi @adnacolakovic,

Take a look at the UI Buttons tutorial, it examples how to add interaction with a button. You can add a unique event to be fired based e.g. on the button name to differentiate each button logic.

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

3

Hi Leonidas, I have read the Documentation 3 times, I honestly don’t find it helpful whatsoever, that is why I posted on the Forum. But thank you.

4

Yeah the documentation (user manual) in general won’t help you to do something specific like buttons, but the tutorial I’ve sent you is quite specific on how to add interactions to buttons.

If you have trouble understanding the code I’d advice first doing some Javascript tutorials, there are plenty and freely available online.

5

I am just watching the Java Script tutorial, I think that is my main problem, I have no knowledge in Java Script, and it really makes the whole experience so much more difficult.

1 Like
6

Hi @adnacolakovic! I’m not sure if it is the best way, but I think you can do something like below. You have to add this script to only one entity and attach every button background to the correct attribute.

var Calculator = pc.createScript('calculator');

Calculator.attributes.add('buttonOne', { type:'entity' });
Calculator.attributes.add('buttonTwo', { type:'entity' });
Calculator.attributes.add('buttonThree', { type:'entity' });

Calculator.prototype.initialize = function() {
    this.buttonOne.element.on('mousedown', this.one, this);
    this.buttonTwo.element.on('mousedown', this.two, this);
    this.buttonThree.element.on('mousedown', this.three, this);
};

Calculator.prototype.update = function (dt) {
    // You update function
};

Calculator.prototype.one = function () {
    // Your one function
};

Calculator.prototype.two = function () {
    // Your two function
};

Calculator.prototype.three = function () {
    // Your three function
};

Note: I think you have to parse the script eveytime you add new attributes to make this attributes visible in the editor. You can find the parse button on the script component of the entity with this script.

3 Likes
7

Can someone please have a look and tell me what is wrong with the code, what I am trying to make is a 2D calculator. Here is the link: https://playcanvas.com/project/793816/overview/adnatest

8

Hi @adnacolakovic,

From what I see you have a script attached to your calculator buttons (CalManager.js). I imagine you expected it to run some logic each time you press a button?

Though you don’t have any input handlers in that script. The other script (button.js) that does, it’s not attached to any entity. Try attaching it to your button entities as well, together with the CalManager.js script, that’s a starting point to get some input on those buttons.

9

Thank you very much.