Jump to content

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.scale.x = scale;
    graphic.scale.y = scale;
    graphic.interactive = true;
    graphic.buttonMode = true;
    graphic.alpha = 0;

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

    container.x = event.data.global.x - container.width / 2;
    container.y = event.data.global.y - container.height / 2;


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

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

    if (this.dragging) {
        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?

Link to comment
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.

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