How to: cool night to day scene

I wanted to animate a night to day scene. My pet peeve is authors writing “The next day” etc. to specify the time :see_no_evil:

I think it came out pretty cool :innocent: What do you think?

ezgif.com-resize(1)

Sorry for the bad quality I recorded it on the web previewer… :grimacing:


How to do it?

1. You’ll need:

  • 2 different overlays of what you want to have in the front - In my case it’s a forest.
    A night and day version of it.

  • Sun overlay

  • Sunrise sky overlay

  • Night sky overlay
    For optimal result I recommend having it bigger than the usual 640x1136px and also with a gradient of daylight at them bottom. Something like this:

dusk sky

  • Day sky background

I recommend having your overlays already in the size 640x1136 so that you won’t have to spot directing them. (Except for the sun and night sky, as they will be moving)

2. Place the overlays:
Bottom ‘layer’ is your day sky background.
Layer 0 - sunrise sky
Layer 1 - night sky
Layer 2 - sun
Layer 3 - day version of your scenery (forest)
Layer 4 - night version of your scenery

It should look something like this:

INT. DAYLIGHT SKY - DAY with SUNRISE SKY at layer 0 with NIGHT SKY at layer 1 with SUN at layer 2 with FOREST DAY at layer 3 with FOREST NIGHT at layer 4

Place the night sky overlay so that you cannot see the daylight at the bottom.
Place the sun behind your scenery overlays, so that you can’t see it.

4.

So basically all your ‘night stuff’ is at top and goes to ‘day stuff’ to the bottom. Pretty much all you do is fading all the overlays one after another.

Your sun overlay starts to move first, so that the sky can change meanwhile.
Then your night sky starts moving up and fading at the same time (shifting faster than fading). Meanwhile your night scenery overlay fades. Finally your sun rise sky fades.

‘Template’:

&overlay SUN shifts to x y in a
@overlay NIGHT SKY shifts to x y in b AND overlay NIGHT SKY opacity 0 in c AND overlay FOREST NIGHT opacity 0 in c THEN overlay SUNRISE SKY opacity 0 in d

a - amount of time you want the scene to last
b - 1/2 a
c - a little longer than b
d - 1/2 b

Sorry for the way I wrote it, just wanted to make it professional :nerd_face:

This is how I coded my scene, for reference:

INT. DAYLIGHT SKY - DAY with SUNRISE SKY at layer 0 with NIGHT SKY to 1 -278 0 in zone 1 at layer 1 with SUN to 1.504 -87 120 in zone 1 at layer 2 with FOREST DAY at layer 3 with FOREST NIGHT at layer 4

@pause for 0.6

&overlay SUN shifts to 247 498 in 12
@overlay NIGHT SKY shifts to -709 333 in 6 AND overlay NIGHT SKY opacity 0 in 8 AND overlay FOREST NIGHT opacity 0 in 8 THEN overlay SUNRISE SKY opacity 0 in 4

Hope it’s understandable :slight_smile:


Of course you can make a day to night scene the same way too! For that just have the layer order ‘upside down’ and instead of a sun overlay use a moon overlay :slight_smile:

35 Likes

thats pretty cool!

2 Likes

HOLY HELL THAT LOOKS SO COOL GIRLLL :see_no_evil:

i also hate the ‘next day’ thing, and will definitely try to code something like this into my story!! <33

5 Likes

lmao as much as that transition is cool im too lazyyy ;-;

3 Likes

bish same :sneezing_face: but i’m trying eheheh :wink:

3 Likes

I’m sometimes lazy too, but the outcome is so worth it :face_with_monocle:

This looks amazing!!

1 Like

I loved it! :heart_eyes: :clapping:

1 Like

Amazing! :heart_eyes: What did you use to make the animation?

1 Like

I used 6 overlays and worked with the opacity. It only took 2 lines of script :grin:

Should I post a tutorial on how to directing this kind of transition? :thinking:

  • Yes!
  • Whatever :woman_shrugging:t3:

0 voters

2 Likes

that looks totally radical dude :call_me_hand:t3:

nah but all seriousness, you got some real animating talent there :two_hearts:

2 Likes

So cool :scream::star_struck:

1 Like

This is so smooth :heart_eyes:

1 Like

Thank you :pleading_face:

Very nice!

1 Like

well people are lazy tbh, lol.

4 Likes

IT’S AMAZING!!! :star_struck: :star_struck: :star_struck:
If you don’t mind me asking! How do you do this? I have been trying to figure it out but had no luck!

1 Like

I’m going to edit the thread and explain :slight_smile:

1 Like

That looks awesome!

1 Like

Thank you! :relaxed:

1 Like