Jump to content

Overlapping sprites - how to find the clicked playing card?

Alexander Farber

Recommended Posts

Good evening,

I have several playing cards at the table (screenshot below) and am trying to identify the card which is being clicked - by the following code:

function onDragStart(ev) {
        var stagePoint = ev.data.getLocalPosition(app.stage);
        for (var i = 0; i < app.stage.children.length; i++) {
                var child = app.stage.children[i];
                if (child instanceof Card && child.getBounds().contains(stagePoint.x, stagePoint.y)) {
                        draggedCard = child;
                        if (draggedCard.getBounds().contains(stagePoint.x, stagePoint.y)) {
                                this.data = ev.data;
                                draggedCard.moveBy(-Shadow.OFFSET, -Shadow.OFFSET);
                                shadow.visible = true;
                                oldX = stagePoint.x;
                                oldY = stagePoint.y;

But the approach does not work, the sprites seem not to be sorted by the order I have called app.stage.addChild()

How to proceed here best? Please recommend some approach.

I would like to select the card for dragging and also change its z-order to be on the top.

I am using pixi.js 5.2.1, here is my web page and the screenshot below -

Thank you

Screenshot 2020-04-22 at 22.57.14.png

Edited by Alexander Farber
Link to comment
Share on other sites

bounds are AABB (parallel to X and Y) . why dont you just use regular "interactive = true" ? 

I think you have go backwards. First drawn - last clicked, isnt that right?

Also all sprites have containsPoint() method which checks if (x,y) belongs to it

Edited by ivan.popelyshev
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...