The VG Resource
Seamlessly tiled, scrolling, animated backgrounds - Printable Version

+- The VG Resource (https://www.vg-resource.com)
+-- Forum: Discussion Boards (https://www.vg-resource.com/forum-133.html)
+--- Forum: Help me! (https://www.vg-resource.com/forum-137.html)
+--- Thread: Seamlessly tiled, scrolling, animated backgrounds (/thread-36299.html)



Seamlessly tiled, scrolling, animated backgrounds - melody - 11-06-2019

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.

[Image: 19480.png]
[Image: avatar_58656.gif]

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


RE: Seamlessly tiled, scrolling, animated backgrounds - Simpsons Dumper - 11-06-2019

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:

[Image: attachment.php?aid=10109]

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

[Image: attachment.php?aid=10110]

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

[Image: attachment.php?aid=10111]

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.


RE: Seamlessly tiled, scrolling, animated backgrounds - melody - 11-06-2019

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.