Pixel Art Class - Fully Lit Isometric Tiles in Unity!

once we're using the normal map you'll be able to see that depending on where we place the light the actual texture reacts in a very different way if you love in details be sure to subscribe here and on twitch where i'm live most weekdays you can also show your support through patreon or on itch.io where i upload assets and games shown on the channel hey pals welcome back to a new video today we are going to be continuing our foray into the isometric with a video on textures and maps now i don't just mean levels in when i say maps i mean normal maps so that means some procedural lighting and some interesting stuff i've been basically experimenting with this art style over the break since the last video a little bit as i've been working on insignia as well of course not abandoning my my main project but i made some kind of interesting discoveries while playing around with you know how far i can take this isometric thing into sort of a more modern generation you know the first little experiment was supposed to be something that was similar to like a game boy advance game but i thought you know let's see how far we can push this thing and uh this is what i've come up with so this video is going to be kind of a straightforward shot tutorial like i'm just going to explain exactly what i did and how i did it and what's involved so are you ready uh first thing we're going to do is jump straight into an empty unity project okay here we are this is a it's a 2d project so unity gives you some options when you start i'm in unity 2020.2 we're using the urp which is a universal render pipeline so the first thing we're going to do is we're going to import the urp package so my version of unity didn't let me create a urp project out of the box which is good because it means i'll be able to show you how to do it so just go to all of the projects in the unity registry and just type in universal universal rp is the one we want we're going to install that this may take a minute also in the meantime we're not going to just be using the urp lighting set there is a there is like an experimental lighting system called 2d lighting which is part of the universal rp but it's a bit like its own little walled garden of lighting features so when we create our materials they might be a little bit different to the ones that we would otherwise be using uh definitely the lights will be okay so that installed just fine uh let's move on the next thing that we want to do is go to our project settings you can find that in edit project settings although i keep mine docked next to the hierarchy in a second tab because i come to it regularly enough i don't like going into there and trying to find it every time so i just click over to project settings and we want to go to the graphics tab so here the scriptable render pipeline settings there'll be an empty node here if you have a default project and you want to replace this with a urp node so i'm going to go to my assets folder create a folder called pipeline just for organizational purposes and i'm going to create rendering universal render pipeline a 2d renderer that's what i want i also want the pipeline asset so you want a 2d renderer and a urp pipeline the pipeline asset will generate its own renderer we want to use our 2d renderer okay so first of all you plug in your pipeline into this spot here and then plug your 2d renderer into the pipeline okay so we're selecting the pipeline we're plugging our 2d into that and then this one goes into this okay now our project is set up to be able to use 2d lights so the next thing we want to do is throw some 2d lights in our scene light 2d let's create a point light and place it in our scene this is what we want and for us to be able to see something we need to put something in the scene so let's uh let's put some textures in here if you follow my previous tutorial you will have a an isometric texture set for like a tile map i will make mine available at the end of this video to download on edge.io but if you follow the previous video you'll have been able to create one yourself so that's just for people who want to skip that step it will look something like this right you'll have textures and stuff if you want you can put some brick work on there or whatever you want to do but ultimately you've got a texture it looks like this right so this is base texture i'm going to export this so once you've exported this go to where it exported to you can do that with um like open in folder take the a sprite file and the exported png and drop them into your unity project so i'm going to create a new folder here called sprites in the top of my asset folder i'm going to go show it in explorer and i'm going to paste those two files that i just created so now i've got my tile set from here it's probably a good idea to just split it up in the first place so make it uh multiple like this apply go to the sprite editor you should see your textures here go to our sprite editor slice it up by cell size if you're following my tutorials these will be 32 by 32 and then just slice it like that now you've got your tiles press apply and that will create each of the tiles as their own textures so take one of your textures drop it in the scene notice as soon as you drop it in if it's not lit it will be black this is different from if you've got a normal just like 2d project where all of the sprites are just visible by default these will only be visible if you can see them near a light source so this is our light let's just turn 3d icons off so that we can have it be a bit more uh sizeable and then uh basically make this a little a little bit bigger so we can take the outer radius and make it a lot bigger but more importantly we don't want the scene to just be visible inside of a bunch of point lights so let's create a global light you can do that by going to game object light 2d global light so the global light is just going to be the base brightness that every texture is going to be visible at and you can change the intensity of that to be quite low and then have your point lights you know light up the rest of the way but the global light will at least give you something to look at when there's no light source on one of your sprites so if your texture doesn't look great make sure you go to the texture file make sure it's set to point filtering and that compression is turned off apply that and we should have something that looks you know it looks pretty good uh but we can do better than this right before we add any more complicated textures there's actually a step that we can do to make this react much more interestingly to the light and that process is called normal mapping i'll explain what that is now okay what is normal mapping normal mapping is a really really simple concept basically if we have like a cube or any any object and that object has faces the normal refers to the direction that the face is facing okay so this points out this way this points out that way the normal is this vector this direction okay and normal mapping means describing that direction in the texture with a second texture so we have basically our texture that describes all of the color information on our faces and we also have a texture that describes the direction data the normal mapping back to our sprite this over here is a guide for normal mapping as far as the colors that associate with the direction in 3d graphics the way that we actually represent that direction is with color so green up here it's up purple is down uh we've got this sort of like peachy color for the right and we've got this teal for the left this is for 2d of course we can't see every face with a 2d game so these are you know close enough the way that you access these is by going to the normal map color wheel underneath this menu for the uh for the palette so what you want to do is basically copy and paste this on a new layer and start picking these uh colors and painting over or replacing the colors with the directions and when you're done it'll look something like this note that none of the color information here will actually be used so if i export this i'm going to call this normal with unity textures normal mapping is pretty straightforward basically go to the sprite editor where you slice up your tile set go to secondary textures and then just add the normal map that's all it is so this is normal map and we're going to pick isometric normal that's it that's the whole process apply that and we're done so once we've set out a normal map you'll notice that nothing has changed here and the reason is your light needs to be using the normal map once we're using the normal map you'll be able to see that depending on where we place the light the actual texture reacts in a very different way right it's almost like it's a 3d object don't forget when you import your normal map to also create point filtering here and also turn off the compression quality because i was noticing that my normal map was blurred when i was working on it so make sure you don't have bilinear filtering on your normal map or on your texture if you change the distance then this will be you know different as you work and one thing to be mindful of is even though this is a 2d lighting system it still works with 3d space so if you move it away the actual distance is based on 3d distance so it's just something to look out for that the z position of these should be pretty similar the way that you handle the actual simulated z distance is by creating a distance value here so this is the actual distance and it generally works better if this is lower so anywhere from you know zero to one or around there will work well the intensity is something that you want to bring down for the most part so now that's it once you come to you know text your sprites and you want to turn them into a tile map you can actually have them look really interestingly lit and you can put you know torches in your rooms and they can light the scene in a natural way with this 2d lighting setup there are a few caveats and i want to go into those a little bit later for now let's uh let's play with this turn it into a tile set give it some textures and um yeah carry on okay so the next thing you want to do is set up our camera it's pretty straightforward it should be set to orthographic if you're in a 2d project otherwise you can just set it there then you want to set your size to be half of the height in pixels of what you expect your you know in-game resolution to be so mine is actually 320 by 180 my pixel to unit size is 100 pixels per unit which means it gets multiplied by 0.01 so it's half of 100 of the pixel height right so it's 180 divided by 2 divided by 100 okay that's 0.9 you can put the maths in there and it'll it'll work now once you've got that in you should be able to see your object and uh you know it's being lit and uh happy days from here we can actually start turning this into a tile set so you can go into our 2d object you want to make a new tile map this is going to be an isometric with z as y okay that's our option this is pretty straightforward to set up uh the grid size is the first thing you want to change so the cell size should be the size of your sprites so it's 0.32 and then the cell size here can be 0.16 and then this can also be 0.32 for now okay so we can delete this so that's our tile map we don't have a tile set yet so we need to create one to create a tile set you can go window 2d tile palette and that brings up this menu here i've got it docked here and this one basically to create a new palette you just press create new palette it's isometric zy the cell size is going to be manual it's going to be 0.32 0.16 and 0.32 like before and the sort mode can be custom axis and just let all this be the same so we can just create this and then we just want to pick the same folder that we're in so sprites is perfect and that's our palette the next thing you want to do is just drag your tiles in so these go here and we want to put these in i guess a new folder called isometric tiles because otherwise it's going to put them all in our sprite folder and it might get a bit clogged so select this all good it'll import them all and then we have all of our tiles now unfortunately they get dropped in the exact same position so from here what you want to do to separate these out is just open this up a little bit more give yourself some space select a bunch of tiles grab the move and then move them and i'll just do this until i can see all the tiles that i want so after some careful organization we have our tile map this is what it looks like hooray hooray these will all look a little bit off-axis and to fix them you want to go to your sprite editor and move the pivot point this is the pivot point here by default it's set to the middle of the sprite if instead you set this to be custom and then set the y to be 0.25 so three quarters of the way down or one quarter up you can apply that there you go so now you've got them all aligned perfectly to the grid and you can do what you like with them so we can go to the scene here we can press i guess it's b for brush we can pick our tile and we can start painting now if you want to do elevations this is where things get a little bit trickier so remember we used a custom sorting axis for our tiles which means that y is up so as we're painting here right if you press with uh this lock z position turned off so if you turn that off and then press plus and minus you'll notice you can actually start offsetting and that's for elevations so we're actually treating this like it's a 3d grid even though it's 2d we can actually get elevations out of it and that'll help later as we're trying to do level designs with blocks that are a bit higher and with pathing for the characters so if the characters are moving over the blocks the blocks that are higher up will have a different z index and we'll be able to move a bit more smoothly that way so the problem that i have with this is that when i want to go you know down or up i want to go in full block increments i don't want to go a little bit at a time i want to completely jump up a whole block and to do that we need to change in the uh grid setting this number here to be closer to like two okay and now we're going up in full block increments so we press minus to go up it's a little bit inverted and you'll be able to draw your elevated tiles the problem is this looks all wrong basically what's happening here is there is a bit of what we call zed fighting going on so the z-axis is not sorting out which tiles should be above what and the reason for that is that your tile map by default is set to chunking what chunking does is it takes all of the tiles which are on the same layer and makes it one texture it kind of bakes it as one thing we don't want to do that we want each tile to be sorted individually this takes a bit of a toll on um like processing because it's a little bit more expensive but i mean there's no other way to do this so set it to individual and that will allow your tiles to be nice and separated and you can go as high as you want now and you can see that very clearly you know which tiles are above which so now you have a tile set that is lit correctly that has elevations and is ready to be textured i'm going to do some fun level design here and we'll get back to it in a [Music] second okay so we have this lovely scene here it's been designed as a level and looks really good let's say now we want to add some textures to it that's as simple as just going back to our original graphic and giving it some texture so uh what do we want this to be i'm thinking we make some kind of uh let's go for bricks so let's go one two three looking good and i want to start applying some kind of logic to these now the way that i want to think about this is basically our blocks are full at 16 pixels tall and half at eight so i'm thinking maybe we do layers of bricks the bricks can either be at the halfway point or i've experimented with thirds but i think the halfway point sounds pretty good so i'm gonna make this one a little nicer let's go right around here halfway and then create a nice little darker spot for the brick same thing here what i'm going to do is tessellate this with just i'll take like a third of the way across so we can just measure this in steps so we've got one two three four five six seven eight uh if we go like you know a third of the way in i know eight divided by three doesn't go very nicely but if we go like two and a half right so one two and a half this is like the point line where i would do a seam up and now it's like we're gonna make this look like bricks so we're gonna do this like this and now we have a brick going across a brick going this way and then this brick here is going to go back that way so that same logic that we just applied we're now going to do it over this way and this way so now we have one two three four five six bricks that make this up and we can keep doing that here keep respecting that same logic and what you can do is just draw you know continue the lines across like this and the same thing on the other side one two and one do and the idea is if we follow these lines across we should be able to create a nice little grid out of this we just have to remove the parts that don't make sense so in this case this doesn't work this doesn't work this won't work and this won't work and we'll have this nice little windmill kind of uh look i think we might have missed it just by one there we go that's looking better cool and what's great about this is that we can just take it as it is copy and paste it down and we've got the same thing here and then these will just go all the way down so that's our base texture that's our most basic block so that's looking pretty good and we can always check to see how this is looking in our tile map and what i don't love about this is mostly just the the way the tiles uh meet so it's looking like we need a bit of an outline here and that's pretty easy to do as well so i'm just going to take this color here and then just run it along this space much better now if you don't love the way that this looks in terms of its sort of very grid like structure right it's very repetitive what you can do is pick a different color between these two so just make a new index and make it a little bit brighter than the darker color take a color like this and then just sort of run it along the space so that you just have like a little bit of sections where it's not quite as obvious you can even erode some of these away if you really want completely and try to keep it as consistent as possible so like you know if you want a section that comes down here you know it goes from you know light to dark and then into the crevice here and that should make it a little bit easier on the eyes you can see it's working already so you can also apply it obviously to the edges here i notice when i'm working with isometric uh that the actual shades need to be a little more subtle than if you're doing just side scrolling 2d i think the reason behind this is that the actual shapes are so uniform right this is so flat that any little discrepancies need to be quite subtle otherwise they stick out especially because it's being tiled on two dimensions right it's not just something that we see you know this way on one dimension tiled you know it's actually tiled on two dimensions so for whatever reason you just need to be a little more subtle with your color choices and one thing that i've taken to doing is trying to create a little bit of a design in these so like you know i've got this idea of there being this band that runs all the way down here along the bottom edge of some of these tiles and i've seen this been done in games before so it's a bit it's not a new idea it's just one that i am shamelessly using right now and that's already starting to look really nice so just creating some structure can be really really helpful especially in allowing the players to differentiate what's going on where and of course because we have our point lights we can actually change this up and now that you've got lighting in your game you want to start thinking about how you can use it in ways that actually allow you to you know create interesting differences in your level design right this is very easily something that could be quite repetitive right but adding lights in different places gives it a bit more of a different feel basically and if we want to make this a little more interesting i think we should make some variations on some of these tiles so we can have you know tiles where you know maybe there's like a bit of an offset where we sort of drop down by one and maybe we can sprinkle those through make these point lights a little warmer and let's make the global light a little cooler so get some color variation in there as well and maybe we can just shade this a little bit darker just to mix it up a little bit there we go now i've got some variety okay so now this is the really this is the really cool thing okay what if we want to have dynamic shadows say we have an object in the game and we want it to cast a shadow now i'm going to bring in a sprite that i've been working on a little bit this is like an isometric almond from insignia sprite i'm not going to cover how you make this today but maybe in a future episode so here's our character we can give him a little point light as well that's better cool so we can give him a light source or what we can do is actually make him cast shadows let's uh let's do that shadows in the 2d setup are components so you type in shadow caster 2d and that's your shadow you can use the renderer silhouette and you want cast shadows i like to edit the shape to be like you know a literal little circle that you would place around the character's feet to represent that he's casting a shadow from here rather than because this is supposed to be kind of like 3d lighting it's not his silhouette that casts the shadow it's it's this little spot near his feet now we want to make sure that all of your lights in the game uh allow shadow casts so you want to do that by increasing the shadow intensity now if we take our character and we move it over to those lights you can see he actually casts a little shadow isn't that fun so there you have it now you know how to make 2d isometric lit tile sets in unity and i will most certainly be returning to this style and returning to games that look like this very soon i have a feeling that i will be making an isometric game for ludum dare i don't know i don't know how far i'll take that idea it's just something that i really want to explore and experiment with so if i can think of a game that fits with the theme when literary comes out then everyone can be happy and i get to make the game that i want so before i go i want to share with you a scene that i've created there's a little more polish just because i i can uh so here's a little mock-up that i created with the same sprite this would be for some kind of uh 2d isometric roguelike i really really like this idea and yeah it's something that i'll probably explore whether or not my ludum dare game is like this this is this is something that i really want to make uh you can see here i've got grass tiles the grass tiles uh have different variations that fade out and they sit on top of the uh the tiles themselves so rather than just being you know full depth they just sit on top and they have a depth of of zero basically of one i also have these little urns here these urns are just objects like the character and they have shadow casters on them as well you can see it there so really nice i really like this idea of yeah playing with uh there's this ruins concept i don't know there's some there's some cool stuff even maybe like having a day night cycle now you know how to do it that's how i do it so that's it that's uh that's how to do it thanks for watching and uh i'll catch you in the next one hey pal thanks for watching and thanks most especially to the patrons and twitch subs who support this channel and my gamedev project insignia to find out more click the links in the description below and if you like this video tell youtube by clicking the like button and then youtube will tell me and then i'll make more videos that's nice thanks again and until next time

Channel: AdamCYounis

Views: 71,499

Keywords: game development, pixel art, game dev, game, video game, indie games, stream, unity, tutorial, isometric, lighting, universal rp, urp, render pipeline, tileset

Id: xpL44Ztyy1Q

Length: 28min 43sec (1723 seconds)

Published: Sat Apr 03 2021