GUI_Object Clickable Area is Offset

[Ld00d]

Sorry if this has been covered already, but I wasn't able to find anything via searches.

I have a game I started with the boilerplate. In the TitleScreen, I've added a "Play" button that appears in the lower center of the canvas. The button is displaying fine, but the clickable area appears to be a box roughly the size of the button, but starting at the center of the button. So the button actually appears centered on the position I placed it, but the clickable area is if the top left was at that position.

I was going to dig into the melonjs code and determine what's happening, but I wanted to see if this is because of something I'm doing incorrectly.

melonJS Game Engine v4.1.0

var PlayButton = me.GUI_Object.extend({

    init: function(x, y) {
      var settings = {};
      settings.image = "btnplay";
      settings.framewidth = 250;
      settings.frameheight = 100;
      // super constructor
      this._super(me.GUI_Object, "init", [x, y, settings]);
      // define the object z order
      this.pos.z = 4;
    },


    onClick: function () {
        // Change to the PLAY state when the button is clicked
        me.state.change(me.state.PLAY);
        return true;
    }
});


game.TitleScreen = me.ScreenObject.extend({
    /**
     *  action to perform on state change
     */
    onResetEvent: function() {
        // Load background image
        me.game.world.addChild(
            new me.ImageLayer(0, 0, {
                image : "launch",
                z: 0 // z-index
            }
        ));

        me.game.world.addChild(
            new PlayButton(480, 480),
            10 // z-index
        );
    },

    /**
     *  action to perform when leaving this screen (state change)
     */
    onDestroyEvent: function() {
         // TODO
    }
});

 

Also, I have the z-index at 10 because 1 wasn't working for some reason.

[obiot]

probably a consequence of changing the default anchor point to 0.5 for all renderables, cumulated to this issue : https://github.com/melonjs/melonJS/issues/833

this will be fixed in the next 4.2.0 version, but in the mean time, you should be able to fix it by adding `this.anchorPoint.set(0, 0);` in your constructor.

sorry for the annoyance !
 

[Ld00d]

Yep, that works. Thanks!