Difficulties with UITextButton

[qqilihq]

Describe the bug

@sdrahcorb and I are adding a subclassed UITextButton to a stage, and the result is quite different than expected. We’re bloody melonJS beginners, so not sure if the issue is on our end, if there’s a bug with the UITextButton, or somewhere else in the framework.

1. The rendered button shows the label twice - beside the expected position, it shows a second text outside the actual button, shifted vertically upwards. (see screenshot below)

2. The button has a click handler assigned which is supposed to perform a state.change - this will trigger a this.backgroundColor.setColor is not a function error:

ERROR
this.backgroundColor.setColor is not a function
TypeError: this.backgroundColor.setColor is not a function
    at PlayButton.reset (webpack://melonjs-es6-boilerplate/./node_modules/melonjs/dist/melonjs.module.js?:23563:30)
    at PlayButton.destroy (webpack://melonjs-es6-boilerplate/./node_modules/melonjs/dist/melonjs.module.js?:24262:14)
    at World.removeChildNow (webpack://melonjs-es6-boilerplate/./node_modules/melonjs/dist/melonjs.module.js?:24074:31)
    at World.reset (webpack://melonjs-es6-boilerplate/./node_modules/melonjs/dist/melonjs.module.js?:23554:22)
    at World.reset (webpack://melonjs-es6-boilerplate/./node_modules/melonjs/dist/melonjs.module.js?:36343:15)
    at EventEmitter.emit (webpack://melonjs-es6-boilerplate/./node_modules/melonjs/dist/melonjs.module.js?:8932:34)
    at emit (webpack://melonjs-es6-boilerplate/./node_modules/melonjs/dist/melonjs.module.js?:9597:25)
    at Application.reset (webpack://melonjs-es6-boilerplate/./node_modules/melonjs/dist/melonjs.module.js?:37897:9)
    at EventEmitter.emit (webpack://melonjs-es6-boilerplate/./node_modules/melonjs/dist/melonjs.module.js?:8912:36)
    at emit (webpack://melonjs-es6-boilerplate/./node_modules/melonjs/dist/melonjs.module.js?:9597:25)

To Reproduce

1. Use the es6-boilerplate template.
2. Edit the title screen as follows:

import { Stage, state, UITextButton, game, Color } from "melonjs";

class PlayButton extends UITextButton {
    constructor(x,y) {
        super(x,y, {
            font: 'PressStart2P',
            text: 'Play',
            borderWidth: 200,
            borderHeight: 20,
            // adding this fixes the error - but the entire 
            // canvas will turn green, and not just the button -
            // supplying just backgroundColor: 'green' will
            // trigger the same error as described above
            // backgroundColor: new Color().parseCSS('green'),
        });
    }

    onClick(){
        state.change(state.PLAY);
    }
}

class TitleScreen extends Stage {
    onResetEvent() {
        game.world.addChild(new PlayButton(50, 50));
    }
};

export default TitleScreen;

4. npm run dev

Expected behavior

1. Button should only show the text once, without the duplicated phantom text
2. Clicking the button should not cause an error but perform a state transition

Screenshots

Live Example Unfortunately we didn't manage to create a Codepen, as the PressStart2P font is not available there. Happy to push this into a repo if needed.

Device (please complete the following information):

• Device: MacBook
• OS: macOS 13.5.2
• Browser: Safari, Chrome
• melonJS Version: 15.12.0

Additional context

[obiot]

Hi @qqilihq that's totally weird, so sorry about that, and we'll look into it asap.

the UITextButton is a user added features (over the original built-in UI components), it had some improvements over the latest versions, but there are not really covered in a proper example to make sure there a not being broken over a new version.

[sdrahcorb]

@obiot Thank you for looking into it, and your quick reply. We'll seek a workaround and share it when ready.

[obiot]

Hi Guys, super sorry on the late feedback on this one, but all issues should be fixed now.

to be noted, that although this version will still accept the backgroundColor and hoverColor properties for backward properties, they are now deprecated in favor of hoverOffColor and hoverOnColor (the crash you experienced was due to the UITextElement backgroundColor property overwriting the parent Container backgroundColor property.... bad choice of name!)

anyway, a new 15.13 version has been published, give it a try and let me know !

[sdrahcorb]

Hi @obiot,

thanks for the quick response!

Will give the latest version a go :).

[sdrahcorb]

@obiot cc @qqilihq I tested the new set up and no longer encounter the error message. Thanks a bunch!

[obiot]

Great! Thanks for the feedback 🙏🙏🙏