Jump to content

Possible to flip the appearance of a sprite (vertically or horizontally) without effect on its size/coordinates?


Recommended Posts

I have sprites which are all anchored at 0.5 for x and y, and they are often "flipped" via (e.g.) someSprite.scale.x *= -1. Because their anchors are centered, they don't move immediately because of this. However, changing to a negative scale mucks with their size and coordinates, because now a 20px-wide sprite will report a width of -20px, and it also interprets changes to its position inverse to what they were before (sprite.x++ will cause it to move up on the screen).  
This makes sense and everything, but the sprites' movement and activity is not always related to their scale. I know there must be a simple way to make a mirrored "copy" of a texture which can be swapped out on a single sprite without having to change its scale from positive to negative constantly.

Link to comment
Share on other sites

And that's my moment of glory! I had the same problems and I knew that someone will need that too :)

Yes, you can create/rotate a flipped texture now!


Use this, latest development version of pixi:


This build isnt even in github yet, you have to take that version or build it from "dev" branch on github :)

var flipX_Texture = new PIXI.Texture(texture.baseTexture, texture.frame, null, null, 12);
var flipY_Texture = new PIXI.Texture(texture.baseTexture, texture.frame, null, null, 8);

Textures arent actually flipped or rotated, its just trick with UV's (webgl) and coordinate systems (canvas)

Link to comment
Share on other sites

3 minutes ago, eggborne said:

Thank you so much! So you're telling me this "flipped" texture won't have any weird baggage left over from from being flipped? It will be just as though it were a new image completely?

Yep. The only problem you can encounter possibly, if the image were trimmed by texturepacker on different number of pixels from two sides. I dont know will it work in that case or not, I didnt test it.

Link to comment
Share on other sites

  • 2 years later...

Lol, yes, lets see if they are really the "most anal" sprite!.

Flip the texture with rotate=8 is an option, but what happen with the animatedSprite?.

If I load an animatedSprite with 10 frame looking to the left side, changing the texture rotation would require to add 10 more rotated textures!. And this is just an example, it could be more.

scale.x = -1 look like the solution BUT it change the position texture inside the object!! 

Any idea for this?



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