[Solved] DrawRect click triggers outside of bounding box

[greencoder]

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 January 1, 2020 by greencoder

[greencoder]

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 December 22, 2019 by greencoder

[greencoder]

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 December 24, 2019 by greencoder

[Stephan]

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 December 24, 2019 by Stephan

[greencoder]

Sorry, actually that doesn't work, if I use hitarea, it would be always taken from 0,0 . 
 

Belated holiday wishes @Stephan @Wolfsbane

Edited December 29, 2019 by greencoder

[greencoder]

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 January 1, 2020 by greencoder