GUI_Object Clickable Area is Offset

Recommended Posts

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
        return true;

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

            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.

Share this post

Link to post
Share on other sites

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 !

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.