Sprite Requiring Rotation Within A Fixed-Size Tile

[NerdyElf]

I've been trying for hours to find a solution to this, and I can't seem to find one that works without disrupting the bounds / positions of the base object.

What I have is a grid of 48x48 tiles, and arbitrarily sized sprites within them. For example, multiple platforms that are 48x24 and which can connect together.

What I need is for the platform to be able to rotate left, right, or a half rotation (such that it's upside down). A flip would also suffice for the half rotation.

I tried texture rotation, and that definitely wasn't what I needed. It just stretched the image very strangely for me within the platform.

I then tried solutions like this:

sprite.pivot.set( 0, 0 );

sprite.rotation = 270 * Math.PI / 180;

obj.pos.y += 48;

Technically, that positions it exactly where I need. The problem is that this doesn't work, because the collision system and bounds are handled separately outside of PIXI.

In short, I need the *image* to rotate within the tile, but I need the x, y position to remain at the same location (the upper left corner of the tile).

Bonus points if anyone can explain a proper X flip and Y flip, since the examples I found also didn't work (e.g. sprite.texture = new PIXI.Texture(sprite.texture.baseTexture, sprite.texture.frame, null, null, 8); )

 

[ivan.popelyshev]

Texture rotations are the best for this case.

> since the examples I found also didn't work

I think rotations work only if you also specify third and fourth param. just copy frame there

const orig= texture.frame.clone();
const trim = new PIXI.Rectangle(0, 0, orig.width, orig.height);
rotatedTexture = new PIXI.Texture(texture.baseTexture, frame, orig, trim, 8);

I also recommend to use PIXI.Graphics beginTextureFill instead of sprite if you have many tiles.

[NerdyElf]

Well, the issue with rotating the texture is that it does it with the 48x24 limits. So when you rotate by 6, for example, it shows it really scrunched up because its trying to fit inside the original 48x24, but with a texture that is now like 24x48.

See the reference image:

https://ibb.co/RNBpY2m

The one on the left is three separate platforms, connected by 48x48 tiles, but they're at the top.

The ones on the right are supposed to look like that platform, but rotated to face the right.

[ivan.popelyshev]

> it shows it really scrunched up because its trying to fit inside the original 48x24, but with a texture that is now like 24x48.

You have to look closer in https://pixijs.io/examples/#/textures/texture-rotate.js , it switches width/height exactly for that case. However, i think trim's "x" and "y" should be zero there, otherwise it'll be strange if you use texture inside an atlas.

[NerdyElf]

Okay, I figured out what you meant. I did this:

const orig = sprite.texture.frame.clone();
const trim = new PIXI.Rectangle(0, 0, orig.height, orig.width);
sprite.texture = new PIXI.Texture(sprite.texture.baseTexture, sprite.texture.frame, orig, trim, 6);

That does allow me to use texture realignment potentially, but I would still need to have an offset. It still aligns it to the left, like if I'd used a pivot at (0,0) and then rotated it. See this reference:

https://ibb.co/L0J2FFG

Basically, I need that platform to align where that red outline is (shifted 24 pixels to the right).

How would I go about doing that?

 

[NerdyElf]

Ah! Nevermind. The answer was obvious. Just applied 24, 0 in the trim rectangle.

Thank you so much!

[ivan.popelyshev]

Huh, then i forgot whats in trim.x/y . Its easy to forget all those params, I look in the code every time I use them.

[ivan.popelyshev]

Welcome to the forums! I congratulate you on first solved issue, and advice to read stuff from this subforum, I have answered tile-related questions every week. Also https://github.com/pixijs/pixi.js/issues , both open and closed issues are good source of knowledge. If you feel strong enough, clone pixijs sources and next time just look into them if you think something is wrong with docs

Transforms and Texture are the basics, I'm glad you are spending time on them. It will help even if you work with other renderers/game engines.