How can I add a foggy sky to my game?

Hello! I am building a showcase similar to Portal 2 and wanted to know how I could make the skybox look like this:Portal Sky
I tried messing around with fog, but I am not sure what to do. If you could let me know how I could make the sky and fog look like this, it would be awesome!
Thanks for reading :smiley:

3 Likes

In my own personal experience, ranging across multiple game engines the best solution to fog actually looking like fog and matching with the skybox is to match the color of the fog with the color of the skybox.

As you can see here the fog is not the correct color at all and as a result the buildings in the distance are even more obvious

However here is what the same buildings look like when the fog is correctly colored

The difference is obvious and it makes the fog look a lot better. Now this method obviously relies on the color of your skybox, so if you’ve got loads of white clouds behind your foggy objects it might not end up looking that good.

For example here are some clouds behind an object/building
RobloxStudioBeta_pmNklWEBln

However from what I can see you only need to use one color for the skybox. To achieve a one color skybox you could just create a 1x1 Resolution image in any photo editing software, Paint would even do the job, and just set that pixel to the color you want for your skybox. Save it and use it for all six sides of your skybox.
Here is the same scene just with the skybox set to one color
RobloxStudioBeta_HANZNS0gM7
Here is what my skybox image/texture file looks like
4h93khue7Q

To speed up the process and make you guess less, you can use the pick screen color button in the color picker for the fog and just make the color of your fog the color of your skybox easily.
RobloxStudioBeta_j7XZuGYWDX

The last and perhaps the simplest thing would be setting a good FogStart and FogEnd value.
FogEnd is the point at which your fog is 100% visible
FogStart is the point at which your fog starts being visible
Using this logic you can control how close you want your fog to be, and how fast do you want it to go from no fog to 100% fog.

If there is anything else I didn’t cover that’s bothering you I am more than happy to figure out how to get your fog to look perfect!

10 Likes

Thank’s a lot, I will try this tomorrow :slight_smile: If I need any fog help, later on, I will message you!

1 Like

I have no idea how to use windows paint, I copied the color, but I don’t know how to save it or upload it into roblox.

The color picker I have sent to you is the color picker inside of Roblox Studio in the Lighting Fog Properties. It’s so you can choose the color of your fog easier.

To make a skybox texture/color in paint do the following:

  1. Open a new file
  2. Press CTRL + W
  3. At the top choose Pixels instead of Percentage, and enter 1 and 1 into both boxes.
    Change size
  4. You can hold control and scroll up to zoom in as much as possible into your 1x1 pixel image.
  5. Choose your desired color and use the bucket tool by clicking to fill in your image. It should look something like this:
  6. Now simply do CTRL + S to save your file, save it as a JPG anywhere you will remember.
  7. Open your game in Roblox Studio
  8. Add a Sky object to your Lighting service. Should look like this:
    sky
  9. You have to publish your game to get to access the game panel which let’s you upload assets.
  10. Click the import button and find the JPG you created earlier using Paint. The game panel looks like this:
    game
  11. Go back to the Sky object you have created in the Lighting Service and take a look at it’s properties.
    You will see the options to set SkyboxBK, SkyboxDN, SkyboxLF, SkyboxRT, etc… Click on all of them and find the image you have just uploaded and click on it.
  12. Success?

I somehow broke windows paint, it legit broke. I am doing paint.net now

Got it working, thanks a lot :slight_smile:

1 Like

Adjusting fog is really easy! Go to “Lighting” scroll all the way to the bottom and you can play around with those settings, as well as the color and the end results are really cool. But also searching around for sky boxes that are compatible works well. And with roblox advancing so fast, and improving everything maybe fog will get an update

2 Likes

Great! Hope you enjoy making your Portal build.

1 Like

He could of also made a double sided sphere mesh made it really big and called the skybox lol. It would work with multiple fog colors. but I guess that works too, Im not sure if you could do that then though

1 Like

I’m looking at the documentation, and it says the fog settings are not available when you have a custom ‘atmosphere’ object like a skybox, do you know any ways around this problem? Devhub