Pixel Art Class - Isometric Tile Basics!

so eight is half okay export that and we can easily start painting them here and like magic it just it just works it's really not that complicated [Music] if you love indie tales 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 hey welcome to a new video today we will be covering isometric pixel art isometric is a really unique style that has a lot of advantages and some disadvantages when used in games there are some genres that get a lot of mileage out of the style and other genres where it's not as suitable so we're going to cover that in a second let's uh let's jump straight in so isometric is the name of a kind of projection style and what it means is uh here we can look at the definition it's a method of projection for visually representing three-dimensional objects in two dimensions in technical and engineering drawings it is an axonometric projection in which the three coordinate axes appear equally foreshortened and the angle between any two of them is 120 degrees what that means is as opposed to this normal perspective projection where you actually see things fade off in the distance in isometric everything is the same size no matter how far away from the camera it is and particularly when we're talking about pixel art what that means is that we can see three faces of any cube at any given time isometric art has a long history in strategy games particularly as well as some rpgs and niche kind of like board style games so um this kirby i can't remember the name of this but it's like a golf kind of putt-putt mini-game there is a sonic cd game that uses this projection as well as mario rpg but the vast majority of games are strategy whether it's turn based or real time there's also some simulation there as well so most famously would be the evil ease final fantasy games so all of the tactics series as well as tactics ogre where we see these you know lovely isometric tiles uh be used to make really interesting 3d environments for you to you know fight your battles in another obvious example would be age of empires 2. aoe 2 doesn't use pixel art but it does use sprites so even though it's it's a you know high fidelity game with a lot of visual effects it's still using sprites to achieve its look let's talk about why we would use isometric at all the first reason is that it allows you to see more faces from the camera's perspective so if we take these three kinds of projection this would be side scrolling this would be top down and this is isometric inside scrolling if we look at a tile right we can only see one face at a time and if we want to show that there is a grassy surface and you know a ground surface we see most of the ground not a lot of the grass this is really good for showing platforms and you know the gaps between places that we can jump but if your game doesn't have a lot of jumping or you're trying to represent more than just a character running around in a 2d plane you know you can't get much further with this top down is another perspective style in top down it's kind of like side scrolling but instead of prioritizing you know the the front face you're prioritizing the top face of your cube and so you see more of the grass more of the ground it allows the characters to run around as they would i mean if you think about the things that people do most of what we do when we're running around is on the ground plane and the two axes of the ground plane right like x and y we're not really doing a lot of vertical movement in real life and so any kind of simulation usually doesn't need to prioritize the vertical plane then we have isometric which gives you a kind of nice balance between you know showing you three faces at any given time one for each axis so you can show a lot of movement on the x and y along the ground and you can still get some elevation as well reason number two which we hinted at before is that it actually captures two dimensions of ground movement right so with side scrolling if you're doing some sort of combat simulation you can't really move into the background or into the foreground right the whole thing happens on two axes and so if you want to get around somebody you kind of need to jump over them in the air whereas here in isometric you can you know circle around an opponent you know dark souls style and it all still makes sense and so we see games like ada that have this projection style and this is why the third reason is that elements on the same axis do not stack visually this is a really subtle one that kind of gives you a hint as to why this is used in strategy and simulation games as opposed to just straight top down so in isometric when you have an axis and you line things along that axis because the axis isn't directly aligned with the camera things that are sitting next to each other actually are staggered on screen whereas if we're looking at just top down things that are on the same axis are actually overlapping and the lower down we try to bring the angle of the camera the worse that overlapping occurs okay so if we were trying to get side on you know these two people would be exactly overlapping and you wouldn't be able to tell that they were two there so with top down projection you end up having to keep the camera quite high in order to alleviate that overlapping whereas in isometric you can bring the camera lower right and still you know look at things that are reasonably low angle you know you can get a nice perspective that's quite cinematic without having to deal with the overlapping or you know resorting to bringing the camera up higher reason number four is that it can actually be more economical to use isometric than to use top down particularly because when animating the directions that you have to cater to are more symmetrical so in the case of isometric if your character is moving down they can be either moving down and to the left or down and to the right and those can be mirrored and if they're moving away from the camera they can be moving up and to the left or up and to the right and that can be mirrored so in actual fact you only need to do two animations for a final fantasy tactics style navigation for a character whereas if we were doing top down you have to deal with moving away from the camera towards the camera and then either side so you can actually get away with fewer animations for isometric games than you need to for top down okay there must be some drawbacks right i've sold this pretty well so far the biggest drawback is that isometric games are not intuitive for d-pad movement and the reason why is because the d-pad you know runs on a north-south east-west cartesian axis right you go up down you go left right which axis in this isometric view is up is this up or is this up you know is this left and this right we could go you know up down right left or we could rotate that 90 degrees and call this up this left this down and this right and so if you're trying to use a d-pad to navigate around this space it can be kind of weird now obviously this refers specifically to games that are axis locked so grid-based games as opposed to games where you can freely run through a grid if you can run through the grid then this drawback isn't really relevant but you are going to find yourself moving diagonally a lot anyway right if there are a bunch of buildings and you're trying to walk around the buildings you have to walk like this and then like this so you'll be finding yourself holding you know two of these buttons at any one time if you're trying to use a d-pad to run around in an isometric game so that's the drawback the big drawback which leads us to a pretty interesting conclusion for games where you don't need to jump where there's a lot of action that you need to make sure it doesn't overlap for games where you can control with a mouse as opposed to a d-pad you know isometric gets all of its advantages with none of the drawbacks so that's why we see it really really commonly in rts's or strategy games and also simulation games because they have a lot of entities which can't overlap you want to give a nice overview of the scene that's quite cinematic you want to show as much as possible of any given object so that it's clearly identifiable a lot of those reasons for picking isometrics start to stack up and so historically it's been a very popular perspective for this kind of genre so we've talked a lot about what isometric is its advantages and disadvantages and the genres that it's good for let's talk about making some let's put together a basic tile set and then put it into unity okay so here we are in the a sprite editor and we're not going to be using any of the fancy a sprite tile set features yet because they don't support isometric at this stage which means that you can all follow along with me for today i think there will be an update later on that involves isometric tiles but not in the original release so isometric art is pretty interesting because the tiles are obviously not squares they're more like diamonds and i'm going to show you how to put those together right now so the gist of this is that your tiles need to be as big as two standard by 16 tiles so you're looking at 32 by 32 for the actual space that gets taken up by the tile itself the first thing you want to do is start at the top and hold shift with the line key drawn right and make this two by one line right all the way until you hit the edge you can do the same thing coming down the other side and then directly underneath do it again back towards the center and then back out the other side and that's a top face okay you could take this shape copy it and paste it and that's most of your cube and then just connect the dots and we're there okay so that's your basic tile you can of course do this front edge as well and you're golden so from here you can pretty much just fill in the shapes what's really interesting about making tile sets in isometric art is that unlike side scrolling tile sets we're not doing our best to try to erase the grid and make everything as seamless and tessellated and natural as possible instead we're actually embracing the grid because it's often part of the gameplay and instead we focus more on creating interesting geometries for the actual yeah for the maps that we make so you can consider a tile in and of itself a complete piece of geometry in isometric rather than a corner or side of the geometry that you would use in your collisions for the game so once you've made a block you know that's a block you can kind of think of it like minecraft same sort of deal now you could create an entire level just out of this starting block right there's nothing about this that's unfinished or that requires anything else to do its job and i'm going to prove that by jumping into tiled now and just using this as the start of a tile set that we're going to make so the first thing we're going to do when we come in here is make a new tile set we're going to call this isometric tile set we are going to keep the tile width and height 32 by 32 and we're going to grab our image and save it in there now we have our tiles we can make a new tile map and the tile size here is going to be half the height of the tile set because we had that staggering on this line here right this isn't a 45 degree line it's a you know half of that line so uh we've got two two two for every one one one which means that the width is twice as wide as the height so we can save that as isometric tile map and now we have a totally tileable and as you can see this is enough to make a whole level with right you can do whatever you want and the geometry is all there that's pretty much it that's the whole thing you can do way more than that i'm going to go into that in a sec but as far as the basics you know this will do the job if you want to make levels then all you need to do is add layers on top for every level that you want so if i want to do a level above this i can do that and now these tiles will all be rendered above the previous yeah that's pretty much it that's like the whole process what i like to do is think about the games that i really like in a genre when i'm making any kind of tile set or making a start at trying to understand how to recreate that style and so when i think about the games that i love and the games that i grew up with like final fantasy tactics advance one tile that comes to mind is like a half tile these are elevations that characters can jump up as opposed to full you know walls right so that's pretty easy to do i'm just gonna take this copy it paste it and i'm gonna bring it down by exactly eight pixels down because we're 16 high remember when we talk about the height of the block we're really talking about this right it's not all of this it's the height of the the cube which in this case is 16 so 8 is half okay export that and we can easily start painting them here and like magic it just it just works it's really not that complicated so you can imagine now we want to do some kind of like maybe some steps or some yeah like a staircase something like that like a full elevation from one to one tile up now as soon as you start adding directionality to these tiles they start to multiply so if i want some sort of like 45 degree line that goes all the way down i have to start here and end it here okay things get a little bit different and you start needing more variations for your tiles okay so assuming that we wanted something like this we would need this we would need it flipped horizontally and then we would need the same thing going away from the camera okay so we would need something that looked like this and that shows us the four different ways that we can have this you know 45 degree slope be projected in the space it's not a really easy line to draw in pixel art because we're not going you know 2 2 2 or 1 1 1 it's actually more like 2 1 two one two one right it's alternating between two and one and so that's kind of i think the only way to really make this work and there we go we have something that's a bit closer i think if i was to do this i would really want these to be aligned perfectly so i might shift my one of these edges over one pixel so we can also start adding slopes slopes are a little trickier it's a little tricky to make sure that when this stacks so to test if something's going to stack you just copy it over here paste it move it over by a full tile and then down 8 1 2 three four five six seven eight that's how you know if it's going to work and so it does work um it's a little there's a little bit of something going on here that i don't love but yeah i mean that's that's what it is so so just like that we can start coming in and we can you know add new slopes we can also do things like uh staircases right so we could take something like this even shorter so in this case remember we had eight pixels one two three four five six seven eight now if we bring this down another four one two three four now we could take this piece and we could stack it on top of itself so we could say like this one two one two one two and then like this okay and then if we delete this and then delete this if something looks like that and we've got some stairs now four is probably a little tight i might try three next time but you can see it works the same way and from here i mean the next process is really to think about things like you know interiors and exteriors so walls that kind of stuff you know maybe we want our walls to be half the thickness of you know the normal tiles so we can bring them in you know one two one one two one so that was one two three four and then again five six seven eight and now we have a tile that is half of the thickness so this is like uh along the front edge you could also do a version that's kind of like sitting along the back edge and these are sort of separate tiles now so the difference there being these would line up at the front so we want it to go another entire layer above you could you know sit these all on the front side or you could take these ones and sit them all on the back side and so if that's what our wall looks like then you could probably go one step further and you could make tiles that were you know started full and then went half on the way up so you could do ones that look like this [Music] you know and then start sloping up and you could do something like this right so pretty quickly you can come up with some really interesting geometries that you could then make buildings out of and those buildings could be made out of different materials of course you could also make things like corner blocks right so we could just come halfway and then break into that you could even take all of this and drop it down 8 pixels and then we can do you know this all the way through so that's a pretty easy way to get pretty far i mean it's not even been that long and we've got this really awesome series of blocks that we can use to make lots of really interesting tile set variations and like i said the beauty of this is that there's not that much that you need to think about by way of tessellation other than keeping the seams nice and clean so not having double ups on your edges like this i would try to remove that but once you're there it's pretty easy so let's say we've done this really cool tile map and we want to put this in a unity game well there is this really awesome script called super tiled to unity that i use all the time for my side scrolling work in insignia but it also works with isometric tiles as well so this is super tile to unity you just download it it comes with a unity package the unity package will if you have unity opened it will just open like this you press import let it do its magic and then just drag the tile map in and it should just work just like that so let's say i drag everything in that all works great take my tile map drag it in oh it's a little messed up if you do get something that looks like this just change in the uh grid setting here the problem is that the sorting order is set to top left if you switch it back to top right that will then just clear everything up i believe that's an import setting that you can change in tile to unity so once you're at this point i mean you've basically imported your level already you may be asking you know what about collisions now if you're making a game that is like a turn-based strategy i would probably avoid collisions altogether um because i mean there's no real point if the characters are going to move on the grid all you really need to do is determine if the character is allowed to move on to that grid space or not and then just let them do it or don't you don't really need to be bringing physics into the equation if you don't have to you can have collisions and unity does have a i believe a 2d collision system for isometric tile sets so in tiled you can add collision data in a pretty straightforward way you can literally just drag your shapes and that will create your collider and now that's that's in so if i just save the tile set that saves to the tile map and that's already being imported directly into unity so that'll just re-import as soon as the asset updates and then you'll see the collision information just sort itself out directly so you can see here all of this is kind of bound because it's still a 2d space that we're talking about right this is a fixed you know connected collider it's not going to work with elevations it's not really going to understand any of that but that's something that you can figure out in your own games so this has been an intro to isometric pixel art i do have some work that i've been doing in isometric that's more of a test just you know testing the waters a little bit on creating my own sort of custom art in an isometric style so not quite using a tile set but just creating something that is unique to be honest with you i think this would have been a lot easier to create if i turned it into a tile set first you know come into tiled plotted down all of the actual tiles themselves and then screenshot of this brought it into a sprite and started painting over it because the actual depth of it is pretty difficult to figure out um the last thing you want to be doing when you're working in art is to be thinking about maths so what's great about this is that you know if you had your tile set and you were finished you know creating the level is easy right you can just do this and you can you can come in and and plot what you want right not a problem you want this wall to be higher done this is a lot harder to do you know in a in a pixel editor setting that's very trivial to do in a tile editor so isometric pixel art most often will benefit from you know using a tile set at least just to get some structure down and then you can come in and and paint this the way that you want okay this was fun i think uh this is something that i'll definitely come back to i really really enjoy doing this and uh i can see myself maybe uh in an upcoming game jam or something similar trying a style like this because i really really love isometric games and i mean it's a style that i've wanted to approach for a long time so this has been an introduction to isometric art and um i hope you enjoy hope you make some cool stuff of your own if you have any questions or things that you want me to explore and then share with you i'm more than happy to do that here in a future video so thank you for watching as always i've been adam even the pixel pals this has been in details until next time 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: 330,378

Keywords: game development, pixel art, game dev, game, video game, indie games, stream, isometric, tutorial

Id: OqwQBWEzcxU

Length: 25min 55sec (1555 seconds)

Published: Sat Mar 27 2021