Sign in to follow this  
greencoder

[Solved] DrawRect click triggers outside of bounding box

Recommended Posts

Hey guys,

Hope someone has an explaination and solution for this, was in the middle of a project and had to create a gym level to test the problem and found it, here's the same code : 

game.createScene('Main', {
    init: function() {        
        var box = new game.Graphics();
        box.fillColor = '#ff0000';
        box.drawRect(0, 200, 100, 100);
        box.interactive = true;
        box.click = function() {
            box.remove();
        };
        box.addTo(this.stage);         
    }
});

If you click above the box, the box gets destroyed 

Edited by greencoder

Share this post


Link to post
Share on other sites

Sorry for the quick turn around and finding a solution for this issue, modified the code following code

Old Code :
 box.drawRect(0, 200, 100, 100);

Modified Code :
 box.drawRect(0, 0, 100, 100);
 box.position.set(0,200);

So we have to always use position.set if you need to position it correctly and not with drawrect, if it's interactive, definitely sounds like a bug.

Edited by greencoder

Share this post


Link to post
Share on other sites

Ok have been experimenting a lot with this, and when combined with a container, the click again is triggered outside of the container area 

game.createScene('Main', {
    init: function() {        
        var box = new game.Graphics();
        box.fillColor = '#ff0000';
        box.drawRect(0, 0, 100, 100);
        box.position.set(0,200);
        
        var cont = new game.Container();
        box.addTo(cont);
        
        cont.interactive = true;
        cont.click = function() {
            cont.removeAll();
            cont.remove();
        };
        cont.addTo(this.stage);         
    }
});

@Stephan @Wolfsbane, any advice? 

Edited by greencoder

Share this post


Link to post
Share on other sites

add a hitArea to your container:

init: function() {
    var box = new game.Graphics();
    box.fillColor = '#ff0000';
    box.drawRect(0, 0, 100, 100);
    box.position.set(0,200);

    var cont = new game.Container();
    box.addTo(cont);

    cont.interactive = true;

    //add a hitArea
    cont.hitArea = new game.Rectangle(100, 100);

    cont.click = function() {
        cont.removeAll();
        cont.remove();
    };
    cont.addTo(this.stage);
}

 

Edited by Stephan

Share this post


Link to post
Share on other sites

Yikes, I feel embarrassed for assuming things here, I assumed

  • Container takes its position based on the its children
  • Children in Container has their position in world coordinates 

Both of them were wrong, of course, I don’t know why I assumed so. So I corrected both of it and then its working as intended

game.createScene('Main', {
    init: function() {        
        
        var cont = new game.Container();
        cont.interactive = true;
        cont.position.set(0,200);
        cont.hitArea = new game.Rectangle(100, 100);
        cont.interactive = true;
        cont.click = function() {
            cont.removeAll();
            cont.remove();
        };
        cont.addTo(this.stage);  
        
        var box = new game.Graphics();
        box.fillColor = '#ff0000';
        box.drawRect(0, 0, 100, 100);
        box.addTo(cont);
    
    }
});

Correcting my stupidity now and closing this thread. 

Edited by greencoder

Share this post


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

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.