 In a previous video, I gave you a quick look at metal bullets and what I've designed so far again metal bullets is a project I'm working on there's an HTML5 first-person shooter that allows end users to easily create levels of their own in Blender 3d Export them and easily import them into an HTML format Ori has all the settings and basic functionality of a first-person shooter in the last video I gave you a quick look at what the game looks like so far And again, I hope that it will be a game in its own as well as a platform for people to build on But right now I'm going to give you a quick look on how it functions This is not a step-by-step tutorial, but more a quick overview on the concept of how it works We're going to look at things such as floors walls doors and teleporters all easily created in Blender 3d Simply labeled that is easily exported for use on Android and iOS devices as well as desktop devices running macOS windows or Linux basically any Modern operating system with a modern web browser can play this game as long as the hardware is supported and I just hope that this is a project that Not only grows in what I'm creating but grows as a community and maybe I can get some help from you guys as well So here we go with not a tutorial, but a quick overview on how metal bullets Currently works and the basic concept of how things will work in the future If you enjoy my tutorials and would like to see more, please think about contributing to my patreon account at patreon.com forward slash metal x 1000 Okay, so this is going to be a quick overview. This is not a step-by-step tutorial It's just going to give you a quick look on how to develop levels for metal bullets the first-person shooter in HTML5 using Babylon and Canon J s For you to create first-person shooters with ease in Blender So there should be a link in the description of this But I'm going to download the zip file for the current at the time of recording this video version Although I'm daily doing updates, so I'm going to right-click and I'm going to say save link as and I'm going to just put this zip file into my web directory Save it there shouldn't take long already done because it's right now. It's 12 megabytes. Most of that's just textures and blend files So I will now go into a terminal or your file browser. I'm just going to unzip That that zip file. Okay, it unzipped it took a second there And now I will go to my local host And I will go into that folder that I just unzipped which is called metal bullets version 0.1B in this case and I'm going to click Blender scene and I'm going to use the Babylon JS example since the 3JS is kind of I not developing that anymore So there we go. Here's the default scene P to pause the music and I showed you around this level in a previous video So let me go to blender now. Okay, we're in blender default scene. Let's default delete the default cube. Okay Spacebar add a plane again. I'm going to be moving kind of fast. This is not a tutorial. It's an overview so I added a plane that will be our floor I'm going to add a Material to it and I'll just make it blue like a light blue. There we go So now at this point we need to export it to a Babylon JS scene now if you have to go to the Babylon JS website, there is a Python yeah, Python script that you add to your add-ons. It's a simple thing You just put this one file into your blender add-ons folder and then restart blender and then Again, this is not a tutorial on that. There will be tutorials in the future I'm going to go to add-ons and type in Babylon and enable it. Okay, so now all I have to do is hit spacebar type in Babylon And there it is export Babylon JS scene and then where do I want to save it? I'm just going to override the default scene and what I just downloaded so under scenes Youth house and it's going to be called scene Babylon So I need to clean a lot of this up a lot of some of this is textures Some of this is old files at this point But again early development in my program here. So scenes Babylon Export and so we since we export it over this scene I'll have to just come back here and hit f5 to refresh and look there is our blue floor as soon as I start moving Physics will take over and I will fall right through that floor So we're looking at a black screen now because I just fell all the way through if I hit a five again P to pause the music Start moving boom I fall through that floor because we did not tell my code. This is a floor everything in metal bullets is based on Labeling in blender. So let's go back to blender We have the plane here selected. We'll go to our objects panel here. You can see it's called plane What we want to call it is Floor with a capital F. It is case-sensitive. That's all we have to do now We can hit space bar and Re-export it just override the last file hit f5 in our browser here and now you can see We have some physics. We're not falling through the floor. I can still walk off the edge Okay, so we have a floor and let's add in a wall. So we'll add a cube and I'll scale that up some I'll scale it down this way Let's get in the front view and grab it move it up here and We'll give it a material We'll make it. I don't know some ugly yellow color again I can just now hit spacebar type in Babylon to export to Babylon once I have that add-on loaded override and Refresh our browser and you can see there's the wall But we didn't label it as a wall so we can walk right through it If you want an object you can walk right through that's all you have to do But we we want it to be a wall. So let's go back to blender We have that object selected and we'll go to our objects panel here and we will rename it wall with a capital W be sure to hit enter there else it won't take and So wall again now all I have to do is export it refresh my browser and There we have that yellow wall and you can see I'm I can't walk through it It's got physics. It's got collision detection. Okay Going back to blender Let's take our lamp here Move it over. Let's just clone it a few times. So we have a little more lighting things were a little dark. Okay So we have floor and we have a wall. Let's hit shift D to clone this wall and move it right about here and That's all we have to do because by default you can see when we cloned it over here It called it wall with a capital W dot 001 the dot 001 does not matter as long as it starts with wall with a capital W My code will know this is a wall So all we have to do at this point is export it again and then go back to our browser and refresh You can see it's a bit brighter now because I added some more lamps But we have our wall here that we can't walk through and our wall here that we can't walk through Let's add in a door. So we'll come back to blender here. We'll add in a cube We'll scale it down this way actually let's scale it up this way grab on X Scale it down till it's right about there scale it on the Y Right like that go front view grab Z and we will move it up to here and We'll give it a material. Let's make it. I don't know red. How's that? So we have a red door of course you can add textures if you add want to add textures You have to be sure to use UV coordinates because if you just load the texture without UV coordinates It's not going to load properly. We'll go over that Once the game is more developed and I start doing tutorials on it. Okay, so here's our cube Let's go here and now we want to label it a door. So capital D OOR now there's different types of doors Well, there will be right now the only type of door I have designed is a door down a door that moves down into the ground in the future We'll have doors that move up or slide to the side and possibly that swing out But right now we have door and we'll say dots down So my code goes okay. Let's look at this first column yet You think of the name as as an array divide it up by dots so it goes okay First portion of this this name. It says it's a door. So while the game is loading it goes this is a door It's gonna act like a door. What type of door is it? Well, let's look at the second column It says down. Well, it's a down door. So it's gonna move down. So Right now we have labeled that we have the door in position and we can Export it go back to our browser refresh and as you can see there's our door now If I walk up to it and hit spacebar to activate it Plays the default door sound, but you see it only goes halfway down Let me explain a little bit more on how doors work first of all They're on the five second delays so by default so they go down five seconds later They move up again. It only went halfway. Why is this well the way the door works first off We have our floor playing here So you can see the floor is intersecting it if I was to Grab and move this door up. So it's above this floor plane and I was to re export and refresh It will play the door sound But it doesn't move at all and five seconds later. We'll play the sound again But the door does not move It's because and I've changed the way the doors have worked a few times I used to calculate where they were in their height and they move that so much But I think that the way I have it now is a better way What it does is it looks for a floor that intersects so it has to be Intersecting a floor even a little bit that that's good enough. It was that's good if it was up here That would be bad. It's got to be intersecting the floor at least a little tiny bit So when the door loads it looks okay, what floor am I intersecting that is what I'm going to calculate my movement to Next so we did that originally, but it only moved halfway. Why is that? Well each object has its little center point here Well that that center point is what moves to the floor level So if you wanted it to only move halfway for whatever reason you want it to be a wall that they can look over But can't jump over or maybe you want to do some sort of stairs that come dropping down You would move that Accordingly, but if we want to move all the way down, we're going to select that object hit tab Makes her all the entire object all the vertices are selected hit G and I'm going to move this down So if I was to do it here a Little tiny bit of the door would be sticking up at the end if I would do it here It's going to drop down way below the floor, which is fine You don't want to go too far because then the animation would be real quick because it is on a five second delay But if we wanted to move it so that it drops just below or just at the floor We're going to line the center dot up with the top of the door Tab to get out of edit mode and then at this point we can move the door back up Remembering that it has to intersect the floor at least a little bit. So where's our floor? There's our floor. We're intersecting it the dots at the top. So it should move down to the floor level Hope that all makes sense export Reload and Come up now if I hit spacebar it drops all the way down and I can walk through and five seconds later It moves back up and again. It's got collision detection. So I can't walk through it while it's up Spacebar and I can walk through again Okay, so we have floors walls doors The next part that the only other really thing I've worked on so far is teleporters So let's go and design the teleporter again Teleporter can look like whatever you want just like a wall in the door can look like whatever you want to look like It's all based on the name teleporters are the same way So I'm going to make cubes that we can walk into But you can also make them invisible and then have an area that looks like a teleporter But what I'm going to do I'm going to say add a cube and I'm going to grab and I'm going to move that here. I'm going to Pull it up. I'm going to scale it up a bit and let's give it a color here of Darker blue or a purplish color. There we go. Okay, so we have this and again Right now it's just a cube that we can walk through it has no collision detection no intersection detection It's just an object with no physics physics or anything. Well, I'm going to do is I'm going to go to The object name and again, I'm going to rename it. I'm going to call it teleporter Spelling it properly because if you don't spell it properly, it's not going to work. Okay, so it's a teleporter But how does it know where to teleport to? Well, it finds another teleporter with the same POS is what I call it for position So I'm gonna hit sit dot POS and originally in my code you had to label this POS now I think I've rewritten it doesn't have to be labeled POS But you want to call it something that has letters in it not just numbers because if you just put numbers It's going to renumber it when you clone it and cause problems. Anyway, so I'm just going to call this POS one just to keep it simple I'm going to go into top view here. I'm going to hit shift D clone and I'm going to move the clone over here Now you'll notice the clone is called teleporter dot POS one dot zero zero one this zero zero one means nothing to our code and Also, the POS part is not case sensitive Well, it's case sensitive as in these two have to be case sensitive as the same So if you capitalize it here, it has to be capitalized there But if you clone it like we just did everything should be fine. So teleporter POS So what my code does is when you walk into a one of these teleporters Well when a teleporter loads it goes, okay Looks at the name. It goes. Okay. This is a teleporter What's its position? Not really its position, but it's POS. What's its POS and it's called POS one here So it looks at all other teleporter objects and finds any other teleporter object that has POS one and Once that matches it goes, okay says POS one it checks to make sure it's not the current teleporter It goes, okay. So this is says POS one. It's not myself Then what's its position and it loads that position as to where it's teleporting to I hope that makes sense That's a little more technical aspect of it in blender All you have to know is teleporter and then the second column is the same as where you want teleports So we're starting off here with just two teleporters teleport back and forth. All we have to do is Babylon export Refresh our browser here and there's one of our teleporters and if I walk into it Nothing happens That's a little collision thing that I'll have to work on in the code What we'll do here to fix that problem is Move the cube up a little bit. Basically the camera is lifted up off the ground a little bit Right now it's going over the cube and not actually touching the cube actually There's a sphere around the camera. That's not touching the cube But just moving those up a little bit and that's something that I just have to tweak in the code But for now for some reason that happens just move the cubes up or scale them up and we should be fine now I think there we go. So we teleported And I can teleport back again. There's a five second delay on the teleporters You have to let them refresh for five seconds before we walk through again So there we have the two teleporters. They're teleporting us so I can go like this and I teleported back through Let's go back to blender and add in another set of teleporters just so you understand them a little bit better What I can do is I can just clone this same exact teleporter, right? But now we have three that say POS one, which is not good. That's going to cause problems We want to rename this one. I'll just call it POS Two or 32 would be fine as long as it's there's only other one other one with that match and right now There's not so I'm going to a shift D and move it over here now You'll notice that it says POS two dot zero zero one and this one's or zero zero zero and this one's POS two dot zero zero two again. This tailing number does not matter What matters with teleporters at this point is teleporter capital T POS two in fact what I'm going to do here is I'm going to grab this teleporter I'm going to move it way up here. So it's way up high. I'll have to say export over right refresh Coming in here. Okay, so we have teleporter here. This is our original one. So we teleported through And I believe this is the one we just created that will teleport us up to that one there So I'm gonna go through it and I should fall Down obviously we can't go back through that one because it's up too high But I can always just you know go through it again like this so That is a quick look and again No teleporters work for five seconds after teleporting. It's just the way I've come up with so far that Prevents you from teleporting back and forth really quick Of course that might change in the future again metal bullets is in very early Development and so far it's just me again if you'd like to help I'm looking for Programmers and designers and musicians and artists anyone who wants to help The code is over at github github.com forward slash metal X 1000 will bring up all my projects I got a few up there. This one's called metal bullets One last thing I want to show you that has nothing to do with what I wrote It's just a part of the Babylon JS and the Canon JS code is I can add in a cube now again by default a cube Let's move this here. Yeah, so we can see it a cube It's just cute if I put that there We'll just float there and it can walk through it but in blender if I go to physics and I can say this is a rigid body and I changed this to a box and Then I can export this You'll see when I refresh this That box fell and it fell through the floor plane so again I'll refresh you see it falls, but it continues to fall That's because we have no physics as far as the physics in the world the Babylon JS scene Set for that ground plane It has a collision detection with the camera, but not necessarily an object like that So what we're going to do here is we're going to now choose our floor plane and Create a rigid body and we'll change that to box and we're not done yet because now if we export and Refresh you'll notice our floor plane is falling as well, which is not good because now if I go I fall and so now what I want to do is Change it. I'm going to choose that floor plane and over here for mass. I'm just going to put the mass down to zero and As close to zero as possible. I believe is the way you do this I haven't missed with this too much again. This is not part of my code This is just part of how Babylon imports stuff and imports some physics stuff. I'm going to say Yeah export it and if I'm right there we go So setting that mass to as low as you can Allows that plane to stay and that cube hits it. So again if I refresh you can see The cube there has some physics. It does not have physics though with the player as of yet Again in the future you might be able to push things around it should be easy to do by adding some physics Teleported into blender. Anyway, this video has been kind of long But I showed you basically all that I've worked on with this so far again You can add textures as you've seen in the original Default scene that I've created so far. I thank you for watching. I do hope that some of you will think about helping with this project Again, my website is films by chris.com. That's chris with a K There should be a link in the description as well as a link to all the files You know up on github on my site. You can test this game out There should be a link in the description To a playable version if your hardware and browser support it Also as you can download all the files and I hope that I do get people Especially again as I mentioned a previous trove. I hit escape here twice. It brings up a music menu. Yeah, it's ugly So someone with that good CSS and graphics skills can maybe help me make these menus look a little bit nicer And I definitely need help with code. So this is just a quick look at an early project Don't don't criticize me too hard for the the what you've seen because again, it's early But again, the main goal of this project is to be able to use blender to easily create games and levels They're playable in HTML 5 on a multitude of hardware and browsers Essentially making a game that's cross-platform as long as the hardware if the hardware is supported You should be able to find a browser that supported again I'm using Firefox, but Chrome will usually work well as well with most hardware Well, I don't say most hardware with a lot of hardware. Anyway, thank you for watching. I hope that you have a great day I thank you for your time and Yeah, have a great day