Sign in to follow this  
Ianmh

Drag and drop with complex polygons

Recommended Posts

Hi, I'm new to Pixi.js and the forums. 

I'm trying to figure out how to drag complex shapes made of polygons. I used PhysicsEditor to create the Polygons. I know a hitbox can be assigned to a sprite, but this seems to only work for a single simple polygon?

So my next approach was to create a bunch of graphics shapes from the polygons and add them to a container. This works, but I don't know if it's the proper way to do it. Here is the code below. 

let polygons = new Polygons().getPolygons();
let container = new PIXI.Container();

polygons.forEach((data: any) => {
    var graphic = new PIXI.Graphics();
    graphic.beginFill(0x00dd00, 1);
    graphic.drawPolygon(data.shape);
    graphic.endFill();
    graphic.scale.x = scale;
    graphic.scale.y = scale;
    graphic.interactive = true;
    graphic.buttonMode = true;
    graphic.alpha = 0;
    container.addChild(graphic);

    graphic
        .on('pointerdown', this.onDragStart)
        .on('pointerup', this.onDragEnd)
        .on('pointerupoutside', this.onDragEnd)
        .on('pointermove', this.onDragMove);
    });

    container.addChild(sprite);
    container.x = event.data.global.x - container.width / 2;
    container.y = event.data.global.y - container.height / 2;
        
    this.app.stage.addChild(container);

}

My mouse up creates the sprite by clicking on the screen. This is my Drag function.

onDragMove = (event: any): void => {

    if (this.dragging) {
        console.log(event.currentTarget)
        event.currentTarget.parent.alpha = .5;
        let newPosition = event.data.global;
        let parent = event.currentTarget.parent;
        parent.x = newPosition.x - parent.width / 2;
        parent.y = newPosition.y - parent.height / 2;
        this.wasDragging = true;
    }
}

The weird thing with this code is that all my sprites jump on top of each other while dragging. If I use this exact same code for my onDragEnd function and comment out the onDragMove it works as expected, but obviously I can't see the drag happening.

So my question is, is this the proper way to do this? If it is, why is the drag function not working? Is there a better way to do this?

Share this post


Link to post
Share on other sites

Not related to dragging:

Please use "width" and "height" only after you study how exactly those properties work: https://github.com/pixijs/pixi.js/blob/dev/src/core/display/Container.js#L570 , they use getLocalBounds() and mess up transforms.

As for dragging, I had the code but I lost it again. Always forget to put that one in examples ^_^ The idea is to not use center: determine coords of the mouse relative to dragging element and use it when you re-position it.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.