Pixorama: Dungeon Tileset

[Music] hey everybody welcome to another episode of pix drama so I've gotten a few requests lately to do a dungeon tile map tutorial so I thought this time we'd take a swing in it we're gonna be whipping up your typical retro style top-down tile map so follow along and enjoy so straight away we're gonna boot up pixel edit here and I'm gonna set up a new document this time using the tile system in pix letter six tiles wide six tiles high each tile 40 by 40 and I'm gonna import a palette that I've already departed for this little palette of my own let's give this document a background and I start color for now and name it BG or whatever you want to call it and before we get into the actual creation of this I would like to talk briefly about tile sets this one you're looking at right now is from if you don't already recognize it one of these Zelda games sell the link to the past on the Super Nintendo one of the coolest sellers ever but even though this game was in my opinion visually beautiful there was something that always bugged the hell out of me and that was that most of the other sprites in fact pretty much all the sprites in the game don't conform to the to the view the perspective that they give here and while they handled it really well in most situations they also ran into some really weird situations by choosing to show things this way link walking upside down up staircases is one such example now the argument for this perspective choice is is very easy to make you need to be able to see objects on all the different walls you don't want anything to be obscured to the player you want everything to be clearly visible so the player knows that there's a door he can go through or an obstacle or something some threat that's gonna come out of a hole or some whatnot I would argue that while that's fine there are other ways of getting around this perspective issue that really look far better and more satisfying and don't aggravate my OCD half as much and it seems that at some point Nintendo realized this as well for example this still from Zelda minish cap I always want to say - shows that they realized that they had to change their their view on perspective yeah get it and you can see that the perspective in this game is quite different from the older games there are still problems however though the outer walls are skewed and look more natural you get these weird issues on the front of faces where for example the staircase looks to be widening at the top the perspective seems to be backwards they're very odd this picture is probably my favorite approach to making retro looking games this is just your basic top-down oblique projection I just I personally find that rather than forcing some odd projection in order to show things that you need to show you can use something that looks more natural and still get around those problems there's always a way there to solve a problem and you can still show doors and all sort of stuff with these projections but of course it's all personal taste and in fact in this video despite having said all that I'm going to be doing a typical old-school top-down style projection because they do hold a special place in my heart and then know that a lot of people out there feel the same anyway so let's get straight to it the first thing I'm going to do is lay out the upper boundary of the walls now for those of you who are new to pixel at it's a tile system you might have been confused the first time you hit that tab button and a bunch of little red dots appeared all over the map it confused me like laughs that's beautiful I was terribly confused as well I figured it out no no I don't well on the right-hand side of the interface here we have a small box named tiles in which you can create new blank tiles clicking on one of them and then clicking on your workspace assigns that tile to whichever space you click on so now you can see that there are numbers appearing in those little squares telling me that in the first square for example tiles 0 is assigned then title 1 and title 2 etc and if the power of this isn't apparent yet just wait until you see what's coming next nor I'll just tell you so basically the point of any tile set is that you can draw a tile once and then duplicate it across your entire field of whatever you're designing I mean that's that is the whole point of a timeline so basically once we've got a couple of these basic tiles in we can lay out a level or whatever it is you're trying to design and what we're doing here by duplicating some of these fields for example now you can see that I have tile one in all the spaces in the middle on the top rotor so when we change one of these we're gonna see the changes reflected in all of them and that's super cool very helpful when you're working especially helpful when you're trying to design things that tile I don't know walls or flooring or what-have-you anyway now you can see that I've got nine basic tiles on the right hand side in the tile panel I have three four the top three for the middle and three for the bottom so now what I'm gonna do is start laying out the perspective guide for these walls that we're gonna draw so from the top corners we're gonna lead down into the room and that that middle tile will represent the floor of the room but but hey I hear you saying it seems like we have multiple tiles that are just showing the same thing at different rotations you'd be absolutely correct even though we have nine tiles in the tile panel over on the right here it's not necessary to have that many in fact we need far less as you can see here if I grab one of the tiles and lead it over to the canvas I can actually rotate tiles in this case by pressing R which is fan diddly tastic because now I only need one tile for each corner I can just rotate it for each corner that I need I only need one tile for each of the walls so I can just delete all the tiles that I don't need in this tile editor and just keep the main ones and namely the corners the the walls and one for the floor in the middle and that takes me down to a grand total of federally tiles instead of nine far more economical so do try and keep that in mind when you're designing your tile sets of course the less the better when it comes to this stuff and if you find that you can design everything you need in the fewest tiles possible that's awesome just just be aware that rotation and mirroring and flipping are all options available to you in pixel edit style map system alright so that gives us a good rudimentary groundwork for the tile map system in pixel edit so now we can get onto the actual design of this little tile set from here on out we will be entering speedy mode for the video so hold on tight that's gonna get fast the first thing I'm gonna do is on a new layer just block out roughly the size of each of the rows of blocks I want in this wall we're looking into the room from above and these blocks are gonna diminish in size as they reach the floor as they go toward the floor so having some sort of guide is a good idea and once we've got that in place we can go ahead and start creating the blocks in the walls themselves now as the light source is coming from above the lightest color is going to be on top of the blocks and I'm gonna draw the cracks in between with a with the darker shade obviously breaking it up with a couple of darker shades just checking that these blocks are matching up with my grid or rather than my grid is matching up with the blocks and moving on to the second layer each row of these blocks as they go down are gonna get progressively darker which is really gonna help give a sense of dimension to the whole scene so you'll notice that as we go down each row is gonna get a bit darker and the cracks in between are also gonna get progressively darker until I basically end up using black rather than a color from the palette I also want to give a lip to each of these two these blocks to make them pop a little bit and you can see I've started to do this on the second row of blocks using a lighter shade I'm also breaking up the stones by using different colors entirely for some of them just to really give it variety and stop a booking some ominous and as you can see using this tile system as I'm making changes to one tile they're instantly reflected in the next so this makes it super easy to link up each tile and make sure they're there tiling properly and a cool little trick we can use to make sure that we don't get too repetitive a pattern to make sure that people don't realize that they're looking at a time that is making sure that a couple of elements in each tile cross over the boundaries what you generally want to avoid when making tile Maps depending on your purpose of course is people seeing a grid or seeing a very obviously repetitive pattern and one of the best ways to avoid this is to make sure that whatever you're designing crosses the boundaries on each side so you can see that for example a number of blocks cross over on both left and right into the next tile and they connect with themselves and this really helps in just breaking up that grid and making things look more organic now of course this still can look repetitive and at the moment it still does look repetitive especially when one element sticks out in this case it's that round gray block that that crosses over every tile so what can we do about that well one option would be to create an alternate block we can actually create a second tile for this wall and do an alternate pattern on it an alternate pattern of blocks and what that would do would really be to help break up that grid even more and make sure that nothing looks repetitive but in this video I'm happy to just leave it how it is and just make sure that the the concept is clear so as you can see I've moved on to designing the corner for this wall and corners are quite tricky but basically you're taking the same concept we used for the flat part of the wall the upper part and you're just making it converged with a vertical section I will admit that I did do some weird head tilting while I was designing that corner so now I want to do some doors every good dungeon needs a couple of stone doors I'm just gonna do your super basic kind of door here and none of these fancy schmancy what do you nonsense doors no we don't need any of that let's just keep it simple and you can see that I've duplicated this tile on the bottom row and just flipped it so I can see what it looks like upside down in fact here I go mad with power and decide to put doors on every surface just to see how they look and at this juncture I felt it prudent to revisit the palette the color palette on this tile set because I wasn't entirely happy with that I throws a bit cold and a bit boring I will revisit that numerous times but first let's replace this awful noisy floor pattern I want to replace it with something a little more chic and a little more interesting so I'm going to go for the classic Grecian style just a very simple to color pattern here voguing the spirit of the old Mediterranean such things always tend to draw accolades from my two style advisors and stylish sausage yes it's a nice simple pattern and that will pretty much do it for now now this is all well and good if we only want to design rectangular rooms but what happens if we want to do slightly more complex designs well in that case we're gonna need another corner another type of corner we already have a concave corner and now we need a convex corner one that sticks out into the room and this allows us to create some more sophisticated looking rooms rather than being confined simply to rectangular spaces to speed up the workflow of this corner because they're quite tricky to make I've just copied the lower sections of the vertical wall and the horizontal wall and I'm gonna paste them in and then basically just fix them up patch them up and make them look look more natural but we will still have to do a fair amount of pixel massaging to get this to look natural so I've replaced the upper two rows completely I've just drawn new new blocks for them entirely and I want to make sure that we lead into that corner quite naturally so I'm gonna put some diagonal stones right on that edge just like I did with the concave corner I'm looking to try to make these corners a little softer I don't want them to be super harsh I I want the stonework to flow a bit more naturally so now you can see that this corner offers us a lot more possibility and you can see that it links up with the other corners quite well so we can do some more complex shapes now and at this point I thought I kind of was feeling a bit decorative and I just wanted to design some sprites for this to see how things would look this has nothing to do with tile map it's just me being frivolous but what kind of dungeon doesn't have some lovely leafy plants and a couple of torches hey a boring dungeon is what a dungeon without heart so overall I'm pretty happy with how this one turned out this is quite a common theme for tile sets and I have had a couple of requests to do this so I hope it helped you out if you're looking for reference tile maps are really fun to design and made more fun when you have a cool tool like pixel edit to use that makes everything easier one last thing I would like to mention is just a small gotcha when you're designing tile maps make sure that you leave enough room you just leave a little padding on the outside of your walls a little bit at the top a little bit at the bottom try to design the actual wall part roughly in the center of the tile and make sure you leave that little extra space you'll need it because where the floor connects to the wall you'll generally want a little bit of space so that you can do shadows or what-have-you and at the back of the wall you'll generally want a little space so that it connects to the blank area behind the walls most importantly though play around experiment and remember that time lapse can have a wide variety of uses - they don't just have to be dungeon walls they could be entire tiled environments or tree canopies and they work well for a number of uses not just top down RPGs but also platformers it's your call and there's a lot of potential and freedom here so don't be afraid and get creative as for this particular tile map here's where we ended up with a grand total of six tiles four for the walls and/or door one for the floor and one for the space behind the walls but as I mentioned before you could of course bulk up your number of tiles by creating some alternate versions this is completely up to you and this is a basic rundown of how you would create a simple tile map for a Tangshan so that's it for this episode of fixer honor I very much hope you enjoyed this video I hope you learned something new let me know in the comments if you would like to see something particular in future videos and thank you so much to everyone who does come in and like videos and of course to those of you who subscribe I do read all the comments and I reply when I can until next time Hey [Music]

Channel: Jimzip

Views: 13,464

Keywords: pixel, pixel art, pixart, pixel art tutorial, tutorial, jimzip, tileset, tilemap, retro, gaming, dungeon, zelda

Id: qX1Qsqeiu8g

Length: 14min 49sec (889 seconds)

Published: Thu Feb 07 2019