Introduction
What can a skybox do for you? is a question that I don’t think is asked much in day-to-day life. But it’s certainly something I have been thinking about a lot recently in my expedition to fully utilise the capabilities of the Roblox game engine to produce highly visually appealing games oozing with ‘game juice’ (real industry-standard terminology, trust me).
A skybox is, believe it or not, is the all-encompassing box* in the sky *(not all game engines render skyboxes the same way). In Roblox, a skybox is produced using six images stitched together into a cube map, folded together to encapsulate you inside a big cube. If you created 3-Dimensional shapes in elementary school arts & crafts class you’re sure to have been taught how to make a cube using a cube net.
The default skybox
‘This will do’ is what the majority of developers of Roblox games will think. If they even think about the skybox at all. But it can be so much more! The standard Roblox skybox, while pretty, is cliché and the clouds just sit there statically. I can show you how to upgrade your skybox and tune it to your own desiring!
Custom skybox
This skybox isn’t too far from the standard skybox in terms of colour, but it has three main advantages over the default skybox:
-
DYNAMIC CLOUDS that move in realtime and are customisable in terms of density, cover and colour (in addition to being affected by other Lighting properties which I will get to later…)
- Strongly recommended to pair with an Atmosphere otherwise your Clouds may render very faintly.
- Utilise
Workspace.GlobalWindto affect how quickly your Clouds move across the sky.
-
CUSTOM GRADIENT - The standard skybox is just blue through and through, but you can have a custom colour ramp to make it appear as if there is a sprawling horizon of colour in every direction.
-
ENVIRONMENTAL COLOUR ENHANCEMENT - when ‘EnvironmentalDiffuseScale’ + ‘EnvironmentalSpecularScale’ are ramped up in the Lighting properties, the colours from the skybox will light up and blend into your environment, which depending on what colours you pick, can really make your level ‘pop’ to achieve a certain visual mood.
Into the Blending-zone
I don’t imagine there is a single person involved in games or media design who hasn’t heard of Blender, but if this is your first time hearing the name, Blender is a state-of-the-art multi-purpose open-source computer graphics tool used to make just about anything from 3D models, textures, and even feature-length animations. The best part about it is that it’s free!
Blender quick tips:
- Rotate camera - [Middle mouse click + drag] - the camera will orbit around whatever object you have selected.
- Pan/move camera - [Shift + Middle mouse click + drag]
- Select object in viewport - [Left click]
- Lost yourself somewhere in the viewport? - [Home key] to reset your camera to frame everything in the scene.
Tutorial-specific hotkeys:
- Set selected camera as ACTIVE (it will be the camera used to render images) - [CTRL + Numpad 0]
- Render image from active camera - [F12]
Template Blender file:
Skybox_Generating.blend (988.6 KB)
Custom skybox demo place: (Game not included, sorry!)
CustomSkyboxExample.rbxl (51.1 KB)
Tutorial Start!
Step 1 : Familiarisation with the Template File
When opening the blend file, you should hopefully find yourself within the ‘Shading’ tab. If not, you can find it at the top of your program window. This is where you will customise the colour of your skybox.
*Side note: my Blender looks a little different because I have a custom Theme applied
The first thing you should see is a clump of cameras in the centre of the scene. There are six of them in total, each one rotated 90º in a particular direction to render each side of our cubemap.
Each camera is perfectly aligned with a field of view set to 90º so that when we render our images, they are distorted in a way so that they stitch back together in Roblox to give the impression of an inverted sphere (clever!) thus being perfectly seamless.
I’ve helpfully labelled some of the cameras with floating text, however those will not appear in the final renders.
Step 2 : Colouring the Sky!
Now it’s time to get creative! I won’t tell you what to do here, as this is YOUR skybox. But how to do it I shall do:
Manoeuvre yourself to the bottom of your program screen to find the Shader Editor. This is a node-based setup that can become quite complicated, but the template provided is very simple.
The main node of interest to you and I is the Color Ramp node, which matches a value from an input (the Fac(tor) node) - in this case a Gradient generator that is hooked up to match the shape of the skybox - and assigns it the respective colour from the colour sequence in our Color Ramp.
Click on a point on the timeline to select it. You can drag it and change the colour by clicking the big colour button at the bottom of the node to open the colour wheel. You can add new keypoints by pressing the ‘+’ button on the centre-left, and delete keypoints by selecting a node and pressing the ‘-’ next to the aforementioned button.
You may also want to experiment with the interpolation style (how the colours transition into one another) to fine-tune your style. I recommend ‘Ease’, and it will be the default in the template file.
Tip: If you can’t see the colour of your sky, ensure your Viewport Shading mode is set to Rendered Preview. This is found at the top right of your viewport, the 4th button in the set that look like little balls.
Step 3 (Optional) : Go crazy with it
While not mandatory, you can further customise your skybox with any other technical knowhow you may already have with Blender. This may be things such as:
- Creating a landscape (generating it using geometry nodes or sculpting it within Blender/ZBrush)
- Using shader/geometry nodes to generate static clouds to bake onto the texture (but I recommend using Roblox’s Dynamic Clouds.)
- Exporting an environment you made in Roblox into Blender and baking it into the skybox.
- Having custom interstellar bodies in the sky, like distant planets.
For the sake of example, here is me messing around with potential ideas for a skybox:
(This is by NO MEANS a good terrain sculpt)
Getting silly with the grease pencil & text
Importing my mascot avatar because why not.
Step 4 : Rendering to Texture
Going back to the standard gradient template file, I will show you how to extract the juicy data that you need. Begin by going to the Output tab on the Editor Type tab on the right-hand side of the window. Set your desired resolution (recommended 1024 or 2048px) - the image MUST be square. Choose your output path to where your images will save to.
Begin by selecting a camera, and take note of which one so that you can properly name your rendered image.
With one camera selected, hold down [CTRL] and press [Numpad 0] at the same time to make this your primary ACTIVE camera. It will also enter your viewport into the camera. The framed square in the middle is what your camera sees and what will be exported.
Now you’re here, hit [F12] on the keyboard to render from active camera. This will open a window with your result. In here, click the Image dropdown and save your image! I strongly recommend that you properly name your image with its respective direction, such as Skybox_Name_Front. This will make the upcoming setup easy.
Now simply do this with your other perspectives.
Time-saving tip:
If your skybox is a simple gradient like the template file, you only have to render THREE images rather than six. This is because your horizon will be the same for front, back, left and right. If this is your case, you may render just the Top, Bottom and Front view.
Common issue: “why is my skybox appearing darker than it should?”
While this problem shouldn’t be present in the template file provided (I kindly fixed it for you) - you ought to know for future endeavours. When I was learning to create skyboxes, they would appear darker/more washed out than intended. Even with a color ramp set to bright white, they would appear grey. To fix this, I was instructed to change ‘View Transform’ under Color Management in the Rendering tab to ‘Standard’ (it defaults to AgX in a new .blend file).
Step 5 : Implementation
With your resources acquired, hop back into studio and assemble your skybox. Begin by navigating to your Lighting in the Explorer and inserting a Sky object into it.
Upload the images you rendered and then copy the AssetIDs into the correct properties in the Sky object. (Tip: Right-click an asset in your Asset Manager/My Decals Tab to copy the ID without having to insert it to the workspace.)
The property names are shortened, but don’t be confused. (This object is ancient and is probably older than some of you reading [pre-2006] which explains the odd naming conventions.)
- SkyboxBk = Back
- SkyboxDn = Down
- SkyboxFt = Front
- SkyboxLf = Left
- SkyboxRt = Right
- SkyboxUp = figure this one out yourself for extra credit.
And wow! You should have yourself your brand new skybox!
Step 6 : Clouds & Further ambient effects
To acquire some luscious clouds for yourself, it’s very simple from hereon out as Roblox has its own rendering technology for this. Under the Workspace in every game there will be a Terrain node. Insert a Clouds object into here (it won’t work placed anywhere else in the hierarchy). In this new object you may play with the appearance settings and colour.
Common issue: “Why are my clouds so faint?”
This may happen if you don’t have an Atmosphere object inserted to your Lighting. Go ahead and insert one to see the clouds light straight up!
*Note: If you have the haze property on your Atmosphere anything higher than zero, the bottom of your skybox will be obscured by this fog. This is fine, you can use it to your advantage.
Bumping up the Haze and Glare in your Atmosphere and setting the ClockTime in the Lighting so that the sun is low in the sky yields some gorgeous blooming skies.
The colour of your Clouds will be affected by most colour properties in Lighting (bar ColorShift_Bottom - does that property even work any more?) as well as Brightness and most certainly time time of day. I find that ColorShift_Top affects the clouds the most, alongside other aspects of your level.
To control how fast your Clouds scroll across the sky, play around with the GlobalWind property under the Workspace.
While quite subtle, the clouds even affect the specular brightness on your level as they pass over top and obscure the sun:
Conclusion
Game development, much like cinematography, is digitally crafting a world and can be considered an artform. Be encouraged to experiment, try out different aspects of the engine and if you’re curious enough, try to push them past their limits! While Roblox is most definitely becoming more and more professional by the year, it’s still fairly limited in terms of shading customisation and material expression. But that doesn’t mean you can’t discover your own art style 
You probably wanted to see the result of that silly skybox test I was making in Blender earlier 