I'm building a game using Incisor with two buttons, "Stop" and "Go", that act as toggle buttons. The behavior is as follows: when the "Go" button is visible, the action is stopped. Pressing "Go" starts the action, hides the "Go" button, and shows the "Stop" button in its place. However, even when the "Go" button is visible, I am only receiving the "Stop" action in the callback.

Here's the code:

class ProjectMain
{ 

   init() {

        this.goButton = nc.addButton( nc.graphicAssets.go, nc.mainScene, "Go" );
        this.stopButton = nc.addButton( nc.graphicAssets.stop, nc.mainScene, "Stop" );

        // initially the stop button is not visible
        this.stopButton.visible = false;
        
        // add the press callback to the buttons
        this.goButton.addPressCallback( this, "onPress", ["Go"] );
        this.stopButton.addPressCallback( this, "onPress", ["Stop"] );
    }

    onPress( event, camera, action ) {

        console.log(action); // this is always Stop??

        //toggle visibility
        if ( "Go" == action ) {
            this.stopButton.visible = true;
            this.goButton.visible = false;
        } else {
            this.stopButton.visible = false;
            this.goButton.visible = true;
        }
    }
}

Even when the "Go" button is visible, the callback always says "Stop" instead of "Go". Why is this happening, and how can I ensure the correct action is triggered?

I'm building a game using Incisor with two buttons, "Stop" and "Go", that act as toggle buttons. The behavior is as follows: when the "Go" button is visible, the action is stopped. Pressing "Go" starts the action, hides the "Go" button, and shows the "Stop" button in its place. However, even when the "Go" button is visible, I am only receiving the "Stop" action in the callback.

Here's the code:

class ProjectMain
{ 

   init() {

        this.goButton = nc.addButton( nc.graphicAssets.go, nc.mainScene, "Go" );
        this.stopButton = nc.addButton( nc.graphicAssets.stop, nc.mainScene, "Stop" );

        // initially the stop button is not visible
        this.stopButton.visible = false;
        
        // add the press callback to the buttons
        this.goButton.addPressCallback( this, "onPress", ["Go"] );
        this.stopButton.addPressCallback( this, "onPress", ["Stop"] );
    }

    onPress( event, camera, action ) {

        console.log(action); // this is always Stop??

        //toggle visibility
        if ( "Go" == action ) {
            this.stopButton.visible = true;
            this.goButton.visible = false;
        } else {
            this.stopButton.visible = false;
            this.goButton.visible = true;
        }
    }
}

Even when the "Go" button is visible, the callback always says "Stop" instead of "Go". Why is this happening, and how can I ensure the correct action is triggered?

• javascript
• game-development
• incisor

1 Answer 1

The issue is that visibility doesn’t affect whether a button is active. A button can be transparent and still respond to user interactions, or vice versa. To achieve the behavior you're looking for, use the enable() and disable() functions. These methods will make the button both invisible and inactive. Additionally, disabling a button (or any child of SceneObject) improves performance, as it reduces the GPU workload. Even transparent objects still require GPU resources to render, so disabling them can help optimize performance.

class ProjectMain
{

   init() {

        this.goButton = nc.addButton( nc.graphicAssets.go, nc.mainScene, "Go" );
        this.stopButton = nc.addButton( nc.graphicAssets.stop, nc.mainScene, "Stop" );

        // initially, DISABLE the stop button
        this.stopButton.disable();
        
        // add the press callback to the buttons
        this.goButton.addPressCallback( this, "onPress", ["Go"] );
        this.stopButton.addPressCallback( this, "onPress", ["Stop"] );
    }

    onPress( event, camera, action ) {

        console.log(action); // expected action

        //toggle DISABLED/ENABLED
        if ( "Go" == action ) {
            this.stopButton.enable();
            this.goButton.disable();
        } else {
            this.stopButton.disable();
            this.goButton.enable();
        }
    }

}