Issues with sprite position when switching parent sprites

Phaser 2 / CE
1

I am currently trying to have a child sprite be able to dragged out of it’s parent sprite and potentially dropped into another container sprite at which point it will be a child of that sprite. The issue I’m having is that the when I click to drag it’s y coordinate for some reason is far higher than my mouse cursor even when I have the anchor set to 0.5, and to clip to center. See image below for a visual idea.

image
image1572×768 4.1 KB

The thick red box is where the sprite is, and the thin red box is where it should be, and the blue circle is the cursor held down.

I use the following to remove the sprite

testingCard.events.onDragStart.add(function(testingCard) {
			// Detach the sprite from its original parent
			testingCard.parent.removeChild(testingCard);
			this.game.world.add(testingCard);
			/* testingCard.x = game.input.mousePointer.x;
			testingCard.y = game.input.mousePointer.y; */
			// Assign the sprite to the heldCard variable
			heldCard = testingCard;
		}, this);

The commented out lines in the function don’t do anything when added. I can add a position update in the update function which will work, however for maybe a quarter of a second, it appears in that thick red block position before moving quickly to the correct location. This obviously is distracting and should be dealt with.

If anyone has an idea on how to solve this, I would appreciate it. I have a general idea that it involves the parents and relative transformations, but as mentioned above I have a partial fix, but it has this visual issue that must be fixed.

2

I couldn’t reproduce this problem.

3

Hmm, I commented out everything I could to mimic your’s and I still get that issue. I noticed that my container sprite also moves slightly. Below is the full code in the create function:

// Create the leftContainer sprite
leftContainer = game.add.sprite(0, 275, null);
leftContainer.anchor.setTo(0, 0);

// Create a Graphics object to draw the rectangle
var graphics = game.add.graphics(0, 0);

// Set the fill style to green with half opacity
graphics.beginFill(0x00FF00, 0.5);

// Draw a rectangle that covers the full width and height of leftContainer
graphics.drawRect(0, 0, game.width * 0.4, 800);

// End the fill
graphics.endFill();

// Add the Graphics object as a child to leftContainer
leftContainer.addChild(graphics);

leftContainer.inputEnabled = true;
leftContainer.input.enableDrag(false, false);
leftContainer.input.allowHorizontalDrag = false;

testingCard = this.createCard(cardData, 200, 250);

// Event handler when dragging starts
testingCard.events.onDragStart.add(function() {
	// Detach the sprite from its original parent
	testingCard.parent.removeChild(testingCard);
	this.world.add(testingCard);
}, this);

leftContainer.addChild(testingCard);

The createCard function is a function that creates a sprite which is itself a parent with a series of child sprites. It’s always the first time its removed from the leftContainer parent that it has the jump up. When it has the world as the parent and subsequent drags occur, it moves to center correctly.

I notice you use an image for your container sprite. I was going to do the same, but I need the container to have variable height, but I haven’t figured out how to scale parent height while leaving children unaffected. If that’s even possible. I’m using Phaser CE 2.7.3.

I might have figured out a solution by removing the child with an onInputOver event instead of onDrag, but I’m encountering some layering issues I’ll need to fix.