Hello in this free j s video we're going to show you how to use and create or I should say create and use sky boxes. You've obviously played a game a lot of games you're here learning free j. s and learning games programming. So skyboxes, the principle is very simple and offset if paid any free D name really. Or if you play through the game, you most likely will have seen a skybox. But the thing is, you wouldn't have perceived it as what it is. So let me explain what skyboxes better yet.

Let me show you the layout come up using a skybox. This free the world's got building in the background got this? dodgy IP I can look around. But this is in a 3d world. This is literally did this is where the magic comes in. I'm going to zoom out.

It's literally a cube. That's all it is just a textured cube and the cube Camera noise in the center of this cube. So whenever we look around, it looks like we're in the 3d world. And you can't really see where the different edges line up. And that's what skybox is, it's literally a cube that's textured, to make it look like you're in a big open world where it's you're in the youth like open space, whether you're in a jungle, wherever you're at sea, whatever it is, it gives that illusion you might be thinking, why would you want to do that? Can you get better quality from actually creating the models yourself?

And having a real 3d world and Germany you can get a better result. But the trade off in terms of performance is huge, because you've got to render all those different objects. What does this look like I said, we're doing nothing but six images, one for the slow one for a stare like the one there. I've been there the auto know when the Your edges off. That's it's that good and this one for the sky. And I've got the sky boxes or off a website called custom mapmakers.org.

Check it out, they've got a bunch of sky boxes, or didn't notice, well, when you download one of these, I'll show you this. They're actually TGA files. And TGA isn't supported in PJs, but just opening up in any sort of immigrating to an estate related PNG, that's what I did, you'll be able to use it like, right, so let's actually go about coding. This man was thinking, Oh, this looks so complex. In terms of the output, it must be complex code block that is a cube to texturing. I will code both of those principles.

So let's just create a bar geometry equals new, free dots. You geometry and for this honest boy 10,000 by 10,000 journey you want a big toy box because when you're moving around the skybox, you generally don't want to be moving anywhere, you just don't get to literally the end of the skybox. Basically Don't be right up next to one of the faces because your look blurry. It won't look very good, the 3d effect will basically diminish. So that's something that you do not want to do before I actually continue with this. I'll show you I've already added image files, or pretty simple stuff like that down front left, right up.

This is a no skybox that I'll show you in a moment. This is the one that we just saw. So we created the geometry. Now we're going to create the materials of our cube materials equals And your semi colon and in here comes a new free dot mesh, basic material. And in here, we're gonna provide a few parameters and set it up. So we're going to do math, new, free dot texture, loader dot load.

And in here we're gonna specify image for slash skybox, forward slash skybox one, sorry, front dot png. And now we're going to specify the way we're going to render in terms of size. So this is going to be solid Ray, dot double sided. And now we're going to just comment this out. All right. So let's just copy and paste this in, we need a few more times.

I was no except for semi colon instead of a common mode. But easy fix though. For the final one, just remove the semicolon. Just change this to I just love this about a good Id like brackets. I can double click the image and provide the preview with some basic information like the dimensions that's just fantastic for getting a brief overview of what you're dealing with. So this is code, actually.

It's lowercase. I was just thinking I'm pretty sure it's lowercase. So changes to back. I've already worked all of this out in what order is should because if you don't put in the right order, the images won't align properly. Again, already sorted this all out for you. I worked it out.

You don't have to worry about that. Because when you actually download, I'll show you again, actually, it's already in the bin. When you download a skybox, like this one from the custom website, though they're not named back down front, whatnot, they have this postfix BK dn, f t. So back down front, left, right up. Once you've converted them to PNG, rename them, we can use this current name. It doesn't matter what naming system you use, as long as you know what you're using. And as long as you're consistent, that is what is important.

So let's change this to where are we on down, right and then finally, left. We're pretty much done the bulk of it. Now we just need to do VA to map to Rio equals news three dot ambient law And in here, we're going to hash zero x. Sorry, I don't know what the hell is going on there with my fingers. 0.2 real. Okay, what else have I done?

I was looking I was like, I've just literally are looking at this line of code here, so near and I've just copied and pasted it into my head. And then I just wrote that out. Right? embarrassing. So the actual code is three mesh face material. Thank you might get a specified color before Well, that's what I'm doing.

But the reason I'm doing this is below it. But let's specify the right one then two materials. As created keeps var tube equals new free. And I'll make sure I don't copy the line below like last time, specified, the geometry that we're drawing and any materials, which is cute material finally seem to say that nothing is okay. So let's go back refresh. Now something doesn't seem right.

So let's console. log fished. Yeah. Because obviously, the color is off to the syntax highlighting so something about this is not liking hmm you asked me to remove this. I don't like any of them. So I use curly braces instead square braces, my bad.

If you notice that and you've already updated fantastic, great. You deserve a cookie. Okay, I want some cookies. If not like it right now very simple stuff, and I can guarantee it's gonna work now. I can't guarantee I just hoped. So there you go in a few lines of code, we are now on some sort of beach cliff.

So in 19 area either way, very convinced. And once you've got loads of the objects in the world, you've got a player and you're moving around the scenery. That looks pretty decent, because you won't just even be staring at those hills or mountains in the background. They literally look realistic. They look like why would I keep walking towards it? Or you could actually reach it and climb those mountains but obviously, we know you can't do that one because again, and two because it's just a flat image.

So that's how to create a skybox. And that's what a skybox is very simple stuff, but very effective. So definitely consider using a skybox. In your game, if you have any questions, feel free to post them on our education platform. So no learning code at UK or feel free to contact us in any means possible to you. All the source code for this video and the source code from every other video in the series will be available on GitHub and the link to that will be in the description.

So check that out if you are having any issues. And as usual, thanks for watching, and stay frosty.