Mouse click / touch on whole screen

[8bitdna]

Hi All,

I'm just having a play with Panda 2 and doing a bit of learning.  I have the following code:

game.module(
    'game.main'
)
.body(function() {
    
game.addAsset('card.png');

game.createScene('Main', {
    init: function() {
        this.card = new game.Card();
    },
    
});

game.createClass('Card', 'Sprite', {
    texture: "card.png",
    
    init: function() {
        this.hitArea = new game.Rectangle(game.width, game.height);
        this.interactive = true;
        this.addTo(game.scene.stage);
    },
    
    mousedown: function(x, y) {
        this.x = x;
        this.y = y;
    }
});

});

What I was expecting it to do was let me press / click anywhere on the screen and any instances of the 'Card' class would execute the 'mousedown' method.  It works the first time and then stops in my example (reverts back to only being able to click / touch the sprite area).  I've tried adding..

this.hitArea = new game.Rectangle(game.width, game.height);
this.interactive = true;

...to the 'mousedown' method in-case the hit area was being reset somewhere but not having much joy.  I know I could probably manage the hit tests in the 'scene' but I like to keep things encapsulated regarding functionality and so on.  What am I doing wrong?  I'm using engine version 2.7.1dev.

Cheers

Pete

[enpu]

@8bitdna

When you move your sprite, it's hitArea gets moved also. If you turn on hit area debugging, you should visually see what's happening on the hit ares

Depending on what you are trying to achieve, if you want to just move sprite when clicking anywhere in the scene, i would use mousedown function in the scene.

game.addAsset('card.png');

game.createScene('Main', {
    init: function() {
        this.card = new game.Card();
    },
    
    mousedown: function(x, y) {
        this.card.mousedown(x, y);
    }
});

game.createClass('Card', 'Sprite', {
    texture: 'card.png',
    
    init: function() {
        this.addTo(game.scene.stage);
    },
    
    mousedown: function(x, y) {
        this.x = x;
        this.y = y;
    }
});

Or if you want to have hit area on your sprite, then you would have to reposition it so it stays at the top left of the screen:

game.addAsset('card.png');

game.createScene('Main', {
    init: function() {
        this.card = new game.Card();
    }
});

game.createClass('Card', 'Sprite', {
    texture: 'card.png',
    
    init: function() {
        this.hitArea = new game.Rectangle(game.width, game.height);
        this.interactive = true;
        this.addTo(game.scene.stage);
    },
    
    mousedown: function(x, y) {
        this.x = x;
        this.y = y;
        this.hitArea.x = -x;
        this.hitArea.y = -y;
    }
});

 

[8bitdna]

Many thanks @enpu

I now have the following code:

game.module(
    'game.main'
)
.body(function() {
    
game.addAsset('card.png');

game.createScene('Main', {
    init: function() {
        this.card = new game.Card(16,16);
        this.card2 = new game.Card(96,16);
    },
    
});

game.createClass('Card', 'Sprite', {
    texture: "card.png",
    
    init: function(x,y) {
        this.position.set(x, y);
        this.hitArea = new game.Rectangle(game.width, game.height, -x,-y);
        this.interactive = true;
        this.addTo(game.scene.stage);
    },
    
    mousedown: function(x, y) {
        this.x = x;
        this.y = y;
        this.hitArea.x = -x;
        this.hitArea.y = -y;
    }
});

});

Switching on hit area debugging I can see my two cards overlap the whole screen but only one gets the 'mousedown' fired.  Is there anyway to automatically have all instances receive the click / touch or do I have to iterate over them from the scene like you first example?

Also, I noticed if I switch on 'hidpi' the hit area debugging shows like the attached on my iPhone.  I can still press everywhere etc and it works fine just the denoted area isn't right or am I understanding things wrong?  If I switch it off it covers the whole game screen like I'd expect.

By the way, this isn't for a game etc, I'm just trying a few oddball things on purpose to learn how to do stuff

Thanks for your help.

 

[enpu]

mousedown event is designed to go through all interactive items (in the rendering order) and once it finds the first one where the mouse cursor hits with the hit area, it will stop there. But if you return true on the mousedown function, it will continue to the next one.

mousedown: function(x, y) {
    this.x = x;
    this.y = y;
    this.hitArea.x = -x;
    this.hitArea.y = -y;
    return true;
}

That hit area debug drawing on hires was definitely a bug and should be now fixed on latest dev version. Thanks for noticing!

[8bitdna]

Hi @enpu

Much appreciated!  Amazingly fast fixes as well, superb.

Pete