Sign in to follow this  
HawpT

Clicking Any Button Calls ALL Buttons

Recommended Posts

Hey,

I have an interesting problem where in one game state (Menu) I have a button that moves me to another state (PlayState). I have many buttons in the state PlayState. For some reason, ALL of the buttons in my second state are 'clicked' when I click the first button, in the first state, before the rest of the buttons even exist. Even when the callBack function I pass to the buttons are different, they are still invoked. I have tried several approaches with no success. 

Here is the code for the first state. Full code can be found at: https://github.com/HawpT/BrainFloss/blob/master/Game/js/Menu.js

//the first button in the Menu state
var newButton = this.game.add.button(400, 300, 'ball', this.clicked, this);

//the callback function for that button
clicked: function () {
        this.game.state.start('PlayState');
}

The Second State code: https://github.com/HawpT/BrainFloss/blob/master/Game/js/PlayState.js
LabelButton is just a wrapper that lets me print text on my buttons that I found on this forum.


//one of the buttons from the second game state
onebutton = new LabelButton(soccer.game,30,570,'numbutton','1',this.actionOnClicked,this,0,0,0,0);

//its call back function, blank right now
actionOnClicked: function() {}

//and its input up handler, which is invoked whenever the button from the first state is pushed
onebutton.onInputUpHandler(this.clicked(onebutton),this);
clicked: function(b) {
        switch(b) {
            case onebutton:
                answer += '1';
                break;
            case twobutton:
                answer += '2';
                break;
            case threebutton:
                answer += '3';
                break;
            case fourbutton:
                answer += '4';
                break;
            case fivebutton:
                answer += '5';
                break;
            case sixbutton:
                answer += '6';
                break;
            case sevenbutton:
                answer += '7';
                break;
            case eightbutton:
                answer += '8';
                break;
            case ninebutton:
                answer += '9';
                break;
            case zerobutton:
                answer += '0';
                break;

        }
        this.game.add.text(0,0,answer,{font: '32px Arial', fill: '#000'});

    }

Here is an image of my first state, in which the soccerball is the button.

AZeCt4z.png

When the soccer ball is clicked, it takes me to my second state, here:

peJtHCS.png

As you can see, there is a '1' printed in the top left corner as soon as I enter this state. No buttons have been clicked. 

I am new to JS and Phaser, but I have worked a little with action script in the past and never run across anything like this. Any help would be much appreciated.

Share this post


Link to post
Share on other sites

The problem is that when this line is reached:

onebutton.onInputUpHandler(this.clicked(onebutton),this);

this.clicked(oneButton) actually runs immediatey, and you're setting the event handler to the return value of that function.  This isn't what you want.

Try instead using bind like this:

onebutton.onInputUpHandler(this.clicked.bind(this, onebutton),this);

Bind is a function that will return a function that will call clicked with the context of this and use onebutton as it's parameter.

Let me know if this helps.

Share this post


Link to post
Share on other sites
5 hours ago, fillmoreb said:

The problem is that when this line is reached:


onebutton.onInputUpHandler(this.clicked(onebutton),this);

this.clicked(oneButton) actually runs immediatey, and you're setting the event handler to the return value of that function.  This isn't what you want.

Try instead using bind like this:


onebutton.onInputUpHandler(this.clicked.bind(this, onebutton),this);

Bind is a function that will return a function that will call clicked with the context of this and use onebutton as it's parameter.

Let me know if this helps.

After implementing this code, the button will not trigger the clicked function at all. However, it will invoke the onActionClicked callback in its declaration.

Also, take a look at this screenshot. I added a window.alert() to the onActionClicked callback for debugging purposes. It is now being invoked every time I press any button, even though I declared a different callback  in the button on this screenshot. This is the code for the soccerball button, but it invokes the callback from buttons in the next state of the game as well as it's own (which move the game to the next state).

var newButton = this.game.add.button(400, 300, 'ball', this.clicked, this);

2qh0gsF.png

Share this post


Link to post
Share on other sites

Replace

onebutton.onInputUpHandler(this.clicked.bind(this, onebutton),this);

With

onebutton.onInputUp.add(this.clicked.bind(this, onebutton));

This works for me when I downloaded your project locally and made the change.

According to the documentation, onInputUpHandler() is an internal function.  Because of that, it shouldn't be used by us to assign handlers.  using the onInputUp.add() will let us add all the handlers we want to the InputUp signal.

Sorry I didn't catch that the first time around. :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.