rroylance

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

Recommended Posts

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.

Demo.gif

Share this post


Link to post
Share on other sites

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;

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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! 

 

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

  • Recently Browsing   0 members

    No registered users viewing this page.