Godot 4 - Tiled Dungeon Environment From Scratch

hey in this Godot 4 tutorial I'm going to show you how to make a low-res dungeon environment like this in Godot 4 using a bunch of other free and open source tools like krita lighter and blender if you don't have any of those tools I've linked to them in the description so feel free to grab them there and then you can start following along to make an environment like this of your own we are going to need two Textures in order to make this tile set and I'm going to be downloading them from textures.com but you can feel free to try a different resource if you like you do need a free account in order to download textures from this website but it takes two seconds to make and you can download 15 textures every single day it's really worth it in my opinion so once you have that set up go to library go to regular photos on the left here brick medieval bricks and if you scroll down a little ways I'm going to be using this texture right here so you could also find this by searching brick old rounded0061 all one word and I'm going to download the 1024 by 1024 text texture right there and for the floor I'm going to be using a cobblestone type texture so I'll search Cobblestone right up here and I'm going to be using this cobblestone 10. so I'll download this flat map 2x2 meters 512 by 512 right here and with that we have enough to get started okay I've got Critter open now and we're going to use krita to reduce the resolution of the textures and to make sure that they still tile pretty well so let's start with the brick texture so I'll click open file open up the brick texture that we just downloaded and if you click middle Mouse button you can drag stuff around in credit I'm going to first crop this image a little bit because the amount of bricks in here if we reduced this to 32 by 32 pixels which is going to be our tile resolution this image is going to be just a little too busy so I'm going to press Ctrl alt C and make sure that constrained proportions is checked here and I'll type in 512 so we'll press OK turn this into a 512 by 512 image and I like the amount of bricks here a little bit more in order to preview how this looks tiling you can press shift w and there's a pretty severe uh seam here vertically I'll press shift W to go back to normal but I think if we shrink it down a little bit farther it'll look better so Ctrl alt C again let's try 500 and I think we're going in the right direction let's try 480 okay this already looks pretty good and to fix the rest of that seam we're going to go down to the brush presets over here I'm going to search for the Clone tool I'll click that if I shift left click I can change the size of the brush right here so I'll shift left click and make it about this big and then I'll press shift W and go down to this this seam right here then I'll hold Ctrl and left click over the top of this brick and then I am going to just go down right onto the seam like this so this will be the copy region and then this will be the paint region and I'm just going to drag it across the seam like this over the entire thing and that looks pretty good and let's just hold Ctrl and then click over here and do the same exact thing for this seam that was a little offset I want to make sure it's right the same okay all right and that's pretty tileable so now we just have to uh reduce the resolution to 32 by 32 and we can do that by pressing Ctrl alt I and then just type in 32 by 32 here in width and height and then press ok and there we go press shift w low resolution tileable bricks so I'll go to file save as and I'm going to make a new folder here so new folder uh I'll just call this I'll just call it tile set and then I'm not going to say if this is a JPEG I'm going to call this Brix dot PNG and then save that okay all right and now we can move on to the floor all right let's do something similar for the floor texture now so now I'll open up that Cobblestone floor texture and for this one we're going to want to crop it a little bit as well but I happen to know that I want to cut this into I want to divide this by four and I'm going to click this top left of here to go to this corner and it tiles pretty well already but we're still going to use the Clone tool to make some adjustments so so I'll shift and then left click drag to reduce that in size a little bit go to this bottom seam and let's just I'm just going to kind of control click onto this rock go up to the top left move it around a little bit control click click just drag around it really doesn't have to be perfect but we just want to try to make a tile a little bit better get used to doing this pretty quickly it's a lot easier than you might think and when you're reducing the resolution of these you know you can you can really get away with being pretty lazy all right what about this one over here let's try connecting these like that okay this is this is a little weird down here okay and let's try let's make this this uh cut through like that okay nice all right just a little bit more I'm going to so I want to connect this right here um and I'm going to do that by grabbing this over here there we go make that seem a little bit better okay all right so shift W turn the preview on and off looks pretty good uh the only thing that you'll notice that if I pull out is that this one's pretty big so let's just let's cut it in half so in order to do that I'm going to find a seam I'm going to want it to go from like more like the top left to the bottom right so let's grab [Music] let's grab well let's just grab this for now and then I'm going to click and drag over here but I'm actually going to be looking down at the Clone over here and I'm going to follow that seam down so something like that that already looks a little bit better now I'll click and drag over here in the middle and then I'll kind of free it up a little bit and if I oop head five to reset that if I do Control Alt I and then I scale this down to 32 by 32. that looks pretty good so we are just going to stick with that so let me go ahead and save as here and this time I'll save it as floor dot PNG okay all right so now I've got lighter open and we're going to use lighter to create normal maps for the textures that we made in krita it's a really really useful tool to use just follow along and then you'll have a great new tool in Your Arsenal so up in the top left I'm going to click this import button let's do the brick texture first so I'm going to go to that tile set folder I'll click bricks.png up in the top right click pixelated down here let's click Tilex and tile Y and then let's go into the Sprite properties doc widget tab tile click this neighbors button click that brick Sprite frame and just put it into all these boxes this will just make it so that the normal map tiles a little bit better so X out of that and now let's go back to the visualization tab View mode normal map click the normal map and then drag this height down to zero and if we want to preview what this normal map does we can go to the preview mode up there and then drag the slide around and it looks pretty cool so let's export that now so up in the top left click this export button and these default settings should export the normal map just fine it's just the same file name with an underscore n so export it and all selected Maps were exported all right okay for the second texture I've just opened a new instance of lighter I'm just going to do basically the same exact thing open up floor.png pixelated Tilex tile y go to the other tab tile neighbors click that edit around there okay go back to the other tab let's go to preview mode oh let's click it drag height down to zero and I've actually noticed with this one I think because most of it is so dark that if you click invert X and invert y down here it kind of corrects the normal map a little bit so it looks a little bit better so that one is done then as well so let's export that and we are finished with our normal Maps all right I'm in krita again and we're going to use krita to make a texture Atlas and a normal map Atlas right before we hop over to blender so I'm going to click new file here I'm going to make it a 64 by 64 pixel texture I'll hit create I want to add a 32 by 32 pixel grid to this so I'll do that by going to settings Dockers I'll select grid and guides right here and I'm going to click show grid I'll make it 32 by 32 pixels I've got my Textures in that folder opened up here so I'll drag in bricks.png right here insert as new layer and floor.png as well insert his new layer and then I'll click this transform tool right here I'm going to use the arrow keys just to move it over to that right side press enter to set it there and then make sure that you've got Florida PNG selected I'm going to just reduce the saturation of this image a little bit just so that it color wise matches up with these great bricks a little bit better so I'll do that with Filter adjust HSV adjustment and drag the saturation down a little bit all right that looks better I'll hit OK and I'll just save this as atlas.png you might want to save this as a critophile if you're going to want to adjust this on the layer level later but for me PNG is fine for now so hit okay and then we just want to make the normal map Atlas so new 64 by 64. I'll do the same thing with the grid 32 by 32 dragonbricks.normal floor normal move it over to the right okay and we've got Atlas underscore n dot PNG okay and with that we can move over to blender okay I've got blender open now and we're just going to hop right in to making the first of the four tiles so a brand new blender project here I'll press a to select everything X and then delete everything shift a mesh I'll add a new plane mesh this is currently two by two meters but we're gonna make the tiles one by one so I'll press s and then point five enter to scale that down to one meter and Go tab into edit mode I'm going to press 2 for Edge select let's grab this back Edge and start building the wall up here so easy one enter easy one enter uh easy 0.5 enter we're going to be beveling the ceiling a little bit so let's move this in a little as well so g y negative 0.5 and then we'll just finish off with a flat ceiling e y negative 0.5 okay perfect so now I'm gonna go into the UV editing menu over here and we're going to apply our texture Atlas to this so first let's hold the middle Mouse up here drag over here so we can go into this viewport shading option over here you could also just press Z and then click material preview right there let's add a material here by going to this red ball icon click new for base color click this and select image texture and then select open and then navigate to that tile set folder and select atlas.png under here click closest this is going to make it so that it's an unfiltered pixel texture and now we just need to set up the UV map so over here click this drop down here to select atlas.png let's start by going back over to the right selecting a and then press U reset so everything becomes a square UV like this now zoom in here a little bit I'm going to select UV constrained image bounds over here this just makes it so that you can't drag it outside of this image I'll press a to select everything and then s 0.5 just so that everything is 32 by 32 pixels in here and that'll drag it all up to this top left corner for the time being so let's move the floor UV over to the right so I'll just select oh press three to go into face select I'll select that one and then g x just drag it over to the right just like that and then we just want to adjust the ceiling one because currently this is uh compressed a little bit so I'll select that face and then I'm going to just select the whole thing s y 0.5 and then g y I'll just drag it up to the top and that's going to get the job done we also want to apply the normal maps to this quickly and then this tile is going to be pretty much complete so let's go over to the shading tab all right and then down here for normal drag off from here type in normal map select that all right and then drag off of color type in image texture okay and then let's open up our normal map Atlas onto here so open I'll navigate back to that folder Atlas underscore n and then for here select uh where it says color space srgb take that menu and select non-color and if we want to preview what these normal Maps look like we can just go into the viewport shading right here press shift a and then add a light so let's add a point light and GZ if I move this around you can kind of see the effect this normal map has it is pretty cool but we're going to adjust this material just a little bit more so click back on there and then let's reduce specular down to zero let's just bring roughness all the way up and that kind of gives us the look that we're looking for a little bit more okay so that is one out of the way I'm just going to delete this light uh let's get to making the rest of them now that we've got this first tile made and the atlas is mapped to it properly we can just use this first tile to make the other ones and the process will be a little bit faster so I'm going to go back over to the layout tab and I'll also go back into viewport shading mode over here let me show you in object mode I'll click this wall shift d x hold Ctrl and drag it over one unit like that we're going to make an inside corner tile here so we're going to duplicate this wall and rotate it over here and then merge it together in order to rotate around the origin I'm going to go up to this wrap down here and click bounding box center and then I'll press tab to go into edit mode 3 to be in face select mode I'll shift click all of these faces and then shift d to duplicate them and then r z negative 90 to get them over there then I'll press 1 to go into vertex select mode and we're just going to have to clean up here a little bit so I want these two vertices to be right here in the middle but there isn't a Vertex there to merge to so I'll just select this one and then shift left click this one I'll press M at last to merge over there and then g x negative 0.5 just to position it in the center and then I want to move these two vertices to the center as well so I can just click shift left click and then shift left click that middle one last and then M at last just to merge all of those to the center like that and these are all the ones that we need there's actually some hidden vertices here that we want to clean up though so I'll just press a uh F3 and then type in merge by distance right here and you'll just select that and then you can see it removed five duplicated vertices that we couldn't see okay and I'm pretty happy with how this corner is is mapped in the UV it's a little warped but it honestly looks fine to me so uh I'm just going to adjust these top ones here so I'll go over to the UV editing tab and I'll press three to go into face select mode over here and I'll click these two faces you unwrap over here I'll press s 0.25 to scale it down to a fourth and uh R negative 45 so it's rotated 45 degrees and I'll just kind of position it right in the center and see how that looks and honestly I'm pretty pleased with how that looks and the normal map is actually already set up on here as well so we are done with this title okay we only have two more tiles to make and these ones will be pretty quick so press tab to go back into object mode Let's make the tile where it's just going to be the floor and just a flat ceiling up above so let's click this wall tile shift d to duplicate it Y and then control drag it over here one unit then press tab to go into edit mode three for face select mode just grab this face X and delete those vertices so we're left with only these two faces let's stretch this face so that it connects over here so one to go to vertex select box select those two gy point five there we go now it's a square and let's just correct this UV a little bit so three grab that face and then I'm just gonna box select these bottom ones g y drag it down till it's about there and then press a shift s and selected the pixels just to make sure that it's it's tight on those pixels and that one's done now we just have one more Corner tile to make and to show what that tile has to be let's just uh go back into object mode duplicate this wall so shift d shift Z and then Ctrl drag at 1 and the X and one in the y direction over here r z negative 90. this last tile just needs to be sort of like an outer corner where uh it connects this this Edge right here so let's start by grabbing this tile that we just made shift d shift Z and drag it over here into place and we're going to use the knife tool to make an edge here and then drag this vertex down so tab to go into edit mode K to grab the knife tool and then hold shift this will make it so that it automatically snaps to the middle of edges and then holding shift I'll left click this Edge and then left click that edge and press enter to make the edge one to go into vertex select mode and I'll just grab that vertex g z negative 0.5 okay and we just have to fix the UV here so three I'll grab that edge right here and so I'm going to press R hold Ctrl just rotate it like this and I'm gonna just drag it up here to the top left grab this vertex GX drag it right here into the middle and then just grab that bottom vertex kind of drag it to right around the middle there as well a shift s selected to pixels yeah all right that's pretty good that is all of our tiles okay we've got all of our tiles made so just a couple more things and then we're going to export this into Godot so back in the layout tab make sure you're in object mode I'll click this extra wall tile here and delete that let's just move these around so that they're positioned nicely for a tile set I'll click this one GX control drag and I'll just control drag all of these ones out a little bit then this one G shift Z and control drag it right there okay then a control a let's apply the rotation and scale so that these are all scaled properly on Import in the beginning when we made this first one we actually did scale the plane down by a half so if we didn't do that these actually would be scaled um in a funny way when we import them so make sure you do that and then the last thing we're going to do is we're going to name all of these objects so that they have collisions on import automatically so for this one for example I'm going to call this one wall Dash col so you can name them whatever you want but the dash col just makes it so that it automatically has Collision when we import it so let's just do all of these this one I'll call corner dash out Dash col this one corner dash in col and this last one I'll just call Floor Dash col okay and then press a to select all of them file export gltf2 tileset.glb include selected objects and all of these default import options should be fine but I'll go through them here just so that you can see what they are okay and then we can export it and we can hop over to Godot okay I've got a brand new Godot 4 project open here all I've done is just made this super super simple first person controller using the character body 3D template script and that's it so I'm going to go ahead and hide this plane and then right here I've got the folder where I exported that tile set.glb so I'll drag that into the directory here then I'll right click it new inherited scene everything's looking good we can see the collisions are there because we gave it that export hint so I'll save this as tileset.tscn then I'll go to scene export as mesh Library I'll just still call it tile set merge with existing is fine apply mesh instance transforms you don't want that selected I'll click save then let's go to the world let's add a grid map node to our world go to cell change these to one by one by one and then uncheck Center y I'll drag in the mesh Library resource right here and then let's paint some floor tiles down here okay so if you left click you can paint things and if you right click you remove it you can see that's a little bit crowded so I'm going to go to the transform here and I'm just going to scale everything in this grid map up by 1.5 that looks a little bit better okay let's try putting some of these Corners down if you press s while you're painting you can rotate around the y-axis you can do that in other axis other axes as well but s is the only one that I'm going to be using here so I'm just going to paint a small scene here using S and these tiles and that's it oh one thing to take note of is that if you accidentally hold shift and use your mouse wheel you'll change the layer that you're on for the floor so here I'm going to get rid of these ones and then I'm just going to shift Mouse wheel back up to zero right here okay so there's my simple scene setup let's take a look at it from the first person view okay no environment so it doesn't look that great yet but you can see that despite the the seams if you really look closely you know up at the ceiling especially um you know this is looking pretty good already so all we need to do is add the environment and some other little things just to give it that more retro feel and then we'll be done okay let's add the finishing touches here so first let's reduce the resolution of our game so I'm going to set this to 320 by 240 but I don't want it to be super tiny when it loads up so I'm going to set the override to 1280 by 960 and then I'm going to set the stretch mode down here to viewport let's take a look at how that looks okay pretty cool uh we're also going to give a spotlight to our player character so uh on the player control a Spotlight 3D I'll drag it up here and then drag it behind the camera a little bit let's increase the angle and the distance a little bit and uh in the light let's give it a more interesting color so something like I like this tan area over here a little bit more into yellow there okay that looks pretty good um now let's set up the world environment so I've got the directional light disabled but I'm going to go up to these dots and add environment to scene so World environment click here ambient light uh oh okay go back into the spotlight here click that color that you gave the spotlight and then go down to swatches and then add that color to the swatches then back of the environment we're going to give the ambient light color uh that color just like that and we'll turn down the sky contribution and we're going to crank the energy down to 0.02 just like that and then the last thing that we're going to do is we are going to add some fog here as well which is also going to use that same color from the swatches just like that light energy will also be 0.02 and then the density let's turn that to point one but you can play around with that and there you go you've got a pretty interesting environment set up thanks for watching and I hope you learned something

Channel: DevLogLogan

Views: 364,740

Keywords:

Id: VjuyfBaryu8

Length: 26min 24sec (1584 seconds)

Published: Sun Nov 13 2022