Infinite custom texture scrolling with modifiers

The scrolling seems laggy because i didn’t loop the gif correctly. It looks fine inside of Godot. It has modifiers for your custom texture, how many times it should be repeated, scrolling speed, row offset and angle.

Shader code
shader_type canvas_item;

uniform float scroll_speed : hint_range(0, 2) = 0.08;
uniform float angle_degrees : hint_range(0, 360) = 45.0;
uniform float repeat_x : hint_range(1, 20) = 20;
uniform float repeat_y : hint_range(1, 20) = 12;
uniform float row_offset : hint_range(0, 1) = 1;
uniform sampler2D texture_to_scroll;

void fragment() {
 float angle_rad = radians(angle_degrees);

 vec2 direction = vec2(cos(angle_rad), sin(angle_rad));

 vec2 offset_uv = UV - (TIME * scroll_speed * direction);

 float offset = fract(floor(offset_uv.y * repeat_y) * 0.5) > 0.0 ? (row_offset * 0.324) : 0.0;

 offset_uv.x += offset;

 vec2 scaled_uv = vec2(fract(offset_uv.x * repeat_x), 
              fract(offset_uv.y * repeat_y));

 vec2 texelSize = vec2(1.0) / vec2(textureSize(texture_to_scroll, 0));
 vec2 snappedUV = round(scaled_uv / texelSize) * texelSize;

 COLOR = texture(texture_to_scroll, snappedUV);
}
Live Preview
Tags
2d, animation, infinite, scrolling, texture
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.

Related shaders

guest

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
yourFAN
yourFAN
1 year ago

You save me..

Dr4kfire
9 months ago

It’s nice, but I can’t stretch the color rect I applied this shader on because it will also stretch the texture

Belzecue
Belzecue
1 month ago
Reply to  Dr4kfire

Simply replace line:

vec2 offset_uv = UV – (TIME * scroll_speed * direction);

with:

vec2 offset_uv = SCREEN_UV – (TIME * scroll_speed * direction);