2D Toolkit Forum

2D Toolkit => Support => Topic started by: fsadeq on March 25, 2013, 04:30:34 pm

Title: Fake a night/day cycle trick
Post by: fsadeq on March 25, 2013, 04:30:34 pm
I recall a very long time ago that someone (I think Unikron) mentioned something about background images being set up a certain way that lends itself well to cycling through different colors. I think it had to do with only having a 1px width portion of the desired color in the source image, and then doing something with the x-scale during runtime. Does this ring a bell at all? It was a pretty inexpensive way of achieving this effect.
Title: Re: Fake a night/day cycle trick
Post by: unikronsoftware on March 25, 2013, 07:40:38 pm
This does vaguely ring a bell. I did this once for a game a long time ago. You don't need to do all the funky stuff I did back then - you can achieve exactly the same result with the clipped sprite.

Draw a long gradient, representing the sky at different times of day. Top = top of sky, Bottom = horizon color. I grabbed the gradients from a properly calculated physically correct sky.

Set clip rect to 0, 0, 0.01, 1, rescale your sprite to fit once more, i.e. scale by 100, 1, 1 to get it back to the original size. You can then change the x clip rect value to sync sky to time. It looks really good if you have a good set of gradients.
Title: Re: Fake a night/day cycle trick
Post by: fsadeq on March 26, 2013, 11:53:51 pm
Hmm, I don't think I'm following. Adjusting the x clip rect value essentially moves the "mask" over the image. How does this work, since the image just appears to be translating it's position?
Title: Re: Fake a night/day cycle trick
Post by: unikronsoftware on March 27, 2013, 12:04:28 am
Once you know the scale, you can just move the sky back to compensate. Basically what you want to do is simulate a UV sweep - you're displaying a very thin slice of the UVs at a time, and then moving that window over the gradient to display parts of it at a time.