Sign in to follow this  
eggborne

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.

Share this post


Link to post
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!

http://ivanpopelyshev.github.io/examples/index.html?s=demos&f=texture-rotate.js&title=Texture%20Rotate

Use this, latest development version of pixi:

https://github.com/ivanpopelyshev/examples/blob/gh-pages/_site/js/pixi.js

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)

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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?

 

Thanks

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.