Interactivity and Mask

[Ninjadoodle]

Hi @enpu

Getting pretty close to finishing up my game, but I've run into a problem with interactivity and masking.

Basically, I have a large grid of clickable tiles, that is masked, and only a small square portion of the grid is visible in the center of the screen.

Currently I'm controlling the movement of the grid with a couple of buttons on the screen.

I've found that the clickable tiles that are masked are still interactive. To workaround, I would have to workout the positions of the tiles that are not masked and only then enable interactivity.

Is there a way to make masked sprites non-interactive?

Thank you in advance!

[enpu]

Having the hit area change dynamically based on the mask would be really complicated and heavy. That would mean if the sprite is only partly masked, the interactive hit area would also need to work only partly?

I think you need to rethink your design a little bit there. Maybe have four empty containers with custom hit areas in top of the grid? That would prevent the user from clicking the masked sprites?

[Ninjadoodle]

Hi @enpu

That makes perfect sence now that I think about it a little more. Thank you for the suggestion, I’ll see what I can come up with

[enpu]

Other way would be to use the mouse/touch position in the interactive function, like in mousedown:

sprite.mousedown = function(x, y) {
    if (x < 100 && y < 100) return;
    // only do something when x and y is 100 or more
};

 

[Ninjadoodle]

@enpu

Cool, I’m thinking something like that. I’m tweeting the tile movement, so I will most likely check tile positions on tween complete and if the tiles are in any of the 4 clickable positions - enable interactivity 

Thanks again for the tips!