spiderworm Posted January 8, 2014 Share Posted January 8, 2014 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 More sharing options...
Tarion Posted January 8, 2014 Share Posted January 8, 2014 Have you tried to set the anchor property of your sprite? I'm not totally familiar with it but could to the trick. Link to comment Share on other sites More sharing options...
Mike Posted January 8, 2014 Share Posted January 8, 2014 As Tarion said: this.obj.anchor.setTo(0.5, 0.5);Here is an example:http://gametest.mobi/phaser/examples/_site/view_full.html?d=sprites&f=sprite+rotation.js&t=sprite%20rotation Link to comment Share on other sites More sharing options...
spiderworm Posted January 8, 2014 Author Share Posted January 8, 2014 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 More sharing options...
rich Posted January 8, 2014 Share Posted January 8, 2014 That's because anchor is for texture alignment. If you only need it to rotate around the center then it'd work (as shown in lots of the examples), otherwise you should use sprite.pivot. Link to comment Share on other sites More sharing options...
spiderworm Posted January 8, 2014 Author Share Posted January 8, 2014 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 More sharing options...
spiderworm Posted January 8, 2014 Author Share Posted January 8, 2014 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 More sharing options...
rich Posted January 9, 2014 Share Posted January 9, 2014 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 More sharing options...
schmevie15 Posted March 5, 2014 Share Posted March 5, 2014 I had a similar question about rotating about a particular fixed point. Is there a way to rotate about a fixed point, for instance the center of my screen without having to set the anchor to that particular point? Thanks! Link to comment Share on other sites More sharing options...
d13 Posted May 27, 2014 Share Posted May 27, 2014 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 jdnichollsc 1 Link to comment Share on other sites More sharing options...
CtlAltDel Posted May 27, 2014 Share Posted May 27, 2014 pivot is currently 'broken' in pixi:https://github.com/GoodBoyDigital/pixi.js/pull/730 You can compensate for it by setting position equal to pivot after setting pivot that should maintain correct position Link to comment Share on other sites More sharing options...
d13 Posted May 27, 2014 Share Posted May 27, 2014 pivot is currently 'broken' in pixi:https://github.com/GoodBoyDigital/pixi.js/pull/730 Thank you for posting that, I thought I was losing my mind!`pivot` is definitely broken as-is. Link to comment Share on other sites More sharing options...
d13 Posted May 28, 2014 Share Posted May 28, 2014 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 More sharing options...
bluedot Posted July 30, 2014 Share Posted July 30, 2014 Has this been fixed ? setting pivot still shifts the sprite. Link to comment Share on other sites More sharing options...
d13 Posted July 30, 2014 Share Posted July 30, 2014 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 More sharing options...
ForgeableSum Posted February 3, 2016 Share Posted February 3, 2016 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 More sharing options...
Greeny Posted May 3, 2016 Share Posted May 3, 2016 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 More sharing options...
jdnichollsc Posted September 13, 2016 Share Posted September 13, 2016 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 More sharing options...
d13 Posted September 24, 2016 Share Posted September 24, 2016 Does anyone know if Pixi v4.0 has a good solution for this "problem"? Link to comment Share on other sites More sharing options...
Recommended Posts