Pixel Art Class - Tile Set Art

the other way for it to work is to use fewer and fewer pixels every time you shift off the color palette [Music] welcome everybody to our Friday edition of the stream I think today we might do some graphics actually I've been doing some tile set stuff which I think would be really nice to cover on stream I want to talk you guys through how I made this tile set because this is actually an auto tiled tile set as well I did Auto tiling in unity last night for the first time so it might be nice to check that out so what that looks like as far as like Auto tiling goes is I just draw the tile and it Auto tiles [Music] right at that the idea behind doing this in unity specifically and not in tiled was because I want unity to be able to procedurally place these tiles where unity can determine hey I want the character to pass through this space here so I'll delete these tiles and these tiles of these tiles to make a gap for example or I want the player to be able to land in this area so I'll create tiles there so trying to take the binary logic of there needs to be a tile here that doesn't need to be tile here and then turn that into designed interesting-looking levels that are tiled nicely and and look good so this was the set up that we started with yesterday and I know that this is going to be based on bricks so I want to try a few different kinds of patterns here I want to try a version that's closer to this but where the bricks are divided a bit more evenly as far as their horizontal size this comes back down to just like thinking about the math of like how big is a brick and how many bricks per tile that kind of thing so you know if this is the tile we've got 16 pixels right if we make it say there are two bricks per tile right there's a pretty big bricks and there's two pixels worth of mortar between the bricks and you can easily just do something like this all right and that should should tile pretty well I'm gonna use this and we're gonna straight into the game and see what that does so you can see here how big these bricks are now just looking at this we can start filling in a little more depth and detail and we can start giving them some shading so one thing that I would do is probably take the brightest part of the brick of it or the highest part the bit that has some access to the light and start giving that a little bit more of a lighter color and then the part just below the brick would go a little darker [Music] right we might drop down a color in the corners here to give it a little bit less of a square look so already we've got something a little with a little more structure to it but they're quite big bricks right so it's up to us to ask the question like do we like this style of brick for this character sighs and I think they're quite long I think personally I'd probably go for something a little smaller so already I know because basically this isn't the size of brick the size of a brick is this Plus this right because there's only one seam so let's try to create a second seam by taking all of this and shifting it over you know this across and define a second spot here all right so we've just half the size of our bricks now we have a lot more bricks I think already there's a way to detailed like for the center brick is too detailed because there's so much visual repetition it's really clear that it's a repeating texture so I would flatten these out a lot more I would go for something a little more tighter together in terms of its packing because I think this double pixel worth of mortar is it's not working for me so I'll bring this up and I'll bring this up that still leaves us with two pixels worth of free empty space and each of these bricks is six bricks tall so if we chop one pixel off of each of them will have four per brick and we should should be able to put one more brick down here however we've still got another issue where there's not enough for the mortar at the bottom of this brick on this tile and 3 doesn't divide evenly into 16 so because it's 16 pixels we can't have evenly sized bricks with one pixels worth of mortar if there's only three of them so the next option is to go for right which is a little harder or we could make one brick smaller right we could eat into one of them and then well in this case we'll have one that's bigger and two that are smaller so maybe this one would be the bigger one the middle one not that it really matters because it's being tailed sixteen pricks so where was I yep so you can see how this actually kind of ruins things because they're not they line back up again so bricks the way bricks work just in case you don't know is you have a brick you have a second brick and then the brick that goes on top straddles them right so this needs to be like this on top that's how you create strength in the structure because if you had it the other way like this like this then the whole way up the wall there's a spot that's just mortar and so the entire wall could come apart at that scene so I mean we could definitely shift this over and then bring this over to here that should give us something that's a little better I imagine this needs to be over one more pixel actually so that gives us a little bit better so now it's tiled properly and it seems like this is probably gonna be one of our best bets right now we've got a setup where we have reasonably good repetition so we know that this can tessellate well and that's the fundamental thing right I always talk about this in design where you have to you have to understand the dependencies first so this whole solution depends on it tiling in the first place once we've got the tiling in a very rigid way we can start shaving away some of that rigidity and make it more natural and smooth and interesting straight off the bat like if I was doing one of these central tiles I know that I want it to be darker on the inside than on the outside so I am going to take the shade tool and I'm just gonna take everything and knock it down by one right maybe even by two so what I'm gonna do here is I'm going to take these away right this lets us when we go to the actual solution this lets us have something that's got a lot it's a lot less focal right on the insights and that's kind of what we're hoping for you so I'm gonna go ahead and talk it off most of this so this transitions a little nicer and [Music] right on the very edges as well so this gives us again much more natural setup again I am sort of experimenting as I do this and ultimately like I said I really want this to be to feel more organic so we're gonna try to work our way through to get something that feels a little more natural as we develop you so one thing I liked about the previous tiles that we started with before we got started today was I quite liked the way that those tiles had a a defined edge right here we've kind of slowly worn our way through and it's one of the techniques that I like quite a lot when I do this kind of work is to have a sort of like it's actually brightest not not on the outside but just in from the outside and then we contrast it down into that darker color that's the brightest one yeah that's the darkest there so basically just gonna do that and I'm gonna try to create these bigger bricks that are sort of more caps this isn't how I did it last night I do it differently every time I do it the goal is to find a workflow that makes sense over time I don't always just know exactly what I'm doing but I know what the fundamentals are right I know what I'm looking for so here I'm trying to create a bit more change in the structure right this line that we've drawn down here it's not a straight line right it's a line that's sort of bit more rugged and if we send that over and see what it looks like give us a little more just a little more I definitely want to make a sort of a cap at the very top here I think we should probably make it more dramatic right I kind of want these caps to be even more maybe even bigger maybe twice the size of the others by now they're very very even and I don't really like that so maybe we'll try just scaling them up it's sort of more paved at this point if we do it like that well though that's not so bad huh but definitely want to bring them in generally when I draw like I said when I'm when I'm drawing a shape if I'm drawing it in in a way that's supposed to look 3d and it's top lip I will often give it its shape right and what I'll do is I'll try to highlight the edge that's up here this edge gives the impression it strengthens this shape appearing like it's but like a right angle to it we call this specular light in 3d modeling and you can even further enhance that by adding little tiny highlights and you could go like as far as you want but the other way for it to work is to use fewer and fewer pixels every time you shift off the color palette so you can see how many pixels are devoted to this flat edge and how many are devoted to this edge but then how many are to the sort of like flattened areas and then how few pixels were used for the very very very corner it's kind of unintuitive to have the edges be brighter but you want to avoid pillow shading in this instance right so pillow shading is when you think of yourself as the light source right and you just shade from the front that's very very rarely the case so even I struggle with it like I was thinking okay well this is further so this should be darker right it's further from me it's closer to the darkness but if it's top lit really this might be bright up this edge or in this instance right like why would this why would this be brighter than this it's like well that's just how you that's just how you create that kind of don't mind this idea of having them be twice as big on the outside play with it we'll see where we get a little bit of funniness going on here I think we might have to step back and think about the tessellation on these ones yeah definitely some weirdness here I think maybe we would bring this seam up and then maybe even I want to give myself time to do the best work I can do but still not 100% on these this inside set I still think it looks really say me and it may just come down to creating a bunch of alternating tiles I also want to have a look at the way that the top and bottom tiles collide with each other so like this and this they create a little tile here because at the very top of this it's kind like it we get a seam so what I want to do is either work that seam back or shift it up and I think I can shift it up just a couple pixels but kind of looking to make it uneven I'm not really looking to follow the rule yeah that's SART ACK that's exactly why so yesterday string bats you are mentioning you know why not just flip back and forth between programs this issue that we've just highlighted that we've been trying to resolve would be way easier to catch if we were using a tile map editor and it would be way easier to fix because you could fix it right here you wouldn't have to flip back and forth looking for the relative spot where it makes that mistake and then fixing it and what I like now about this is that the tiles aren't one-to-one the same size I still think we could do maybe a little better at making I can still see a line a very clear line all the way down here and I'm thinking I might just I want to experiment with having some bricks just be a brighter color looks good here we'll see how it looks in there in the game that's kind of the litmus test it can't just look good in one place okay so this has to go away it's created a little bit of variation one thing that I want to explore is in this tile here making it almost completely one color it's gonna darken the whole thing but it may give us some more structure to play with it's not quite as uniform right again it's got some variation from here to here to here it feels more like three stages then like two stages right and it it gives us our eyes way more breathing room right this was so noisy before let's step it back and we'll show you again there's so much going on here it's such a repeating pattern it makes these details less impactful because there's so many lines around here but again if we work our way down suddenly our eye knows a lot more way to look it's a lot easier for us to figure it out so now the goal would be to basically take those two steps and feather that back to sew all the way along these edges and then here as well so that's looking pretty good huh that's actually looking to me it might be hard for you to see but I think that's looking much more haphazard that's some issues to work through here but but getting a lot closer I think the biggest issue I can see now is just this situation well they're going from very bright to very dark very quickly so I'm gonna start brightening these ones up that's looking much better now that there's way more consistent and I don't love this corner we can come back to that in a second outside of that it's actually looking very clear now I feel like I can really read it so if I do this no this won't look great at first I just want to get a gauge for what it does to the general color hmm I think it definitely can't be brighter than the darkest color here so rather than do that what I might do is take all of these colors and and brighten them up by one so they're like everything in here so now we've brought everything up a little bit to give it some just some balance what do you think of that I don't know how I feel about it versus the previous version I might copy at all bring it down a bit go to a new layout paste it and just flip back and forth for a sec it's that versus that it's definitely feels super subdued here and it makes me it makes me want to do more of this shifting to give this more variation if we're gonna go down like that I get the feeling there's still kind of a little bright the the contrast is still really high I wonder if I can just knock it back one and get something that's still good it's quite dark now but I don't mind that I'm really quite happy with this so far and I think that we are in a position where we can start having some voltage what I'm trying to go for here is like vines with leaves that's the goal what I'm doing is effectively because I know that this is gonna repeat I'm just sticking to having the foliage beyond the corner blocks the unique blocks so what I'm doing is I'm just thinking about how plants work and I am having them sort of reach up and outwards and as I do that I'm thinking about where the light touches so if it's like a leaf like please a bit bigger an example like this right where it's sort of reaching up at the end like this so we can do something like this to replicate that sort of aspect of it and we can go even more exaggerated by highlighting that very very edge that's facing us so what I'm doing here is a very very stripped-down version of that where I'm just taking one edge and I'm just adding a little bit of a specular to it maybe even just two colors and as I do that I'm just gonna give it a little bit of shadow to reinforce the shape so you can see a bit better and I'm trying to create some contrast trying to create a little bit of something you can see if I use this color it's too similar the palate is designed in such a way that everything on this vertical is the same brightness or a similar brightness so I wouldn't use this color with this color because they're the same one thing I want to do is I want to have surfaces that you can stick to right those include walls and ground surfaces and so I think what I want to do is devise a way of layering tiles that have those extents on them and I specifically I want to bring the character in here so that I can review this in a way that works and I think it's really important to do that I think it's really important to have this structure is set up where you can actually just evaluate whether you like something on the most basic terms because ultimately that's what the play is gonna see the player doesn't really care about your technical restrictions or limitations or why you did a certain thing they don't really care about that they care about what it looks like in the end so I'm not sure if we'll do this for the grass playing with scale is so important the only thing I'm concerned about with the bigger shapes is that it might be a little hard to control them so in this instance if it's not tile-based then we can do what we want with it really it's good jumbo sized grass he's a minute that's what I was kind of thinking like maybe something like Mishka I kind of liked that a lot I really like this seeing that animate would be really nice I wonder if there's a way that we can signify that green is the color specifically for things that you can attach to in a way that's separate from this foliage because I like the foliage so I think maybe we make this like more dead it's actually kind of a cool idea to go to a less saturated brown maybe that's better all right we use that one [Music] I really like these I think these are great what do you reckon do you think they're a little bright just all of it but I wonder if they could be just dimmed down a little bit to fit to eye catching a I agree like I don't think I would put this one here I think I would put it like here maybe but I wouldn't put it in this dark space they are very they're very they're very bright maybe we go down even one more so we're still going for green grass because that's the mechanic but I think these leaves these autumn leaves are a nice touch hey pal thanks for watching and thanks most especially to the patrons and twitch subs who support this channel and my game dev project insignia to find out more I'll click the links in the description below and if you liked 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

Channel: AdamCYounis

Views: 135,437

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

Id: Q-vZ6ZvvSys

Length: 25min 35sec (1535 seconds)

Published: Tue May 19 2020