Let's Pixel - Basic Dungeon Tileset

good morning afternoon or evening wherever and whenever you are my name is Benjamin and welcome to another pix art tutorial video so in this video I'm going to be creating a dungeon pixel art tile set with a maybe a player and well we'll see about the player and the enemies we'll start with the tile set first this is going to be in preparation for my small simple roguelike that I'm going to be making in Godot and so I needed some graphics and I decided that I could make a video of doing that so let's get started I am going to be using a sprite for this tutorial even though I'm doing a tile set I generally prefer pixel edit for tile sets but I want to try I want to give a sprites tile set functionality which it's very basic but I wanted to give it a try I've been learning a sprite recently and want to give that a try so if you want to support me in my channel you can check out the links in the description also have a little pop up to my website here that has my courses on it you can go check those out I have some pixel art courses and some game maker courses let's start by doing a new file and I think I'm gonna do 320 by 180 will do RGB a transparent background and okay now the first thing we need to do I'm going to get rid of the preview window for now and I don't think we're gonna need layers either so we can just drag layers all the way down that should give us a little bit more space to work with well my mouse has been given me a few issues today so hopefully that doesn't end up being that doesn't end up being a huge problem I guess that answers the frequently asked question of do you use a mouse or a tablet I use a mouse for pixel art so let's do view grid grid settings and they're set to 16 by 16 I'm just gonna press okay in there we've got our grid now this is probably way larger than we need but it's generally good to kind of start with a large canvas well I should say it it makes it easy to start kind of big like this and then add multiple characters all on the same canvas to make sure that they all look good in the same general room so I've got Pinterest up on my other screen and I've been looking at some general dungeon tile set work that has been done and one of the things that I'm noticing is that there seems to be the they seem to decide let's turn this off right here they seem to decide on some very specific colors for I guess values I should say for different areas of the tile set so for example the floor is is generally lighter and they each kind of do this their own way but they contrast these different areas a lot of the times the floor will be lighter the walls will be darker the tops of the walls will be lighter and then the kind of void outside of the dungeon will also be darker and this is the format that I want to follow so let me show you kind of what I mean here so let's choose a light color maybe this light kind of blue color right here and I'm gonna come into here and I'm going to start drawing see will come one come four pixels out like this and come down this right here it would be the top of a wall okay and then we would come up and we would have a corner to this wall whatever this is gonna look like like that and then we would come this way and have another wall top like this and then we would come out just like we did before and come down this way if you hold shift in a sprite you can draw a line from your previous clique to your next one so nice little tip I used G to switch to fill there and I'll use B to switch back to brush and we can come all the way over here to here to here and we can start to fill these in as well G to fill in that area so now we've got kind of the walls or the tops to the walls I should say so then this area outside of the walls is going to be void so we're going to fill this will come oops switch back to our brush draw from here to here here to here to here and then fill this in like that so we've got the start to our dungeon here we're going to need to have our floors be a little bit brighter than the tops of the walls but we want the floors to be a different value than the tops of the walls so I don't know if we're gonna actually do this color it's quite so bright we might come a little bit darker like this and then do our floor this brighter color and these colors are very temporary by the way I'm just choosing basically some colors on here that have the right value we'll be changing these later so now we're gonna press the M key this will allow us to select this right here and we can then move it down and why am i doing that and copy this tile right here move it down to here this towel right here oops and move it down to here this lets us start to set up a larger area to work with in this dungeon not a super large one we are copying some tiles around this seems like it would be the place where um pixel at it would be useful but you know this is this is gonna be fine too the reason pixel it's so good for this kind of thing is because if you change this tile change all three of these which we're going to probably end up doing later but we're working in a small environment here in fact I might even copy this back over here so we have less stuff to copy around okay but what we're going to need now is to create some sort of a wall right here and the wall we're going to be darker again I'm gonna grab maybe this value let's see how dark this is okay that press G to fill it in I was holding shift to do the edges and then we'll grab our even lighter value and fill it in there okay so now we've gone with the floor is brightest than the tops of the walls is kind of right and then this is dark and then this is the darkest and we can actually trim so that we've only got this area right now well I don't know that I want to do that quite yet actually let's see if we can let's not show the grid there we go I just want to see what it looks like without the grid so we don't have any texture on this we don't have any details at all but you can already kind of see you can already kind of see the dungeon kind of look to it so let's start adding a little bit more details a little bit more detail to this let's show our grid again and I'm gonna grab this color right here oops I'll switch back to brush I'll add in some edges here using shift again and we'll add an edge to the bottom of the wall it the grid makes it I could probably change the grid settings no it doesn't look like there's like an alpha value I'd like to change the alpha value of the grid so they do have a tiled mode it looks a little bit like it might just tile yeah I just tiles the whole thing so oops let's turn off tiled mode and we'll turn on or we'll hide the grid again so we can see we have this right here okay now let's start let's start adding some of those details in so let's do view grid good setting loops view show grid and I think I might actually make this outer edge larger I'm just gonna add oops one pixel outline to the whole bit here like that okay and then we can start drawing some bricks in here this go here here here like that okay so these bricks are going to be well this is - we need we need so we need to think about perspective here a little bit since this is a wall we want these bricks to be kind of skinny looking and the reason is because they're going to well we're sixteen by sixteen so how many of these can we do for probably one two three four right here one two three four right here one two three four right here there we go now it's even and then we'll do a couple of these something like this there now let's see how it looks tiled we'll copy this over so I'm going to do move again paste it right over here and it looks pretty good tiled so let's do so these ones are thinner kind of taller looking the ones up here are going to be well so these ones also are going to be thinner so let's do mm-hmm we could have them line up exactly like this I'm not sure how I feel about that I actually want this to be more like a square edge like that yeah so could go perfectly even like that or we could try and offset them just a little bit so like come down to for each one like this that way there in the middle I think that's gonna look better personally could have that last one be long and let's copy this down and see how this looks okay oops switch back to my brush okay so because of perspective these ins are going to be closer together and these ones are going to be farther apart so we'll do two here so you'd be here here here and here and then have the edge right there just like the others is that the same distance it looks like I didn't quite go the same distance there we go go in the middle of each one of these and we'll hide our grid for a second here okay so this bit right here doesn't look good because we've got the two black lines everything else is starting to look pretty okay so we'll need to figure out a solution to that let's put our grid back on and I'm going to be creating tiles within this so like this and if we want to go but probably those won't be that color actually I don't think we're gonna need our grid for a bit we can work with this now so what can we do here if we take off this it takes it off right here too because they're the same tile so we have to have kind of that edge there one of the things we can do is you can give an edge to everything on a specific side but then we'll get an edge on our walls here so that does make it a little tricky but that is kind of more what people do they'll give it a specific edge so we'll say bottom right is our edge we can come in at this here this we can have it go slightly lighter over here or even better go lighter on the same side I think there's my mouse dying on me a little bit and that's that's way too bright but we'll we'll deal with colors in a minute here so you don't want to lose track of your tiles so we might need to keep grid on a little bit more so can we get rid of this no we have to we have to get rid of this side if we do them this way like this then we have to have this over here which forces us to have an edge for our wall which might be fine to be honest the other solution the easy solution actually is just to have these two tiles be different and have this one just have an exception and I think that's the right solution we have to have two different tiles but it's not really that hard to have just one more tile here in one more tile here that are slightly different from these ones and it makes our life a whole lot easier so that's I think that's the right solution here in this case there we go here to here and let's do our view and we'll hide our grid and that's looking pretty good already and we haven't even really done lighting or anything this is just this is just the very basics of here's the outline for what it's going to look like and yeah I think I prefer it with the slightly longer edges it looks fine so now what we're going to do and this is where a sprite becomes a little useful we're going to come into our palette here and we're going to create palette from current sprite okay and that just creates a palette from my current sprite over here as you can see and then we're going to order this by brightness probably so we start darker and we come to lighter like this then what we want to do is we want to basically manage these colors in a way that is that kind of makes them all feel like they're part of the same palette because they kind of fill slightly separated like this gray right here it needs a lot more blue in it so we're gonna grab this gray and we're gonna move it to our blue let's see where this one is it's right in the middle of blue there I'm actually going to move this to purple a bit okay oh actually undo that so once you've got our palette here we have to we want this to switch we want to switch our color mode to indexed now when you switch your color mode to index what that's going to do is allow you to change the colors on your sprite by changing them over here so we've got our blue here and we can switch more to purple and you can see it automatically changes as I switch so we'll come here we're going to come clear to blue and then we're going to add some color somes saturation I should say so moving to the right here okay we're gonna grab our next color and this is going to be lighter blue like that and then these ones are already kind of in the right area green and then well what's this one this one needs to be closer to green here like that okay but this one we're gonna darken quite a bit because it's too bright okay there we go and it's already a pretty interesting little dungeon and we might do this darker color here that and use this color in a few areas on our tiles maybe they're cracked a bit oK we've got two different crack tiles here and I'm getting a little ahead of myself going into lots of details and stuff will probably end up having one of these that splits because generally that looks pretty good so let's make that tile that splits nicely this why does this feel off because it doesn't feel that bad I kind of feel like we don't need our brighter tone up here or maybe on this side it's kind of weird that I've got it on this side might add this to the corners we'll end up doing a bunch more with these tiles probably later anyways yeah my mouse is going weird on me but that gives us a nice basic place to start from we'll also probably want to have one of these that's just plain so we'll just stick that over here and make a plain one doesn't have any cracks or anything in it so let's add a bit more lighting to this and probably this color still feels a little bit bright to me there we go I love to be able to alter the color right here have it immediately reflect in the image that's one of the things that I really like about a sprite is switching you you start off then you get a palette a simple palette and then you can easily switch to color mode up here whenever you need to hmm got some extra stuff right there so then we could add a little bit of detail to these bricks like this and maybe just the top ones it kind of depends on what you want to do you could have a few of these how much do we want these other ones to stick out you could have a few you'd have to see how this tiles but you can do some stuff like that to add a little bit of depth to to the bricks on the wall and then the ones up here at the top we're going to do some some similar stuff to what we did well we want to use this color the floors color can add a similar edge in the same way that we had on our tiles on the floor and then shade them as well the wall color I already kind of shaded with this color so maybe we just hit our corners these two bottom corners but that color hmm yeah it might make sense to use this color up here actually let's see and our dungeon is looking pretty cool if I if I do say so myself we could add this edge to all of this to help it transition to the dark color a little bit better let's see if I like that let me just try it and see if it looks good yeah actually well I like it except for up here so I like it on the on the left side but not the top not the basically it needs to follow our lighting and currently our lighting says bottom right on the top edge we would actually have more of this color like this how we do this to make it feel even pretty sure we have to bring this out come on Mouse we can make it I can make it through this video with your help don't die on me now Mouse don't die on me now uh it makes it pretty hard to do so this step oh oh wait I wanted that there that's for my I might want this here to actually do why no I wanted to go all the way up I think I don't know if I actually like that on there might actually look best to just have it in the one spot so we'll just do that it's hard that's a hard decision to make they both look pretty good and that's that's when you just pick one and move on I think shift is really helpful when you're drawing a bunch of straight lines just start the line hold shift and then finish it and we could actually copy paste this around too once again I press the move key and voila I think we're gonna call it good for this video I'm gonna I'm going to move some of these around a bit but this is pretty much the end of the video so we'll do this it'll make our dungeon bigger and I might add that this doesn't include like inside corners so like what happens if this wall turns and goes up this way it doesn't include that the way that we've set it up you might be able to pull it off kind of let's see so let's imagine we have this we grab this tile right here right I do control C control V and we put it where do you put it right if you put it right here it doesn't work we don't have an inside corner an inside edge with this tile set right now making one would be mixing this tile right here with this whole section right here let's turn our let's turn our grid back on again good here we go with this whole section right here oops my mouse died on me there just copy that right onto here and then you would grab this line right here and draw it all the way down here and you would erase a few of these like this come on Mouse I believe in you probably add that there we have to bring this down so this bit makes more sense and there you go you've made an inside corner the reason I didn't do this is because I actually don't need it for the game that I'm making but for most games you probably would need these inside corners you know let's stick it over here for now we don't want to waste it maybe one day I will end up needing it but yeah like I said for this game I'm not going to need inside corners because my dungeon isn't going to have inside corners in it I'm forcing the game to have one of these is one of these is different from the other one isn't it yeah so I need this one oops come all the way over once again this is where this is where eight this is where tiled would shine but this isn't too bad a sprite a sprite you can work with this it's not it's not terrible to do this tile is better at it I think but if you only have if you only have the money to buy one of them I actually prefer a sprite overall as an editor tiled is not tiled but pixel edit sorry pixel edit is just so much better at tiles why am i doing these one at a time I could do them at the same time make sure this actually looks good right do all of this at once boom there we go I really actually don't like this little bit right here but I don't mind that one over there on that corner creates a new tile but we'll just deal with it and then let's uh right now I'm just kind of making a mock up using the tiles put one of these down here put one of these up here maybe one right here we'll grab our base tile that we didn't use just move it copy this around in our dungeon here we go tighter grid grab this black color right here I don't want to lose this I do want to hang on to it because it's useful do G to fill in the whole background and that's a pretty good looking dungeon right there this doesn't take into account let's say if there would be a tile right here that the player could move on to um it kind of ignores that fact but that's something that you could kind of I don't know what one solution to that is to add like oops switch back to brush we're here you could add the dungeon kind of gradually coming down right here for little ways to try and show a little bit more of that that depth you know which gives you another tile I don't know that might actually be worse doing that I don't actually like that but you could do your walls your wall edge coming down right here and then have some layered system so when your player moves behind that wall you can still see behind the wall but for the game that I'm gonna make I personally think it will be better to to just leave it like this and have the player imagine that they don't need to know about down there doesn't really need to go that direction and wait where is my where is this this black edge doesn't really need to be there actually yeah I think this whole bit needs to come up and then we just put this hole yeah we'd have to just do that though oops gee to fill this in I think I did that wrong I think it's right the way it is so great there we go it just we've just got an extra black line when i zoom out I don't like the way that looks and it's on both this edge and this edge right here and I think the way that you fix it is by filling in this bit like this you have to use the darker color for the bottom for the floor but I think that's fine to use the darker color for the floor and then you have to move all of this up well like that I held control to copy it and then you have to move all of this over let's turn our grid back on so I can make sure I didn't mess this up but yep that's that's correct but it does give us a special case see this special case right here I think that can be fixed and that actually fixes our special case I think if we just make all of our tiles come over by one let's grab this come on there we go like that we have to copy this over a bunch of times now but it removes our special case see huh now it's perfect we need to do it up here as well to our brush em up I've just got Penn eat easily-accessible there we can press the M key to copy this whole section worked like a charm we removed our edge cases apparently had an edge case here that I wasn't paying attention to as well but that's fine view show grid here we go I like it I'm really happy with how this turned out it's not like the greatest piece of pixel art but I think it turned out pretty good so thank you guys so much for watching this video hopefully you enjoyed it and learn something if you did give me a like comment down below subscribe if you haven't already check out my website if you'd like to support me once again and I will talk to you all later

Channel: Heartbeast

Views: 317,408

Keywords: pixelart, pixel-art, lets pixel, pixel art, Pixelart, dungeon, roguelike, tileset, tile set, pixel

Id: fCpalUPlhMs

Length: 47min 44sec (2864 seconds)

Published: Fri Nov 09 2018