Crocotile and You: Skyboxes Guide

Are you tired of your backgrounds looking all the same? Don't know how does the Skybox work? If you answered yes, then you've come to the right place pal.

Intro/Clarifications

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:

	Box Skybox
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?

Before v1.6.4, the direction of the top and bottom faces were wrong, and we needed a work-around for that, this work-around being about rotating from the image itself these parts.

Since v1.6.4, we don't need to do that anymore. Even more, I would say that it's the skybox with less work-arounds (if you even need to do some) at the moment.

Here's an old example of a simple Skybox I've made, 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:


(Basically, in the top face it's from left to right of Croco, while in the bottom is from front to back)

Upon testing, you may notice between the skybox and the gifs, that these are facing the direction they appear in the image of the skybox itself (6 connecting top and bottom with 3 and 5, 1 connecting top and bottom with 2 and 4), so, what do we need to worry about? Not really about anything, simply we need to remember how these faces connect with each other.

Yup, since v1.6.4 we don't need any work-around like it used to... It's incredible how a simple change can greatly affect how easy or hard it's to work with a skybox.

small tip

• 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:

	Cylinder 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:

	Sphere 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?

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.

Credits

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!

-ANoob.

Changelog

5/28/21:

• Updated the 1.0 Box Skybox section to stay up to date with the recent update (v1.6.4).
  
• Added a new section, "Changelog", to show the changes that were made to the guide from now onwards.

5/24/21 (2):

• Added/Fixed some missing parts of the guide.

5/24/21:

• The guide was released.

[adam sandler ft adam sandler]

You're welcome, and thank you!

[Bollehopp the Beeric]

Man this guide is very thorough just for the skyboxing! Excellent!

[Bollehopp the Beeric]

Thank you for this guide.. its long! I might have to read this in sections as I will surely get interrupted at least 25 times while trying to read this one thru.

[adam sandler ft adam sandler]

You're welcome!

[Luke Puke]

Thank you so much! I was wondering how to make a proper skybox for a long time. Super useful!