Create a 3D world in 60 seconds with Unity - 3D Tilemap Tutorial - Kingdom Builders Devlog #1

hi i'm tim co-founder of app and flow games a pretty new indie game development studio based in berlin and we're making a game called kingdom builders which you can also see on the website here right now and this video i want to show you our approach how we create our 3d world and and show you how also you can maybe use some of these tips to create your own big levels and worlds fully in 3d in unity without the name of a huge level designer or artist team so maybe first some info about our game uh i'm showing a quick trailer here right now you can also check it out yourself um so you're playing like a a king or queen character um and you're creating your kingdom creating your settlement create shelter for your villagers will then help you you know building up your empire defending it against raids and enemies and exploring also a big world so we are really small team of only four people but we wanted to really create yeah a big world and how do you do that with with only limited resources this is what i'm going to show you right now but first i would love if you would check out our website kingdombuildersgame.com and join us on our discord link is directly on the website and the link to the website is down in the description please check it out join us on discord check out the game on steam put it on your wish list all of these things help us so much with growing this project um and yeah early access release will start in only a few weeks all right so you maybe know uh 2d tile maps i have like a blog post of unity open right here um and with 2d tile maps the whole idea is you only have a bunch of sprites like maybe just a few cliffs and walls and some some grass platforms and with only these few sprites you can create a big level or even a whole world with it which is amazing for smaller teams now we wanted to do the same but for 3d so what we are doing we are creating a 3d world based of 3d tiles so it's not just isometric but it's actually fully 3d and i'm gonna hop in right now exactly how we do this so let's go to unity um and here in unity um you can see basically our first area of the game this is like where where the uh where the player will start out and and you know saw a bunch of scenes from it from the trailer as well um and as you can already see it is like it follows like a grid structure right so all of the tiles here are like four by four by four uh meters basically and it's all individual tiles like reaching here on the ground it's like a box if i you know show it here it's just a box and then here on the wall it's like a different tile which has like a nice nice uh you know some some deformations and like some corner for the grass and that kind of stuff and how we create this because this was ta would take a long time to create by placing it manually and if you've ever you know did something in the unity editor you know it can be really tedious to make everything align perfectly you know maybe sometimes it doesn't snap perfectly or you make a mistake then you have something like this and it really doesn't look nice so our approach is that we generate it completely from code with height map textures basically so let's go into photoshop and this here is our height map texture for this first area you might recognize the shape the black here is basically the area where you can walk and the lighter grays are where yeah there's like some some elevation here and let's just change it immediately right now um so you can really see what the benefit is so maybe uh i want to get rid of this this little bump here so i just pick the black color and draw on it just put it away and maybe want to create a hole down down here maybe like this yeah whatever right um and now let's just export it as a png save it to our project and now let's go back in unity and we have a bunch of like custom editor tooling that will now allow us to update this this 3d world directly so let me turn off this we can check out this now which is basically just putting a big stride sprite with a with a height map in and you see right now the area doesn't have a new changes we have some set fighting don't worry about that because this bump here this little hill i had deleted this in a texture but now what i can just do is just can click generate here on this generator group and with will now take a few seconds it will run through a bunch of editor scripts that basically reads uh from this texture and then creates the tiles accordingly so let's wait a little bit to see the end result and then i can also show you a little bit of the code of what's actually going on [Music] all right now we're back um now everything is created i can just turn it on and here we see our new environment which is a real nice you see like the the little hill here is gun now and we have our hole over here and oh this this is actually interesting there's also a little bit of purple here uh so that means um that a certain tile mesh is actually missing from our tile set so maybe this is something i can check out later and and fix it's really easy but you see already the the approach here all we had to do in photoshop is change a bunch of pixels click on generate wait a couple of seconds and boom now a whole level is now edited and you know you could do this with with a lot more you could do this easily with your whole world because what we then also have like this is the first area we have also like a a second area here uh where we also have you know a bunch of more a bunch of more environments basically and this is how you can create a really big world if you just add more and more of these areas and again each area is just a texture of 32x32 so it's really easy to to scale this quite quite quickly all right but how is this working let's check out some code um so the first thing i think is the height map generator which is running basically first and it goes into here the the texture height mapper and this is the very first step really really easy you have your 2d texture that you just load and then here in two for loops you just go through each pixel of the of the texture you get the color and since it's just a black and white image we can only read from the red value of the color and we're setting the height from that so how we're doing this is because you know the the the color it could be anything right from from zero to one um but we want to have everything like on a grid because it's like tile based uh so we have in a setting we have um specified like the step size like like what the what the stepping value is and then we just round this this float value to specific ins for for the height um and then we have it just stored in in basically a a 2d array where the for each tile we have like the height value in it and then what comes next is basically the tire placement generator uh if you want to check out all the details you maybe want to pause the video but maybe it's not even that helpful because it's relying on a bunch of other classes but the thing is right if we go back into unity real quick um if you would just have uh cubes right you could or you're already finished basically because then you now have this this height map data and you can just at each height for each tie you can just spawn the cube with with the correct size and then this would already work right that's just you know it would maybe look a bit more like minecraft but what we wanted to do is a little bit more uh sophisticated let's say is you see depending on on where the tile is we have a different mesh which is the whole idea of tile maps right because here we have like whoops here we have like a wall and it would look really weird if the wall would just be like just a cube right you can do it it's a different style but we wanted to give it a more natural feel and kind of hide a tiny little bit this this grid like tile feeling so um for different uh positions and situations we have like different measures so this is like a wall tile right that has like some you know some more deformations the the mesh is just a little bit different and we have like also for these types of corners basically where you have two walls or here is also a you know like an inverted inverted corner so we have just different meshes um for for each situation basically and now the question is of course if you have these bunch of meshes uh where do you decide which gets picked when and for this uh we have something that we call rule tiles uh which is a bunch of scriptable objects so for each situation we have one of these rule tiles so let's check out maybe the one wall rule tile and let's put on this and here we basically say what kind of neighbors are allowed for this tile um so for the for the one wall thing um what's happening is uh this is basically here and it's like looking from top so here in this area there must be a tile and then directly in front of it which is the red here there must not be a tile and gray is kind of there can be a tile or not it doesn't really matter um because like if we if we would have a tile here right where the where the red was um then it wouldn't make sense to have like the wall here because it should just then just you know go go like this like just follow follow the edge of the of the elevation um it's it's a tiny a tiny bit complicated so maybe i rushed a little bit through it uh let me know if you want to uh have more in detail explanations about these things this video i just wanted to show our approach and give you like a rough overview of how we do this um right um so maybe another question can also be how do you create these meshes um because you you know at least for our art style we show something that's kind of simple and yeah we're doing this just in blender so let me hop on here and here we just have a bunch of different tiles basically that just make up our 3d tile map so the first thing is this one it's just a cube right it's the cube you're also so here for the ground you don't need anything just a cube that's fine you could put stuff on it as well right but for us we just wanted a different tube but now for the wall um the the whole point of uh of walls is that it always needs to be like titleable right and with a cube it's really simple to have a tileable right you just you know you can just put it like this and it works perfectly um but with with a wall you have to be you know you have to be a bit more careful so let's check out this is how our wall looks like basically so um yeah we can put it right next to each other a bunch a bunch of times and you know you don't really see the transition especially in in unity with the materials we add you don't see a transition and you could even place it on top of each other oops i have to duplicate first place it on top of the other and of course here you you do see it of course um but again if you look at it from afar and it also depends on the art style for us this worked quite nicely but for us it was really important that when placing them right next to each other that it's basically seamless so let's have it have a look in unity i mean you can see that it follows a grid but i would say it's it's pretty much seamless right so uh how you can do this um maybe i can just show that real quick um let's just create a new a new one right which why shouldn't we so i'm just gonna create a cube go into local view scale it times two um yeah and now let's let's do a wall um so maybe how do we want to do this maybe we do something like this so we subdivided it a bunch of times and now i only select these edges and now um i subdivide it again sorry before that i was inserting edge loops with ctrl r now i'm subdividing and here is a really nice trick in this subdividing tool and maybe let's put the number of cuts to two or three and now the exciting thing is the fractal so just drag this and you see it kind of randomly distorts the positions of each vertex which is amazing right um maybe we put it along normal because this way you can see that it if we don't do this it goes like to the down below and up top which is maybe not so nice let's do a long normal uh check out a bunch of random seeds and you know just get a feel of what we like maybe this is even nice and boom now we have some some variation right um if you have like a low poly art style it may be even nice to have the normals flat like this we have we don't want to shower our topology in our art style so uh we rather do smooth shading smooth shade smooth and and do it like this basically and you know for for some for some things that are more specific we maybe mark them sharp so that in some cases i don't see it too well here but then it sticks out a little bit um and now you have a wall but now it's not really titable yet because if i place it right next to each other uh you can see yeah this doesn't work there's like holes in it and you know this doesn't work um so what we can do now let me delete this um we have to make the right side and the left side of this mesh align perfectly so we can just select both of these now go into edit mode and what i will do i will always make this side snap to the to the side of the other cube so it's like this select this selection to active boom maybe go into wireframe after you do this for all of these now selection to active make sure you select them in the right order this is here and this is here boom um material view and yeah now it already works right you can just place them uh right next to each other and this is really nice so what do you might did i make a mistake uh maybe i made a small mistake oh yeah i made a small mistake uh let's see wi-fray mode select to active this should work now let's test it again yes this is really nice so it works from my topology perspective like the emergencies align perfectly but the normal stone that's why you still it doesn't seem completely seamless because you can see the normals are like not working perfectly and this this can sometimes be a bit of a hassle and like i don't have a perfect solution for this um what i ended up doing and let me see what the fastest way to do this right now is is i added a here a loop cut maybe like this and i also on this side also look good maybe like this and now i make sure that these normals you can see it i have like this line display for norman they are exactly the same so that they are completely facing the x-axis basically so i make all of the vertices align perfectly on on the x side basically so how this works i go here active element on this side and select this first then this scale x 0 and this will make the inner vertex move to the same x position as the outer vertex so let's do it like this and now these should be fine check in top view you see all these normals are completely going in the x direction perfect here not so much so let's do it here as well in inner vertex first order vertex then do it for all of these and i'm rushing a bit through this i know again if you want to have some more details let me know in the comments i'll gladly make a more in-depth tutorial okay this should hopefully work i'm also doing this just live no it does not work why does it not work all right i found the problem um the problem was that we still had to apply an edge split modifier and now you see we basically cannot see any difference in the normals and this is working perfectly fine so yeah that was basically the the approach that we used for all of these different tiles of course it's a little bit more complicated if you want to make them tileable vertically as well and all that kind of stuff and you have a bunch of different cases that you have to cover with also these kinds of corners etc and yeah this is how we do the titles basically and yeah this is a rough overview of how you can create a 3d time-up system um so yeah it's it's a lot of custom code definitely that you have to write but i think the core principle is not that difficult and yeah you can definitely do a lot of it um in future tutorials i can mobi maybe go into how we place other objects in our scene like we do with the trees here because we also do that um with a similar approach where we just have textures and they get generated from our textures and then placed dynamically in the level so we don't have to place anything manually in in from the trees and also i can maybe go into how we do the materials because you might see that the materials also are completely seamless and the way we do this is that it's completely procedural and maybe i can go into shader graph next time and show you how this works all right um yeah so this was our approach how we do 3d tiles hopefully you picked up something from that i hope it was interesting um and yeah let me know if this was helpful if you would like to see more if you didn't understand something um and yeah please check out our game i would immensely appreciate it join us on discord which lists the game on steam yeah we would love to grow this project and well thanks for watching and see you next time

Channel: ebb & flow games

Views: 15,464

Rating: 4.8920741 out of 5

Keywords: unity, unity3d, games, how, to, tile, map, tiles, tilemaps, level design, open world, tileset, set, animated, extra, rule, rules, terrain, automatically, set up, 2D, 3D, photoshop, blender, model, modeling, blender3D, tutorial, level, unity terrain, 2020, 20201, world, procedural, generate, generation, random, editor, code, terrain system, atlas, tilesheet, assign, import, landscape, tip, easy, unity 2020.2

Id: 2v7BgvUuUQU

Length: 19min 48sec (1188 seconds)

Published: Fri Feb 19 2021

Reddit Comments

[u/ibobtouch]

Oh, seems interesting, save that for later !

[u/LightningOW]

This sort of thing really annoys me. I always stumble across these after I have already given out my free award.