How to porpely flip and rotate a sprite?

[cpu_sam]

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:

Before:

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?

 

[b10b]

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?

[cpu_sam]

@b10b man, great idea use as child. I will use this in my game. Thank you!

[ivan.popelyshev]

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

[jonforum]

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

        function debug() {
            const d = new PIXI.Sprite(PIXI.Texture.WHITE);
            d.anchor.set(0.5);
            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 ....
sprite.addChild(debug());

 

[cpu_sam]

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