Jump to content

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.

Link to comment
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 !

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...