Welcome! If you came here, then you’re probably wondering how to work with Skyboxes in Crocotile, so I’m gonna help you with that.
But first, let’s get some points out of the way first.
This guide is focused on the 3 different types of Skyboxes available in Crocotile (Box, Cylinder, Sphere), how they behave, and how to work with them. This guide is not focused on how to draw the Skyboxes (Here I will help you to “understand” them instead, so you can later apply these tips in your own skyboxes.), or Skyboxes in other software, how to work with these skyboxes there, and so on.
To get the directions of some of the Skyboxes, and where they’re facing, we’re gonna use our little “Croco”, which is always on the bottom left corner of the program. Our directions will be the same as Croco (And by that I mean, if Croco’s looking backwards, his left will be our left, his right, our right, and viceversa. If Croco’s looking at our screen, his left will still be our left, even if it’s the right from our perspective, and viceversa.)
Say hello to Croco!
If you didn’t know (or you didn’t use the program in a long time), yes, there’s more than 1 type of Skybox. By default Crocotile uses the Box shape, but you can change the shape of these in Settings (F1, Edit > Settings) > Project > Skybox Shape.
This guide is divided by sections that you can access on the right, if you want to know how to work with a specific shape, simply click the section(s) where it mentions those shapes in their respective titles.
If you’re wondering, you can change the size of the Skybox to any size you want, just remember to keep the layout of these, otherwise they may not work.
And finally, you can find the Skybox images in the misc folder, located where Crocotile 3D is installed.
With those details out of the way, let’s get to it.
1.0: Box Skybox
The classic Skybox of Crocotile, and the one selected by default, It’s the default skybox for a reason; It doesn’t cut any important part of it like the Cylinder does, and let’s you have a specific bottom and top part in his shape, unlike the Sphere, where you have to work around those with the whole skybox.
But it may also seem the hardest to work with at first, mostly because of the shape itself. It doesn’t allow as much flexibility as the other shapes offer. If you want to use this shape, here’s what you need to know:
|How Many Faces does it have?||6 (4 at the sides, 2 at top and below).|
|What’s the default size of the Skybox (in px)?||256x192px.|
|What’s the default size of each Face?||64x64px.|
What direction are the faces facing?
For you to see, I’ve made an example skybox with a number on each face, 1 and 6 stand for bottom and top, 2, 3, 4 and 5 stand for the sides in the order they appear on the skybox by default (these being Front, Right, Back and Left of Croco).
Here’s that Skybox if you want to test by yourself:
As expected, the faces of the sides are like they normally are, each facing the direction these were drawn for. But for the top and bottom, that changes a bit.
The top instead of being above the side marked by 5 (like the images of the skybox marks), it’s located above 2, with the 6 connecting towards 4 (instead of 3, like it should be in the image of the skybox).
The part below in the Skybox is no exception to this, instead of having his top and bottom part connected to 2 and 4, it’s connected to 3 and 5 instead.
So basically in the top face, it’s from front to back of Croco, while in the bottom face it’s from left to right.
Now, what does this mean to you? Well, you can’t completely work on the skyboxes based on their order. (If you’re working on details at the top and bottom though, if it’s single colored, then go ahead with it).
While yes, you can work like you would normally do with the faces from the sides, the same can’t be said with the top and bottom parts. Since, as shown before, if you work with them based on their order (with the bottom part of 6 connecting with 5 and the top part of 1 connected with 2), these faces will be rotated in Crocotile.
Now, there’s various ways to fix this issue, I would say the easiest is to simply rotate from the image of the skybox itself the bottom and top parts (90 degrees to the left on the bottom, 90 degrees to the right on the top) once you finished making those parts, that way those sides connect like they should on the image (even if it appears that it’s angled different at first).
Or you can also simply forget about that and connect the top and bottom of 6 with 2 and 4, and the top and bottom of 1 with 3 and 5 (respectively, in both cases), remember to respect the original layout though! if you change the layout (1 at the corner left in the bottom, the entire middle row, 1 at the corner right at the top), those changed parts may not work.
Obviously, don’t forget to make the other sides connect to the top and bottom! I would recommend doing that after you’ve fixed the rotation of the Faces in the Skybox
- You don’t need to fill all the skybox with your textures, as shown on the example skybox and gifs, the bottom middle/right, and top left/middle don’t affect on anything the skybox, so you can simply left those parts untouched
2.0: Cylinder Skybox
Ah, the Cylinder Skybox, I would consider this a middle point between the Box and Sphere skyboxes, since it has both the roundness of the Sphere at the sides, while also having a straight shape at the top and bottom like the Box.
It’s a bit trickier to work on it than the Box and Sphere though, since you need to work around the round part (no pun intended) for the top and bottom (if you’re adding details there though). It’s also the biggest skybox in terms of size in pixels, so keep that in mind while working on it!
Here’s the information regarding this Skybox:
|How Many Faces does it have?||3 (1 as the sides, 2 at top and below).|
|What’s the default size of the Skybox (in px)?||256x256px.|
|What’s the default size of each Face?||256x128px (Sides), 128x128px (Top, Bottom)|
How does it work?
Like with the Box, I also made an example skybox, divided in 3 colors (Top as White, Sides as Grey, Bottom as Black), the sides are numered from 1 to 8, the top is marked as 9, and the bottom as 10. I also divided each part with a 1px line of black or white inside them, depending on the part (both colors in case of the grey)
Here’s the skybox if you wanna test by yourself
As we can see in these images, the sides works as intended, connecting like they should, without losing any part of them, but the same can’t be said with the top and bottom of these
If you pay attention, you will see that the “outline” of these faces isn’t present there. This is what I meant in the Box skybox at first, the Cylinder hides a part of these two faces.
After some testing, I’ve found out that the actual size of these inside the program is a circle of 122x122px, that’s the size where the borders of the outlines start to show, and from a 120x120px circle from below is where it’s the most visible in the skybox, so keep that in mind while working with this shape
You can see here the borders of the white outline covering the exterior of the bottom face, this is as 122x122px, from below that size it starts to cover more space in the face.
Here you have the example skybox edited with the 122x122px circles:
Now you may be thinking that the numbers at the top and bottom are in the wrong position, and yeah that’s true, you should rotate the top by 180 degrees for it to be at the right part… After that, just remember the circle of 122x122px, and that the left and right borders of the sides connect (where the bottom should be positioned towards, top too if you rotate it), so work accordingly to those two, and your skybox should work as intended!
3.0: Sphere Skybox
The Sphere Skybox is a pretty nice first option to try out when making skyboxes, since you don’t have to worry about misaglined/cut faces like the others two suffer from. It’s more easier to work with than the two mentioned before too, since you only have to worry about one problem.
A solid option overall, with little chances of messing up and having to redo it again and again. It’s also the smallest skybox in size!
Here’s the information regarding this Skybox:
|How Many Faces does it have?||1|
|What’s the default size of the Skybox (in px)?||256x128px.|
|What’s the default size of each Face?||256x128px. (it’s the whole image)|
What’s the problem then?
It isn’t what direction the faces are facing, the issue is the shape itself. Let me explain.
With the Box and Cylinder, believe or not, you have fixed shapes, letting you focus on other parts (like the top and bottom), because you know the sides will always look like you made them.
With the Sphere this is different, you’re making all in the same face, Top, Sides, and Bottom. So you need to think better how to apply different changes, because what affects the top, may also affect the sides, or even the bottom, and viceversa.
The reason I said it’s a pretty nice option at first, is because you don’t need to focus on a ton of details while working on it, you just need to think more about the changes you make. The Sphere works best at not so overly complicated skyboxes.
Now, following the usual of the other skyboxes, I made another example skybox, this one is entirely black, with two 1px outlines, one at the very border, and another one some pixels inside. It’s also numered from 1 to 8, but instead of being in a straight line, the numbers are located from the top to below in a “stair”, two times.
The skybox if you wanna test yourself:
As you can see, you may notice the numbers a bit “distortioned”, this is due to the issue about the shape I mentioned before, but you may also notice 3 weird white columns, and 2 white circles along with that. The 3 columns are the vertical lines in the skybox I made, while the circles are the horizontal lines. Now, why it’s 3 columns instead of 2? This is due to the vertical lines made a bit more inside the first border. Since they can’t really connect with each other, they look like that.
Sadly I don’t really know about any work-around with the distortioned numbers/shapes, but I noticed that it affects mostly the top and bottom, so I would recommend making these parts of a few colors, so it isn’t as noticeable.
Ending and Credits
Welp, you made it to the end! A short guide, I know, but I hope to have helped you to (at least) understand how the Skyboxes work.
Now, why a guide about Skyboxes? Because it’s something I often see unused, or forgotten, I also used to forget about this feature. But once you get to know more about it, it opens more possibilities for detailed backgrounds, without needing to fill everything with tiles and other kind of stuff.
It also helped me to learn a lot more about the Skyboxes in the program, so that’s a plus too, I guess.
So… What now?
I may probably make another guide about a different topic I want to talk, but for now, if you know about something useful for the program, share it! Seriously, it can help both new and (even) old users alike, don’t hide it for yourself, the community will thank you for it.
ANoob (hey that’s me) for making the guide and making the examples.
Alex for developing Crocotile 3D.
Uradamus for helping to make the Cylinder and Sphere skyboxes available in the program.
You for making it till the end of the guide.
Noticed any mistakes here? Let me know so I can fix them!
See ya later!
I hope you enjoy the Guide we share about Crocotile 3D – Crocotile and You: Skyboxes Guide; if you think we forget to add or we should add more information, please let us know via commenting below! See you soon!
- All Crocotile 3D Posts List