Jump to content

Rotate a Sprite without Craziness


Recommended Posts

Sorry for the "craziness" but rotation of a sprite is getting me down. When I rotate my sprite it's changing it's position.

I've tried with and without a pivot and there seems to be no logic.

Is there any way to just change a sprite which looks like this:




without getting


As you can see below: with no pivot and a varying rotation I get a different position of the bullet even though the laser is always created at the center of the player (pos).

The bullet's rotation is calculated to always make it face the bullet's destination which is the center of the screen.


Link to comment
Share on other sites

OK, it seems that the pivot applies to the position of the object as well as it's rotation. So by default it's 0,0 the top left corner of the sprite.

Whenever I set the pivot to the center of the object:

this.pivot.set(this.width/2, this.height/2);

I was working against my own positioning:

this.x = pos.x + this.width/2;
this.y = pos.y + this.height/2;

By realizing the position applies to the pivot (this is not obvious from the name "pivot" ) I could correct my code:

PIXI.Sprite.call(this, g.ui.sprites.bullet);
this.size = new Vector(this.width, this.height);
this.tag = "bullet";
this.pivot.set(this.width/2, this.height/2);
this.x = pos.x;
this.y = pos.y;
this.dx = g.ui.width/2 - pos.x;
this.dy = g.ui.height/2 - pos.y;
this.speed = new Vector(this.dx/10, this.dy/10);
this.rotation = Math.PI/2+Math.atan2(this.dy,this.dx);


Link to comment
Share on other sites

Still confused. This time about positioning and pivot.

If I use this.anchor = {x:0.5, y:0.5} then my player object positions according to it's center:


 However, as soon as I set the pivot:

this.anchor = {x:0.5, y:0.5}
this.pivot.set(this.width/2, this.height/2);

Then everything is weird again and the player is offset from where I position it.


Please help understand how to "center" an object for all movement, positioning and rotation.


Edited by JackParke
Link to comment
Share on other sites

> Please help understand how to "center" an object for all movement, positioning and rotation.

obj.anchor.set(0.5, 0.5);

If it doesnt work, investigate whats wrong: for example, if you used texture packer and it did trim a texture, there can be a bug that can be fixed, depends on the program you used. I remember that pixi doesnt understand trimming made by Shoebox, but I have workaround for that.

Please describe your case and provide fiddle.

Link to comment
Share on other sites

If you know the math, you can do anything with parameters, and you can also make your own Transform and your own Sprite, if that's the problem.

I can't explain the meaning of those things without linear algebra :(


anchor is position of the image inside that local coordinate system. Position/scale/rotation/pivot are transforms that are applied in that exact order. Those things can be implemented 100 different ways, you have to either use pixi canonical, either invent your own, just assign your own transform class to display objects.


Theoretically, anchor should be enough. But sometime people want to define rotation point that is not (0,0) : anchor=0, position = x + width/2, y+height/2, pivot = width/2, height/2. The idea is that you map "position" on global coords to "pivot" on local.

Link to comment
Share on other sites

I did 3 years of Math at Uni incl. linear algebra so I understand that the order of transformations is important.

...but sometimes you just want a sprite to be positioned and rotate on it's center. To me that makes the order irrelevant. Sounds like it should be the default. Don't know why it works in a fiddle but not in my game. If I could just understand what I am seeing.

Is there no diagram explaining how position, rotation, scale work together with anchor and pivot?

Link to comment
Share on other sites

You describe behaviour of anchor=0.5. It should work for you. Its how anchor supposed to work in pixi.  IF it doesnt work for your case -> its a bug related to textures that you use, and I cant find the texture of tie fighter in your code, so I really dont know whats going on with it. You dont have to fiddle with pivot and position, just set anchor and find why the texture is wrong.

Sorry, I cant draw, I can only describe it: position moves elemtn, then rotation is applied, then scale, then it "moves back" through pivot. Anchor is positioning the sprite inside local coords. IF you want picture, ask @themoonrat or someone else :)

P.S. Sprites in pixi are positioned at the same point as they are rotated around. It is always the same, pivot cant change it.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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