So, I have a sprite. I have a texture that’s essentially a sprite sheet, and by scaling it horizontally to unsquish it, and offsetting it by a vector horizontally (the sheet is horizontal), I’ve made a shader that can “select” whichever tile I want. These tiles are then also moved slightly vertically.
My problem is, the next thing I need to do is rotate them from their centre; from the point I’ve moved them to. But since I was adding to the original UV to move them, and multiplying it to scale, the UVs are all messed up, so I’m having trouble with that.
I understand how to rotate the UV by itself; I’ve seen plenty of snippets for that, and can do that just fine on the original UV. But how do I rotate it with a pivot point relative to my tile?
Hi,
I have a function in my shader library that’s use to rotate a vector based on a pivot:
vec2 rotateVector2(vec2 v, float theta, vec2 pivot)
{
float c = cos(radians(theta));
float s = sin(radians(theta));
return vec2(c * (v.x - pivot.x) + s * (v.y - pivot.y) + pivot.x, c * (v.y - pivot.y) - s * (v.x - pivot.x) + pivot.y);
}
Which can be used like this:
Would something like this work for you?
I know you said you know how to rotate UVs so I’m not sure that’s the kind of function you’re looking for. If not, could you please your shader code and an example of what’s you’re trying to do?
vec2 AdjustedUV = UV;
//This is just here for the example so you know what size and number of tiles I'm working with
int TileResolution = 8;
int AmountOfTiles = 8;
float OffsetPerTile = 1.0/float(TileResolution);
//They're tiled horizontally, so I'll scale it to make it the right size horizontally.
float HorizScaling = 1.0/float(AmountOfTiles);
AdjustedUV.x*= HorizScaling;
int TargetTile = 6;
vec2 Offset = vec2(OffsetPerTile * float(TargetTile),0.0);
AdjustedUV +=Offset;
//Next thing I have to do for my purpose is make it a bit smaller, then adjust the position.
float DesiredScale = 0.6;
//The - and + 1.0 moves it to the bottom of the UV
AdjustedUV.y = ((AdjustedUV.y - 1.0) / DesiredScale) + 1.0;
//Now I just want to move it up a certain amount
float HeightOffset = 0.35;
AdjustedUV.y += HeightOffset;
//ROTATION GOES HERE
COLOR = texture(tex, AdjustedUV);
This is basically what my code is doing; I stripped out some other stuff that determines a few of the numbers because it’s not relevant.
What I want is, having moved and scaled the UV around, to rotate it around its own centre. The middle of the tile that I’ve scaled and moved across and up.
By using the function I’ve shared above, would it work with a line like this? Basically using a rotation with a pivot centered on the Y axis (you can tweak the value if needed) and applying the offset on the X axis.
AdjustedUV = rotate(AdjustedUV, angle, vec2(Offset.x, 0.5));
angle being a float uniform, in degrees.
Another suggestion: have you looked at what’s possible with Sprite2D regions? They’re basically used for sprite sheets but can work with a custom shader. What could be worh a try is checking if the region system would not make your life easier when writing the scaling/rotation shader.
