Jump to content

How to react to clicks that don't hit foreground objects?


Recommended Posts

I want my game to have a mid- or background that has the world in it, and then some foreground objects. If the player clicks on a foreground object, then that should be handled one way, but if the player clicks within the canvas without hitting a foreground object then that should be handled another way. So my question is, does Pixi provide a nice way of going about this?

What I've tried:

// Method 1
const world = new PIXI.Container();
world.interactive = true
world.hitArea = new PIXI.Rectangle(0, 0,
    this.app.stage.width, this.app.stage.height);
world.on('pointerdown', () =>


// Method 2
    () => console.log('mouse is down'));


I thought that there might be a way to create a container that only fires if a child objects of a different container weren't hit (these child objects being the foreground objects), but method 1 isn't firing the callback.

Method 2 fires the callback but I'm not sure how to go from there to checking if a foreground object was hit. It occurs to me that I could have a global boolean that sets whenever a card is clicked, but that seems hacky and prone to breakage.

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