2D Rotation deform

This shader allows to deform a sprite by rotating it. It’s very useful to make quick animation, move trees, create springy things, etc.. 
Learn more about the rotation matrix: https://en.wikipedia.org/wiki/Rotation_matrix

How to use?

  1. Make sure to have enough empty space in your sprite for the deformation to happen. If you don’t, the sprite will clip
  2. Add shader to sprite
  3. Play with the rotation & rotation offset

Parameters

  • rotation: amount of rotation to apply, negative to rotate left, positive to rotate right
  • rotation_offset: where to apply the rotation on the sprite. For example, making the offset (0.5, 0.9) will apply the rotation near the bottom of the sprite. This is useful is you want the feet of the character to be “anchored” to the ground for example.

Enjoy!

 

 

Shader code
shader_type canvas_item;

uniform float rotation = 0.0;
uniform vec2 rotation_offset = vec2(0.5, 0.5);

void fragment() {
	// Make the rotation dependant on the UV. Useful to "anchor" the
	// bottom of the sprite
	float rotation_anchored = rotation * (1.0 - UV.y);
	
	// Create the rotation matrix: https://en.wikipedia.org/wiki/Rotation_matrix
	mat2 rotation_mat = mat2(vec2(cos(rotation_anchored), sin(rotation_anchored)),
							vec2(-sin(rotation_anchored), cos(rotation_anchored)));
	
	// Offset the UV to apply the rotation
	vec2 centered_uv = UV - rotation_offset;
	// Apply rotation
	vec2 rotated_uv = centered_uv * rotation_mat;
	// Offset the UV back to normal
	rotated_uv = rotated_uv + rotation_offset;
	
	COLOR = texture(TEXTURE, rotated_uv);
}
Tags
2d, deform, godot4, rotation
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from mreliptik

Tiled texture inside of mask

Loading effect (color over grayscale)

3D simple animated flag shader

Related shaders

RotSprite-Like Algorithm for Cleaner Pixel Art Rotation

3D Rotation in 2D

Subscribe
Notify of
guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
TLS
TLS
3 months ago

Perfect little article, exactly the information I was looking to find.