 Okay, this is the first in a series on using BabylonJS to create games in HTML5. And today we're just gonna do a basic scene setup with some objects. So, first thing you might wanna do is go to my website, filmsbychris.com. And there, if you go up to code, you can go to GitHub. And that will bring you to my GitHub repositories. If you click on repositories here, and just scroll down and find the one because I have lots of projects here called Game Basics. Here's where I keep basic examples of different games I've worked on. And I have a few different little projects in here, but we're gonna be looking at BabylonJS. So you click on BabylonJS. Again, some examples in here of stuff I've been working on. But everything I do in these tutorials in this series should be under the tutorials folder. And so you can get the code there. So if you want to try it out. But I also recommend, you know, obviously typing out the code as you watch the tutorial to help yourself learn. You will need the BabylonJS, you know, JavaScript file, which I have a copy of in my file here under BabylonJS right here. But to be sure you get the most current version, you'll wanna go to BabylonJS.com and go to their downloads, which will bring you to their GitHub page and then choose which version you want. And, you know, I would recommend getting whatever seems to be the newest stable as of right now. It looks like 1.14 is in beta. So I would recommend maybe getting 1.13. And again, if you're watching this video years down the line, things may change. So, you know, a newer version might work different years down the line. So if you're having issues, that might be it. But today we'll be working with 1.13. So you can take that and go, you can download the whole project. But if you click raw here, you can then download this and put it in your project, which I have for our project. I've created a folder and within our project folder, I've created a folder called JS. And within there, I put a copy of the Babylon 1.13 JS and named it Babylon.JS. So now we need to create our basic HTML file, which I have started already just to save time right here. And you can see all I've done is just added the basic HTML tags, a title. I've imported the Babylon.JS script, which in this particular case, as I just showed you, is inside the current directory inside JS. And then I called it Babylon.JS. We have some very basic CSS styling here. Basically it just makes our canvas, our game, the full size of the browser, setting the width and height to 100 and the padding and margins to zero and any overflow to hidden. You can also put that in a separate CSS file, which I actually did in my GitHub project. So that's up in our header for HTML. Hopefully you know very basic HTML or you're gonna be a little lost here. And then inside our body tags, I've created a canvas element, which I've given the label render canvas, but you can call whatever you like. And then we have our script tags after our canvas element. There's different ways to do this, but it's gonna be looking for the canvas element so you want your script either after that or to wait till the page loads. So let's go ahead and just start writing out our code here. So inside our script tags here, I'm gonna say var to create a variable and I'm gonna call it canvas. And we're gonna tell it to look at our document, which is our entire HTML document here. And we're gonna say dot get element by ID. I'm gonna assume that you know at least some basic JavaScript, but I'll try to explain stuff here. Very important that you do things, case sensitive here, capital E, capital B, capital I. And we're saying to find a certain object in this case, we're looking for this canvas object by its ID. So I'm gonna put that in there within quotes. So we're saying, we're gonna create a variable object called canvas. And to look at our document, which again is our entire page here, and then get the element by its ID, we did assign an ID to this element. And what ID, because you might have more than one, we're gonna say look for the one that has this as its ID. So it's very basic, I hope you understand that. Next, we're gonna create our engine, which is gonna be using Babylon.js. So we're gonna say var engine. And again, the stuff on the left side equals signs kind of up to you what you wanna call it. So you don't have to call this engine, but it's common to call it engine. And next, Babylon.js. Remember, everything's case sensitive. So we're gonna say Babylon. So we're saying here, look at our Babylon code. So basically it's looking inside this JavaScript. And we're gonna say find the engine function and assign it to our canvas, comma true. And let's do this. Okay. And now we're gonna say var scene. I'm writing it with a capital S. I'm not sure why. You can do it lower case s, it might be better. I just am sometimes not consistent with that sort of stuff, but you have to be consistent within your code. And again, we're saying here, let me write this out, engine, oops, yeah. Of course it's important to spell things properly. Again, we're saying we're gonna create an object, a variable here, we're gonna say create something new. Look at Babylon. So we're looking inside again our Babylon.js script here. Find its scene function and pass it engine, which is what we created here. So if you name this something else here, you would put the same in here. So it's just passing it this object. And that will be creating our scene element. Okay, now that we have a scene, anytime you're working with a 3D world, you're gonna want to have a camera, which is what you're gonna be looking through. So we're gonna create a variable, I'll call it camera. If you're gonna have more than one, you can call it camera one, camera two, but we're just gonna be working with one camera here. Again, creating something new. Look at our Babylon.js script and create an arching, rotating camera. Okay, so we're looking for this function. There are different types of cameras in Babylon.js. Arching is one, fly through is another. So this is gonna be one that's arcs around some objects. We're going to say camera here in quotations. And we're gonna say one comma one comma 20. That's the positioning of the camera. So we're telling it where to position the camera. And we're gonna say comma comma new Babylon.vector, which again is saying use our Babylon JavaScript that we imported. We're creating a new vector object and we're gonna say zero dot zero dot zero and then comma scene, which is the scene we're adding it to. So let's explain this a little bit. Again, we're creating a camera. It's a new object using our Babylon script. This is the type of camera it is. We're gonna be calling it camera. This is the position of the camera X, Y, and Z, or X, C, Y. Yes, anyway, it's the positioning. You can play with those numbers and you'll see where it moves the camera around, which will be able to move the camera with our mouse and keyboard because we're saying it's an arching, rotating camera. And then we're gonna create a new vector. Vector is basically a point in the scene, just to put it simply. In this case, what we're putting here, right here, is where the camera is gonna be looking. And the camera will always be looking at that position unless we tell it otherwise. So as the camera moves, it will always be looking at zero, zero, zero, which is the center of our scene. Again, you can play with these numbers to see how it affects it. Just put in different numbers, refresh the page and you'll see. And then where are we going to, because you can have more than one scene. Right now, we've created one scene up here. So that's what we're telling. Put the camera in that scene. Again, case sensitive, whatever you put up here, whatever you call it here, you have to call it the same down here. So we've created our engine, we created our scene, we created our camera. You know, to see stuff, we probably would like some lighting. So let's create a light element. I'll call it light zero, just in case we might wanna add more than one light in the future. New Babylon, I think you're understanding now, hopefully, that we're creating a new object using our Babylon JS script. And it will be a point light. There are different types of light. This is just basically having a light bulb in a certain spot. Okay, so passing to that function, we're going to say, omni, that's the name of the light. You can call it something else if you'd like. I'm gonna say new. And again, we're going to give it a position using vectors. And I'm not gonna get into vectors very much. Just think of it as a point in the 3D world. So vector three, I'm gonna say zero dot, I'm sorry, zero comma zero comma 10. And what scene we're gonna add it to. So it's similar to the camera. So again, creating a light, it's a point light. This is what we're calling it. So we can reference it later. And then we're gonna pass it. Where do we want it? We want it zero, zero, 10. So it's just a little off-center from the center of the scene. Again, you can play with those numbers and see how it affects the lights. And then what scene are we gonna add it to? Which in this case is the scene up here. Trying to go over a little bit of detail in this first tutorial. Hope it's not too slow for you. And then we can kind of graze over this stuff. Graze, glaze, go over this stuff quickly in the scene, in the future tutorials. So in a second here, we'll start adding some objects. But let's, before we do that, let's go ahead and say take our scene object. And we're gonna say active camera. So we're taking whatever the active camera is, which is this camera here. And we'll tell that in a second. We're gonna attach some controls to it so we can move it around. We're gonna say attach, control. And again, so the active camera, right now is this camera. And we're gonna attach it to our canvas here, the controls to it, which is this object up here that we created. And you'll always have a basic render loop. So we're gonna say here, engine. Again, why did I type that wrong? Engine.run render, sorry, renderer loop. And we're gonna pass it a function here. We'll just put the function right in line here. So this is going to loop forever using our rendering engine, which we created up here. So we're saying that engine, whenever it loops, whenever it renders something, run this function. And what we're gonna say here is take our scene and render it so that as things change, we'll see that on the screen. And if I typed everything right, we're gonna be able to open up this scene, although we have no visible objects in it. But let's go ahead and go to our web browser here and I'll go to where I have it saved and I'll refresh the page here. So this is our scene. Right now we're looking at the basic background and lighting through the camera, which really doesn't show us much. So let's go ahead and add an object to our scene, a mesh. So I'll just put that up here. And what we'll do is we'll create a sphere, a ball. And so we'll just call it ball. Again, you can call it pretty much whatever you'd like on that side of the equation. Again, using our Babylon JS script, we're going to say we're gonna create a mesh. And we're gonna say create sphere. So that's the type of object we're creating. We need to give it a little more information here. We're gonna say, give it a name. I'll call it ball so that we can reference it later if we need to give it a size here. And we're going to say scene, which is where we're adding it to. And so the 10 is the number of segments. So the higher that number, the smoother the sphere. But again, if you go real high, it causes more issues because of performance on your system. So you don't want to go too high with that, depending on your hardware. And then point one will be the size. Of course, you can change that if you want it bigger. You make the number bigger. You want it smaller. You make it smaller. Play around with any of the numbers in here and just see how it affects the game. So now we're gonna take that same ball object. Well, let's leave it right there. Let's save that. Let's go back to our web browser here and hit F5. And there is our sphere object. Again, because we attached controls to the camera, I can use my mouse to drag around. It looks like the sphere is spinning around now, but actually the camera is moving around it. That's why the lighting stays on that side. I can also use my arrow keys on the keyboard. So we already have an object and a camera that we're controlling. And we have only really written as far as the code, as far as the program itself, just maybe 10 to 15 lines of code. Now that ball is right now smacked in the center of our scene. Let's move it a little bit. Again, you're working a 3D world. You have X, Y, and Z. So let's go ahead and take our ball that we created and say dot position, dot X. So we're moving it on the X axis and we'll say move it negative five. So now we'll save that, F5 to refresh. And now you can see it's not centered anymore. The camera's still looking at the center of the scene, but the ball is off center. So that's our first object. Let's go ahead and add another object. We're gonna go through all the basic shapes, all the basic mesh shapes that we can create here. So we created a sphere, a ball. Let's create a cube or a box. We'll say var box. Again, you can call it whatever you'd like. Within reason, Babylon. Using our Babylon script, we're gonna create a mesh. So just like we did with up here, although I need to capitalize this M. But this time instead of create sphere, we are going to create box. I mean, how much simpler can it get than that? And then we just need to give it a name. You always wanna give them names so you can reference them later. And again, we'll give it a size one. A box doesn't need more detail. So it's gonna be six sided. And then we're gonna say scene is the scene that we're adding it to. Again, if we don't give it a position, it should end up in the center of our scene here if we refresh. And there we go. Now you notice it's dark on one side here. That's because where we put our lights, our light is over here somewhere because if we look at our code for our light, we moved it 10 on the Z-axis, which can be confusing if you're used to blender. Z is up and down in Babylon JS. Y is up and down, Z is back and forth. So saying positive 10 actually moves it in this case, you know, forward. Okay, let's move that box so it's not right in the center of the scene. So just like we did with the ball, we'll say box position dot X and we'll move it negative 10. So it'll be a little bit further to the right of our sphere. There we go. And again, our camera still rotates around the center of the scene. Okay, next we're gonna create a plane, just a flat plane. We'll call it plane equals Babylon using our Babylon JS script. Again, we're gonna create a mesh and I'll give you a hint. It's gonna be very similar. We're gonna create what? We're creating a plane. So capital P, plane, again, is case sensitive here. Again, we're gonna give it a name. This name can be whatever you want. We'll just call it plane comma 10.0. Don't really need the dot zero, I don't think but I have it there in my notes. So we're gonna go with it. So the dot 10, let's just move that zero. We don't need it, 99% sure. That's the size. So here, right now we didn't give the position. Automatically it's gonna be at the center of our scene. We'll hit F5 here and the plane did not appear. Create plane, Babylon. Okay, let's add that dot zero. I may have been wrong and maybe why I have that in our notes. Nope, let's hit F12. I'm in Chrome here, F12. Firefox should do the same. Bring up a console here. We'll hit F5. No errors. Oh, I know the issue. Hold on, there it is. Planes are invisible from one side by default unless you make it a two-sided plane. And so it was facing away from us. That's the issue. So let's do something here. First off, I'm going to delete this point zero because I don't think I need that. I'll refresh the page, rotate around. Okay, it's still there. And again, it looks dark because the light's on the other side of it. But let's rotate it around so we can see it when the scene loads. So we'll take the plane and we'll say dot rotation dot y. And we're gonna wanna rotate it 180 degrees. So what we're gonna do here is do some math, some JavaScript math, we'll say math dot pi. And that should rotate it 180 degrees. There it is. Now it's facing that. Of course, you can take that pi now and equate it. I did stuff like that in the JavaScript tutorial. I think I might get into it in future tutorials here. But just know that if you put it pi, it will rotate it 180 degrees. And then you can divide or multiply that by different numbers to rotate it at other angles. So there we go. It is now in the center of our scene. Again, it's a plane, so it's invisible from one side unless you tell it otherwise. And let's move it now. Open up the correct window. Okay. So we rotated the plane. Let's take the plane now and say position dot x. And move it over in the other direction. So moving things to the right, we were going negative. This time we'll go positive. I'll just go positive five on that. Should move it to the left five units. There we go. So it's not touching that sphere anymore. And now we're gonna add in our last object. We're gonna add in a cylinder. And so I'll just call it a cylinder. And again, we'll call our Babylon script and we'll say we're gonna create a mesh. What type of mesh are we going to create? You guessed it. A cylinder with a capital C. We can call it again, whatever we'd like. I'll just call it cylinder. Cylinder's a funny looking word. Okay. Yeah, I spilt it right. Let's see. Comma. And we will say three, comma, three, comma, three, comma, 20, comma, scene, comma, false. Okay, so what is this? We got our name of our object, which can be whatever you want. We're gonna give it a height of three. We're gonna give it the top diameter three, the bottom diameter three. It's a tessellation, basically it's detail. It's gonna be 20. Again, higher that number, the more detail it is, but more system resources it will take, lower that number, the less detail it will have, the scene that we're adding it to. And then false. We're saying updateable, so that means that it can be updated in the future. Not gonna go over too much that in this tutorial. So now we're gonna take that, and let's just go ahead and move it because you know we're gonna do that anyway. Cylinder.position.x equals 15. Let's go ahead and save that. Let's go here. Let's close our little console window here. F12 to refresh, and there is our cylinder over there. I moved it 15 just because this plane is so big, and I just wanted to add it the way of that. So let's play, again, play with any of the numbers in the code here. Let's go ahead, and as I said, this first three is its height, so we can make it taller. Top diameter, bottom diameter. So what do you think's gonna happen if I set this three to a zero? That's the top diameter, right? So it's set in the top diameter to zero. We just created a cone. So if you need to create a cone, that's how you do it. You can see the lines here. Again, you can do different things to up the quality of that, the details of that. But let's go ahead and just move that back to a three so we have a cylinder. And again, if you wanted the cone to go the other way, you just turn the other, the bottom diameter, to zero. And it doesn't have to be zero. You can do a cone that comes to a flat top. Whatever, play with the numbers. You'll see what I mean. So one last thing I want to show you here. Again, if I hit F12 here to bring up this window here, you can see kind of squishes are seen here. Same's true if I was to resize our window like this. It kind of squishes our scene. And you want to make sure that's your objects are, you know, look right. You don't want your game to look squished if you're making a game. So what we're going to do is we're going to add a function down here at the bottom of our code. And we're going to say window, which is our browser, add event listener, that's spelled things properly. Okay, everything's wrong here. There we go, listener. Yep, add listener. We're going to call this listener. We're going to say resize. So it's saying, okay, look at our window. Look at our browser. Anytime it's resized, we're going to do something. We're going to run this function here. So we're going to say take our engine, which we created up here, which is rendering everything and resize it as well. So again, look at your browser window, add a listener and pay attention. When it resizes, run this function and you can put more things in this function if you want, but we're saying resize the engine as well. So now that we have that, we can save that at five. So here's our window here. Let me do this. You'll notice that instead of squishing the scene, it actually shrunk it down. So everything stays proportionate. And as we resize, instead of squishing or stretching the scene, it just resizes our engine. And that's, you know, could be put all into one line of code. I put it in three little lines there just to make it easier to read. You could do that in one line of code. So basically one line of code to make sure your scene stays proportionate when windows are resized by windows. I mean your browser window, not windows, Microsoft windows anyway. So again, you can get this code on my website or at least my GitHub site, filmsbychris.com, go to codes, go to GitHub, look for my game basics and look under Babylon.js. You can also go to filmsbychris.com forward slash scripts, forward slash game basics, forward slash Babylon.js, forward slash tutorials, like so. Really, if you just go to, let me show you. If you go to filmsbychris.com forward slash scripts, it'll bring you to this little interface here. Let it load. Find the one that says game basics. You can actually start typing capital G and then click on game basics. Looks like there's nothing in here. That's because you need to clear out your search now. Babylon.js tutorials. And so you can get the code on GitHub, but if you go to my website here, you can actually test it out real time. So there you go, there's our same code written. So you can test it out. If you did something wrong, come here. Make sure that it's working. If it works here and not working when you run it on your server, then it's something you did. If it's not working here and it's not working on your code, then there's something either your hardware's not supporting it or you're working with a browser that either has WebGL disabled or your hardware doesn't support it. So I've talked about that in other videos. So that's one place where you can test it. Again, this tutorial's a little dry because I kind of went over stuff in detail. Hopefully a few tutorials we can kind of jump into stuff if you've watched this and hopefully you'll understand the stuff. And next tutorials will hopefully be shorter. I thank you for sticking around to the end. Please visit filmsbychrist.com. That's Chris at the K. There should be a link in the description. And I hope that you have a great day. I would like to take a moment to thank the following Patreon supporters for helping make this video possible.