Jump to content

Sprite Requiring Rotation Within A Fixed-Size Tile


Recommended Posts

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.set00 );
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.baseTexturesprite.texture.framenullnull8); )


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:


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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:


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?


Link to comment
Share on other sites

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.

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