urgent URGENT; Need to be able to change pivot point of sprite at any time and any orientation

[rroylance]

Hi all,

I've been banging my head off the desk for days now and can't figure out how to go about accomplishing this. I've gotten to the point of being able to scale or rotate around a random pivot point, but only once, I need to be able to do it multiple times in a row.

For example (in the GIF attached); I need to scale the box across the red line as the pivot point, and then scale the box along the blue line as the pivot point and then finally rotate the box around the green dot as the pivot point.

I can do each step individually just fine, but the chaining together completely breaks as I can't figure out how to set the pivot point on the already manipulated sprite properly.

Does anyone have any ideas on how to accomplish this? I really need to get this working asap and I'm at the end of my rope.

Thanks.

[samme]

Are you using `obj.pivot` or just `object.anchor`?

[rroylance]

pivot, not using anchor at all.

 

For example, this is how I set the pivot point for the rotation;

this.gridShapeTarget.pivot.set(this.rotationPoint.worldPosition.x -
 this.gridShapeTarget.worldPosition.x, this.rotationPoint.worldPosition.y -
 this.gridShapeTarget.worldPosition.y);
this.gridShapeTarget.position.set(this.gridShapeTarget.position.x + this.gridShapeTarget.pivot.x, this.gridShapeTarget.position.y + this.gridShapeTarget.pivot.y);

this.gridShapeTarget.rotation += deltaDegrees;

 

[samme]

You can try resetting `pivot` to zero and setting `position` (to compensate) between each step.

[rroylance]

8 minutes ago, samme said:

You can try resetting `pivot` to zero and setting `position` (to compensate) between each step.

I have tried that and it doesn't quite work; for example when I scale the sprite x to -1 to do the red line transformation and then if I try to then set the pivot point to the blue line, it's actually way off to one side as the sprite is now backwards. More or less same thing when the sprite is rotated, then the x y positions relative to the sprite are all off axis and not feasible to manually adjust for.

I'm hoping there is some "world space" pivot that can be done, or maybe a way to create a new sprite with the orientation of the existing one (so I can then set the pivot and all that on a fresh sprite that won't have the offset and off axis issues) and just swap them out every step. But I'm coming up empty.

[samme]

You could try using a dummy sprite parent and alter its position (maybe pivot as well) instead.

[rich]

Yeah, I would use a parent container and rotate that as needed, and scale the child.

[rroylance]

... That sounds like it'll work and solve my issues completely. I didn't even consider using a parent. I'll try that out tomorrow.

 

Thank you so much Sam & Rich!

[rroylance]

@samme @rich

Progress! I implemented the dummy sprite as a container and splitting up which object gets scaled vs rotated and that works perfect... when I do the both scales and then the rotate in that order. Below.

However I need to be able to do those 3 transformations in any order and have it act as expected, but currently it looks like this (doing scale x, rotate, then scale y). Which totally makes sense, it's doing the scale y based on where the line is in relation to the shape at the start, however the rotation seems to be fine no matter which order, which makes sense since the rotation object is separate:

Any idea how I would go about setting the pivot point relative to the shapes current location and orientation so the order doesn't matter ?

In the final case, it should scale x and rotate as it does but then the scale y should flip the shape down off the bottom of the screen since it's so far away from the blue line.

 

Thanks again guys.

[rroylance]

OK. Think I got a viable solution now. As @samme and @rich said, creating dummy sprite containers is the way to go. What I was missing is that in my case I need to create a new container and add the existing container to it for every transformation.

I was looking at this way too long and I'm very glad to be moving on, hopefully no more easy answers escape me.

Thank you so much guys, much appreciated!

EDIT; None of the codepens are clean or good code, but they were just functionality tests that I can now take the idea into the actual project, so I'm sorry about that. But here is the working example!