cpu_sam Posted May 21, 2019 Share Posted May 21, 2019 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? ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
b10b Posted May 21, 2019 Share Posted May 21, 2019 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 and ivan.popelyshev 2 Quote Link to comment Share on other sites More sharing options...
cpu_sam Posted May 21, 2019 Author Share Posted May 21, 2019 @b10b man, great idea use as child. I will use this in my game. Thank you! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted May 22, 2019 Share Posted May 22, 2019 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 Quote Link to comment Share on other sites More sharing options...
jonforum Posted May 22, 2019 Share Posted May 22, 2019 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()); Quote Link to comment Share on other sites More sharing options...
cpu_sam Posted May 22, 2019 Author Share Posted May 22, 2019 @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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.