I put this guide together for our Roblox team here at Dubit but thought it may be useful to share:
Creating a skybox in Roblox
Tools you will need
-
Adobe Photoshop
-
Flaming Pear filter pack (flexify 2, it says free trial - I’ve had it for ages and it’s not expired yet)
Process
- Create an image in photoshop
(It doesn’t have to be this big, but this size will allow you a greater choice of output resolutions for the final tiles.)
- Create a guide for a horizon line, approximately half way up the canvas. A higher line will place the final world in a valley, a lower one will lift it up above the horizon. Flexify2 will also let you change this to some degree.
- Define a narrow “far distance” height to work against. In Roblox skyboxes that feel a long way off tend to look better than ones with lots of big features
- Create your scene. If you wish to use Roblox’s own celestial bodies (Sun, moon etc.) do not put them into the scene. The moon can be textured separately in Roblox.
- Your landscape must tile seamlessly in the horizontal axis. I recommend using the photoshop offset filter once your scene is complete to check and refine. (see later).
- Try and keep the top and bottom 3rd of the image clear of details as these will get distorted the most.
- Once you are happy with your final design, save the PSD then “Copy Merged” the entire scene into a new document (CTRL+A then SHIF±CTRL+C)
- Use Photoshops ‘offset’ filter to test tiling. It will also allow you to touch up the scene if needed
This image tiles well (if it doesn’t the edges will now tile so you can correct any issues in the middle of the image with confidence that the end result will be perfect)
- You may also want to use photoshop’s blur filters to add depth of field to the image (if this wasn’t done previously).
- Once you are happy with the final image save the psd out and then flatten the image to one layer. (this is important, flexify2 only works on one layer and will include objects that are off canvas)
- Run the flexify2 plugin:
- Set the following options:
- Feel free to change Latitude (Horizon level) and Longitude (direction) until the scene is as you like it. Once happy DO NOT press ‘OK’. Instead press the following button:
- This will prompt you to save out each face of the cube, set the output size to be 1024
-
Then hit OK
-
Choose a name for your skymap that is relevant to the project then hit ‘save’. Once the export is complete ‘Cancel’ flexify2
-
Close any open PSD’s
-
Locate and open the 6 images Flexify created:
-
Starting with imageName_u rotate it 90 degrees clockwise like so:
- Quick Export a PNG of the image, then close the PSD for “imageName_u”
- Then edit the “imageName_d” psd, this time rotate the image 90 COUNTER CLOCKWISE
- Quick export “imageName_d” then close the PSD
- Open the “imageName_f” image and quick export - but rename the png “imagename _back” then close the PSD (Roblox has an inverted version of this cube)
- Open the “imageName_b” image and quick export - but rename the png “imagename _front” then close the PSD
- Quick export “imageName_l” then close the PSD
- Quick export “imageName_r then close the PSD
- Check you have 6 PNG’s exported with the following names
- “imagename _back.png”
- “imagename _front.png”
- “Imagename_l.png”
- “imagename _r.png”
- “imagename _d.png”
- “imagename _u.png”
- Open Roblox Studio, and open the place you wish to add a skybox to:
- In the Workspace, locate lighting and add a sky
- Select ‘sky’ and go to it’s properties
- Replace SkyboxBk etc. with the images you have made
- Enjoy your seamless skybox:
