Jump to content

How to porpely flip and rotate a sprite?


Recommended Posts

before that, I've ready search the google, this forum, stack overflow, and found only broken answers.

My doubt:
-how can I flip a single sprite in Pixi?

What I need:
-flip the sprite BUT hold its center (width/2, height/2) in the same place like it was not flipped, without change the anchor. Example:


After flip X:


NOTE: the sprites stays in the same place X and Y.

So how can I do this?

Second question:

After flip the sprite, how to rotate with origin in its center?

The sprite is in the smae position, but I want rotate only relative to width/2 and height/2, and not with the anchor.

I've tryed set the pivot to center of size but the sprite is moved to the anchor.

Is possible do this without gambling with anchor?


Link to comment
Share on other sites

Anchor and Pivot are your friends.  If you don't wish to use them because you want to maintain left alignment then consider using a child Sprite, or other arrangement of Containers.  Then you can freely adjust the anchor (or pivot) of any child, do the transformation as would be intuitive and the parent will be unaffected.  There is minimal overhead in using children and they can improve code readability and maintenance.  The alternative (using a single Sprite) involves translating (x=-width) before the flip (scale.x*=-1) or rotation, then translate back again when done.  It's unlikely to feel as intuitive - and is likely more prone to mistakes or confusion later?

Link to comment
Share on other sites

You can flip the texture region. "new PIXI.Texture(texture.baseTexture, texture.frame, texture.orig, texture.trim, 12)" , 12 is one of flip rotations. That way you can change texture instead of setting scale to -1.

I implemented that stuff to help that kind of cases, and so far I didnt see other renderers that allow that.

Big demo: https://pixijs.io/examples/#/textures/texture-rotate.js

Link to comment
Share on other sites

I suggest to add a temp method to debug and understand.

        function debug() {
            const d = new PIXI.Sprite(PIXI.Texture.WHITE);
            return d;

than you can create your sprite and understand how pivot anchor rotation will work.

const sprite =  new PIXI.Sprite(texture);
// setup anchor, pivot rotation ....


Link to comment
Share on other sites

@ivan.popelyshev thanks, I will look the example.

@jonforum but, I know how it works. What I don't understand is, why when set scale.x to -1 the boundary of the image of the sprite goes to left of the top left corner position.

I came from frameworks where that (the scale) doesn't affect the boundary of the texture draw on the screen. For example, with SDL2 you can flip horizontally the drawing but the boundary doesn't change to left (outside of the top left corner).

I know that I'm need to know something, but I don't know what is haha.

maybe realtive to the transform matrix, or something made inside the pixijs that I can see directly. Others engines made the scale like pixijs, for that, I'm certain that I'm forgetting to learn something.

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