Seamlessly tiled, scrolling, animated backgrounds

[melody]

This can be seen in the Kirby games, and also on some guy's avatar that I found when I was browsing The Spriter's Resource. I don't know how to animate something like that. I think there's some trick to it that I'm not understanding. I need to know how to do this for a game I'm working on that draws some aesthetic influence from Mischief Makers and stuff like that.

Here are some examples.




I've found some tutorials on how to create a perfectly tiled image, but animating it is another story. Any ideas?

[Simpsons Dumper]

If you have a pattern, animating it is just a case of moving it along by its width/height minus 1 pixel (or whatever your speed is), at which point the animation loops.

Let's use the Kirby pattern as an example. It is a 32×32 tile:



If we keep moving it along, we can get a seamless scroll:



This isn't much good as it is, so each frame we tile it to fill as large an area as we want:



These animations may look a bit jittery on a 60Hz display due to the GIF format not supporting 30fps (only multiples of 10ms) but it'll do as an example since you wouldn't have this issue when programming a game anyway.

[melody]

What about making a pattern like the Kirby one? I guess something like that could be done via trial and error. The way I'm doing it now, because I'm not sure how to make a pattern like that, is to create a giant block of text, and shrink the canvas down without actually shrinking the image. Then, I have extra space to reposition the image during the animation step, and it seems to work. But I feel like my approach is hare-brained.