Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

how to set center of rotation?


spiderworm
 Share

Recommended Posts

Hi,

 

I'm trying to get a body to rotate around its center point.  I assumed that would be the default behavior, but it rotates around its upper left hand corner instead.  I haven't been able to find anything in the docs about setting rotation center either.  Here's some sample code:

new Phaser.Game(    400,    400,    Phaser.AUTO,    document.body,    {        preload: function() {            this.game.load.image(                'test',                'test.png'            );        },        create: function() {            this.obj = this.game.add.sprite(100,100,'test');            this.obj.body.angularVelocity = 500;        }    });
Thanks in advance for your help.
Link to comment
Share on other sites

That actually does seem to work.  Thanks!  I wish the docs would explain that a bit better.  Here's what they say now:

 

The anchor sets the origin point of the texture. The default is 0,0 this means the textures origin is the top left Setting than anchor to 0.5,0.5 means the textures origin is centered Setting the anchor to 1,1 would mean the textures origin points will be the bottom right.
Link to comment
Share on other sites

Thanks rich.

 

I'm looking for documentation on pivot but I'm not finding any.  Is this a relatively new, undocumented feature?  What would I set the values to in order to get it to rotate around the center of the sprite?  sprite.pivot.x = .5 and sprite.pivot.y = .5 do not seem to be giving the correct results.

Link to comment
Share on other sites

Did some source code reading which led me to the pixi.js docs.  Pivot is inherited from Pixi, and pivot.x and pivot.y should be set in pixel units, it appears.  The following sets the pivot to the center:

sprite.pivot.x = sprite.width * .5;sprite.pivot.y = sprite.height * .5;
Link to comment
Share on other sites

Yeah it's a Pixi level feature, but I added it to the docs today.

 

You can set it to anywhere in the game world (within reason I guess) and it works in conjunction with anchor, not as an alternative to it. If all you want to do is rotate around the center then anchor 0.5 will be fine.

Link to comment
Share on other sites

  • 1 month later...
  • 2 months later...
sprite.pivot.x = sprite.width * .5;sprite.pivot.y = sprite.height * .5;

- No, this doesn't work.

 

`pivot` seems to reposition the sprite and change its centre point in mysterious and un-useful ways, so if anyone can clearly explain how it works I'd be extremely happy :)

Link to comment
Share on other sites

 

You can compensate for it by setting position equal to pivot after setting pivot that should maintain correct position

 

```
  sprite.pivot.x = sprite.width / 2;
  sprite.pivot.y = sprite.height / 2;
  sprite.x += sprite.width / 2;
  sprite.y += sprite.height / 2
```
This shifts the sprite by half its height, but the x/y position is also shifted to the sprite's centre.
So it seems to be behaving the same as anchor? 
 
The main reason why I don't want to change the x/y point is because my collision detection code depends on sprites having their x/y anchors at the top left corner.
Having inconsistently positioned anchors complicates things, so a "working" `pivot` would really help.
I think I'll just wait patiently till it's fixed  :)
Link to comment
Share on other sites

  • 2 months later...

Has this been fixed ? setting pivot still shifts the sprite.

There's a bit of reasonable confusion about the correct behaviour of pivot.

It seems that the current behaviour is the correct one, so what you're witnessing isn't actually a bug, but the way pivot is supposed to work.

 

There have been requests for a way to change the sprite's rotation axis without altering its x/y position. The github issue linked earlier was recently updated with a discussion about a possible way this could be implemented:

 

https://github.com/GoodBoyDigital/pixi.js/pull/730

Link to comment
Share on other sites

  • 1 year later...

For me the problem arises when you want to snap the object to a grid, but still want to use an anchor which is not at [0,0] (e.g. for rotating around center or [.6,.8] for example). What I do is snap the desired anchor to the grid rather than snapping the image x/y:

function snapNonZeroAnchor(anchorX, anchorY, image,snapMultiple) {

    var offX = image.width * anchorX;
    var offY = image.height * anchorY;
    offX = Phaser.Math.snapToFloor(offX, snapMultiple);
    offY = Phaser.Math.snapToFloor(offY, snapMultiple);

    var newAnchorX = offX / image.width;
    var newAnchorY = offY / image.height;

    image.anchor.setTo(newAnchorX, newAnchorY);

}

The result is an anchor which will snap the image to the grid while still keeping the anchor point as close as possible to the original anchor. 

Kind of unfortunate, but I have to resort to this kind of thing with rotations that are not independent of anchors. 

Link to comment
Share on other sites

  • 2 months later...

I am new with Phaser and now I trying to develop simple game, but in my game I need to rotate an uquilateral triangle around its geometrycal center, so the center of rotation not located in 0.5width/0.5height point (now rotate() function rotate sprite around it's center, am i right?). And, by setting pivot or anchor, i can change center of rotation, but sprite changing its position too and collisions start to occur not at the visual boundaries of the sprite (I use p2 physics and making json file with physics by PhysicsEditor, if it means something).

I made dirty hack for now - by changing the sprite so that the center of the triangle was in the middle of sprite, but it is horrible and temporary solution, of course.

Is there any clean solution for this problem? I think it must be something obvious, but can't figure it out for the second day.

Link to comment
Share on other sites

  • 4 months later...
On 27/5/2014 at 1:01 PM, d13 said:

sprite.pivot.x = sprite.width * .5;sprite.pivot.y = sprite.height * .5;

- No, this doesn't work.

 

`pivot` seems to reposition the sprite and change its centre point in mysterious and un-useful ways, so if anyone can clearly explain how it works I'd be extremely happy :)

:( I can't use the pivot to move the rotate control in the top center from other sprite mmm http://codepen.io/jdnichollsc/pen/KgdRvV?editors=0010

Link to comment
Share on other sites

  • 2 weeks later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...