[Open-Source] Smooth Skybox Transition V1 ( Skybox tweening )

Resources Community Resources
, , ,
#1

Hey everyone! I spent some time researching fake skyboxes to bring to the community a way to smoothy transition between skyboxes. Using 6mikael6’s fake skybox system with viewports, I have created a modular system which you can use to smoothly transition between skyboxes using tweening.

Since this is my first module that I’m open sourcing - its not going to perfect, although I tried to make it as good looking with clock time, it doesn’t look perfect, so let me know if you find a solution to make it better. Another issue I’m aware of is that the sky blurs when fading into the real sky - again I tried to make it look as good as I could. EDIT: I also found out that if you want this to work on big screen devices, you’ll have to lower the DISTANCE_FROM_CAM in PlaneModule however that will cause larger maps to be cut off by the sky. This will be fixed in the much better V2 module.

How do I use it?

Since these are client sided modules, they are really simple to install into your game. Simply import your modules into ReplicatedStorage (or wherever you keep your client modules) and type the following lines:

local SkyboxModule = require(game.ReplicatedStorage.SkyboxModule)
local PlaneModule = require(game.ReplicatedStorage.PlaneModule)

local planeInstance = PlaneModule.new() -- Creates a surfacegui for the fake sky

And then once you’ve done that, you can use the SkyboxModule to tween your sky

SkyboxModule.ChangeSky("ExampleSky")

Please make sure that the sky you want to tween to is in a folder called SkyFolder (or whatever you change it to) and you have your sky called CurrentSky, this is where the scripts gets the images of the skies from.
image

Where can I download this?

Here is a link to an RBXM and RBXL of the modules.
SkyboxTweeningV1.rbxm (14.4 KB)
TweenSkyV1.rbxl (72.4 KB)

Thanks for reading!

24 Likes
#2

This is super nice! Thank you for open sourcing this

1 Like
#4

It applies all the textures of the sky you are about to tween to a false sky mesh, which the transparency is tweened in so it looks smooth, at this point you see a fake sky of the sky you want which is cool but seeing a real sky is better

So then the real sky faces change to the sky you want and the fake sky tweens out, revealing the real sky. Essentially, the fake sky mesh just makes it looks like the sky is transitioning. I put short summaries of each function in the skybox module for you to be able to read clearly if you’d like to look

3 Likes
#5

idk if it’s because i’m using vulkan, but the skybox seems to be broken when tweening, i tested in my own place file and the example you provided.

Video

#6

I see, upon investigation I found it this issue is happening because of Roblox’s max size limit being 2048, which Isn’t enough to cover the width of your screen so either you could go into PlaneModule and decrease the DISTANCE_FROM_CAM to like 750, however that may cause large maps to look weird because the sky cutting off the edge, or you could make it so there are 2 effect planes which can connect together to make a full canvas able to cover your screen. Ill make sure to do that when I post V2 of this module

1 Like
#7

alright then, i’ll see if i can fix it