Intro to top-down game tileset as in 2d Zeldas

okay we're up hey everyone thank you for tuning in today we're going you go in Krita and work on game tilesets for top-down games it's a bit different if you make a tile set for a top-down game or if you make it for a platformer whoops hold on I have you do there you go please tell me if everything's going right as usual no music today I'll you'll just have my voice put your in the background and let's get started so my reference for this tile sets is the old Zelda games the 2d Zelda's and I have a few pictures here I have some rips from the Minish Cap on GBA whose crane shots and they're quite interesting so I should have won from a Link to the Past somewhere hold on let me grab the almighty file browser um hold on you tell us it what's that okay one is from an old game and so top-down art no it's not in that might be in tilesets Zelda alt p there you go so these are sprites ripped from the old game Zelda a link to the past that was on a Super Nintendo and it's quite interesting to see you know how big a tile was on those games and the fact that's in general most assets back then would be split you know that we try to optimize the tiles and the elements to fit those cells like the bushes for example it's not the case with everything already back then they had enough memory you know to have things like the trees that's our big unique elements or the houses which are symmetrical the decide from that you know you have quite a few unique tiles and there but yeah tilesets originally you were used to save memory because you know you didn't have the arm you didn't have a GPU necessarily and you didn't have a lot of dedicated memory play with so you could only load so many game assets on the screen um today we use style sets still you know I've got some from an RPG maker for example but mostly to gain time to be able to generate levels with procedural tools or scripts but also just so we can use tools like I don't have it open well hold on a tool like this one where um let's see you don't have the picture right there let me see just I can find something decent for you yeah okay I have this example it's it's not really pretty but at least should convey the point we use that for a game jam with a friend and we used a tile set just so that we could make long walls for the game very quickly okay it's just 9 tiles it's the same principles as the ones we're going to use for our top-down game and you know blocks of ninetails and we just replicate certain textures like this wall for example you can use it in you know to make a room of any size and so if you have a programmer with you and just make a simple script that will generate rooms of any size like that so you can have random gameplay or arenas that said let's jump onto Crete up and get started making a date set whoo you today really hot around here um there are a few features we can use to our advantage so crater it's not the best tool for tile sets but it's really good when it comes to painting tiling textures and on top of that it's the only open source image editor that has really non-destructive workflow so the layers I have here not these ones but this one down there the grass texture is actually a crater file embedded inside of my file you can do do that by going down to the add layers drop-down and you choose file layer it's the last one in the first group when you do that you can go grab any file and I can embed for example my grass again will be added to the top left of the of the document and now I have it open right there I have my texture and if I paint anything on it and save go back to the other document it has updated the bat said it's bugged right now so it will only update once ok when you open the document so basically now if I add something else and save it doesn't update but if I close this document and I reopen it should be in crater brass step eat I'll set sorry there you go this time it updates and it will update once when I add something around here save go back to the document so you get the point but the interesting part is not necessarily that it updates that we can work on all the textures individually and and and and it's interesting because Rita has a fairly unique feature when you press W you toggle the wraparound mode which allows you to see your texture in a tile Lincoln text okay so that's quite useful basically a tile set works as such so I have this picture here who convey that point let me let me close and reopen document this one is one save we open the full tileset okay so back here I've prepared that little nine patch which is the base of the simplest style sets and the really at the core of many talents that's what you have so if I get back the RPG maker one for example all these big squares you can see are actually nine tiles together these are just patches like this one like a large texture subdivided in nine three rows three columns and basically we use that so I'll have to show you later maybe an RPG maker but one tile that the base Square cell of the game is 1/9 of the square it's the small square in the in the middle and the ones around it just allow you to get the outlines of the wall of the shape um in Zelda they should work similarly well be yeah like this one like these types of floors or carpets for example you know you have the outline and you do have one Center tile and some extra padding around the its edges and the way it works is the central tile right there is going to be our base texture so I'll grab this one of it up this one in the center is the most important one it's the base texture it's the one that you're going to copy over and over again and you can add later on extra variations for it you know it's very flexible but this one texture has to tile perfectly when you use few colors like I've done here it works pretty well you can see the result down there but then all the tiles around it will have to tile with that one let's take some maybe some paths for example so I have my grass it tiles it works and now we're going to create another tile I'll go back to this document um every time I'm going to save it as a new document as a new individual texture and let's call it Road the same principle I'm going to start with a basic background color that suggests it's a road something quite bright like something that looks like dirt okay and add a few spots all details when you want a texture detail you have to be very careful that the details are distributed fairly uniformly on the texture and that they are also similar in size as you can see that for example if I add a really tiny dot there you can see the repetition but now I use larger dots try to not align them but uh make it look like chaos let's see it's pretty hard but like that should work normally for roads like these chances are you would either you know paint it like detail it quite a bit or not put many details in there but here there you go that's that's all right Izu melt yeah you don't see the tiling too much save it go back to my main tile set document and then add a file layer entrance around yep we have to place it pretty precisely I'm using the grid and guides for that there's a tutorial in the channel or for that it's quite simple just just so you know because many people don't seem to know that - well yes chaos will prevail when you go to the settings menu and duckers you can add or remove duckies you know these are those panels you can duck everywhere on the interface and so that is where you will find grid and guides alright so when you have this base sector basically its whoopsie daisies okay crash thank you um let's restart and then I'll show you and that is partly why I use individual files for the textures first of all it makes sense to use different individual files just so that we can benefit from many layers and it from working with multiple layers and still works seamlessly which you know is really useful especially these are very simple textures but when you're working on a real production are going to spend time with every single texture oh there's okay so hired real thanks for joining said just so you know this is a guy I met on the Internet it's an Internet friend since since we were in middle school like eleven years old something like that yeah let's add the file again I'll place it all right because the reason it's important to have this texture in the middle basically the edges when you want to do a bath and a transition between that main path and the grass that's often what you'll have in an outdoor setting you'll want to reuse that texture okay and add some transition between the two so let me show you how that works I'm going to create a clone of that layer so I've used a shortcut to create a clone layer same thing you can find it down there and we add layer drop-down and it's under clone layer so the clone works so that when this one gets updated the clone will also update and I'm going to place those clones all around I'll just place one on the left side because I want to keep moving on this tutorial the first of all you can see the texture tiles but now I'm gonna pick the grass make a copy okay it crashes again it's strange it's I could duplicate it be I know I didn't diplucate it oh that's the thing okay so the applique tents duplicating a file layer currently crashes crater I'll have to report the bad man thankfully the next version is a bug fixing release and it's meant to fix quite a few I'll work with clone layers in that case and rasterize them okay yes not duplicated do not duplicate it not duplicated so here's what we're going to do I'll take this texture up the layer stack and layer it on top of the road basically make another duplicate of it so let me I'll rest raise the textures for the demo because I don't want it to crash too often and to slow down too much more importantly now I can duplicate it thank you yeah so these features I'm showing you um the thing is that very few Val very useful but Val fairly use vellum or fairly few persons who use them okay and that's the problem they're really really useful but because well not enough users they're not enough bug reports and yeah now when you have these textures basically on the Left we blaze the grass which is what we want to transition to and on the right side we have the path so we want to transition from the path to the grass we will use the grass layer I'm going to add a transparency mask in there and start erasing you know where I want the transition to happen you you all right so now we have a base transition and it's time to paint over it just add a new layer pick your favorite brush make a selection you know of the frame I have snapping on I'm snapping to the grid so shift s to open the snap menu and thanks to that I can paint inside of my towel color of that okay and I'm just creating a rough base for the texture okay don't expect the e textures in the presentation to be too too pretty cos it's going to be hard to make something magnificent live especially when you're explaining at the same time it's not easy um but just so you know I'm doing that because there are many many votes I'm running a Kickstarter next month so you know about game creation and the thing is people have massively voted for a 2-d game a bit like Zelda sub down though which means you know I'm gonna have to to do graphics for that and I felt like well you know that can be interesting to share because there aren't so many tutorials about that they are actually very very few and it's very interesting because it's just as challenging as you know side-scrolling games and all I've already done the side-scrolling course and it's time to onto something else we are painting a bit of that and Azzam tilesets are part of the background also you don't want to make it pop too much okay it's better to just make it a bit you know dull like it is at the moment and let the characters be very very vibrant in the game okay so now we have that tile we need to move it to a different document just so that we can check that it's styling the right way how are we going to do that I think there's no very easy way to do it okay for the presentation I'm going to collapse it normally you are no no no you can um I forgot you can copy and paste layers copy the layers go back to this texture save it as a new one maybe um raster Road Road to grass normally you'd want to add a naming convention like it's Road left wrote up or numbering or whatnot um but that's fine for now okay so our group I layers because if you want okay it says it's empty no it's not empty why'd you say it's empty crater nice it thinks the lair is empty because it's out the frame the canvas I think okay OOP there you go okay yeah so well I've been quite busy lately I have a lot of work but during the campaign I'm doing a 30 days tutorial challenge so every single day I'll put out a new tutorial and there'll be a lot of game design programming obviously but also a little bit of game art so there'll be things like these well we'll talk about that definitely there you go I've copied everything over to that document and well now we have to fix beetling but only in the y-axis only in the vertical direction I'll go back to every layer you know I've put my shadows on a different layer than the grass I have the base grass texture here and the base row texture down there that I can take that shadow away and then I just have to paint a new one if I want or if I want to add details I'm using a resolution of 256 pixels as usual you want to downscale your assets when you export them in the game so that's twice the intended resolution of 128 pixels you want the squares to be quite small just so that the level designer if that's you then you have flexibility when you are building the levels that says now the modern way to do tile sets is you're going to use more or less small squares for the ground for example and quite often you will see things like these a yeah there was this game Medora which unfortunately has been cancelled but it's inspired by the old Zelda z'l and you can see in the game now you have tiles for the ground and you have variations and all and vela pretty small so I'd expect one tile is the size of the brush like that maybe 32 by 32 I think yeah something like that and then you have the house that's just a unique sprite and the trees are much larger you know as well it's just because you don't have problems with memory nowadays so you can do pretty much whatever you want and you can always layer to tile sets to different tile sets with different resolutions the one that's small maybe for the ground and one that's larger for the gamer sets or you can also have towels for the ground and then assets that you place by hand on a layer above that so something like the go-to game engine allows you to do that pretty easily all right yes it does look like Pokemon little bit now let's fix this styling really quickly it's mostly around the seams that you want to fix that and then make sure so it's a bit trickier in those cases and that's where crater is not the best tool for the job but you just want to spot the errors you have going vertically and now there's one problem with the grass because there's only one strand of grass you can clearly see the repetition in that case you either want to take it out and it's not a problem since it's right in the middle of the texture so it won't create any issues with the tiling or the game which can take it out the easiest thing that's the easiest thing to do or you can add another one and ideally you'd want not to add it right on the seam actually just to avoid extra work later on but as it's just a simple demo I'm gonna do that real quick by the way as people usually ask for the brushes and the the streams I think I put up a link a card normally you should have that right on the video you know um the I have the new ones that are out at least in the premium version and then I have to put these new thumbnails out as well in the arm how's it called the free version light version yeah and there's one problem when you work over the seam with transforms they don't work well in Krita you can't transform like over the the seam you can only paint erase big colors but not transform badly I mean you can transform something that you create here and go place it over the seam but then you'll have to duplicate and duplicate it manually it's just going to get cut right that's something maybe that could be improved in the future and yet simple grass friends simple symbol buttons are best when you're starting out just so you don't waste too much time you and if you have any questions by the way don't hesitate to ask is there's only so much to say about those things um yeah so the tile seems to be all right now I'll save it go back to the main document erase what I have in there and add a new file layer oh yeah wrote to grass one thing I really wish as good I'd love to see improve this snapping just having snapping four base layers like these because it works for vectors but not for these and mapping the layers bounding box the grid is super useful super super useful okay so on the other side well considering how I've made the texture we can't just um you know I want a placate right a create a clone and flatten it there you go we can't just flip the texture over ads again something will be limited with let me see and form crater please Oh selection okay here we come just flip you can see it doesn't aisle as well we're going to have to make another texture and another texture for the top for the bottom and the corners as well okay the so the way you build the sorry the way you build these is you start with the middle tile then you add the top left right and bottom and then you do the corners that connect that just connect with the left right top and bottom tiles okay are there other complications to making grass or details adding details over the seam like I've done here over other than transforms yes there are the first one is now if we add the corner right there at the top we're gonna have to make sure it transitions well with this detail okay let me show you the problem we'll have if I just um remove grass down there and start fresh so let's say this is a the starting point for our corner yes the problem is going to be that we need something to tell with this grass down there now and the problem is going to come up often but that is why when you build your tile set you're going to use very simple colors and textures and build the levels with that at first if you want to be efficient um you don't want to be too artsy you'd rather want to go fast and do something more like that you start with set up your base layers and all that stuff and just start to make the levels and see if your towel set is flexible enough you know if your structure is good enough because um there are plenty of ways to make a towel set the base basic one the most basic one is this 9-patch and then you might want to have you know corners like these hold on can I add a new layer yes you might want to have you know so you will have something like that let me draw the directions corners straight and Center like that but then you might want to have a corner that not only goes like this but that goes you know um upwards let me see it hold on this one oh yeah you might want inner corners instead of outer corners or outer corners instead of inner corners you know they will have the bottom corner that's like that but you might want to have one um that connects that way while you have erode let me use colors all the dots be Road and the grass instead of having the grass on the outside and the road on the inside so this is something that will add complexity to your tile set and hold on because um I got some old ones up in my career when you make art for mobile games you don't get to make tile sets too often these things like platformers and all um you don't have too many opportunities to work on them I work mostly on arcade games but here's an old tile set um yeah okay it's gonna open in Photoshop these are I beg your pardon please sir please be nice to me yes this is Photoshop and there you go so you have an example of what I'm talking about with variations and a bit more complexity you have that same structure it's exactly the same okay it's just a side view instead of being a top-down view but the principle is the same so you have those styles going up you know you have those corners with rocks on the outside okay and then right there you have those inward corners so that's a an old game we worked on with my partner when I had a we we were an indie development studio and yes there's a question can you upload those references somewhere I will I will the only thing is I want to do proper a proper template for myself and then I will share it with you though that might be you know not just not just right after the stream and a few two weeks maybe something like that but here so this one has some extra things like slope right there because we wanted to use style sets just so we could work with that program child where did I put it okay close it I guess but at the same time we wanted to have slopes which for which you need meshes and all yeah the top down reference don't worry I'll share it definitely but I first have to create a proper proper reference for myself because uh it's been a while since I made one so once I've made the template I will share it with you a problem but yeah we only had the simple you know a a simple 2d engine for that and we wanted to use styles pretty big tiles by the way the grid is not set up okay but we wanted to have slopes though these slopes work as such you know well very simple you have the ground level on one tile and you will have one of those ground tiles up there and one of those ground towels down there that's it and then we would just grow the collisions right on top of it and that would work oh yeah that's about it this one is um this one is fairly simple and then you can see the same principle we have as with our edge right there it's the transition from grass u dirt and the dirt tiles are available at the bottom you also have the cloud platforms yeah it was a cute little game okay hmm any questions um making them in high resolution makes it harder than what people admire through snez games nope painting is not harder actually X alot is a lot more work most of the time the big difference however is that when you use a dedicated program like pixel our programs tend to have built-in functionality for people working with tile sets if you get something like edit this one has built-in tools just to create our sets actually that's where that was their main selling point like that where you can um I think yeah you have the tiles you know darker on the right and then you can place those styles in a scene and when you paint inside those Styles they update in the view all right let's see how we can make corners now again for the sake of presentation I'm going to go pretty fast I'm not going to make everything you know super clean I'm going to work in this file just to show you a few tricks because you're not going to create all the tiles from scratch every time as you've seen we've used them this base texture already and I'm just gonna make it tell real quick okay okay exort fix it done now it works this shadow will tile properly it's only the grass that won't but that's not a problem I'm just going to erase everything and [Music] get to the corner straightaway the trick with corner the one I use at least when you are doing using paint like that with pixels it'd be a bit different because it's really quick to place those base colors but when you're using paint well here's how you can do it hold on this is yeah okay this is a file layer let me I'm going to collapse them all so it doesn't crash there we go you okay so here's what I've done I've layered my you know left tile and the top one on top of one another and again I'm going to use a mask and just mask out part of it and there you go that's the quick and dirty way to do it um what did I do did I mess up oh okay it's V opacity that's there you go you just erase part of it and then you obviously do another pass to tweak everything something like that so you can see already when I said when you place details on top of the seam here are the types of problems that arise you get that element at the top of the grass corner just forward to to town with the bottom one you have to make sure to get rid of that because otherwise when you go back to the base texture which is the most important one remember well it won't sound properly if you leave that detail at the top and so yeah you have a really quick base when you do that you can just go ahead your rice bits add extras on top you also when you are building your tile sets don't hesitate to use sharp brushes at first when you're painting um or even if you're going with a fairly painterly style like I'm doing or everything that's like shadows and all you still want to define fairly sharp edges and transitions in places but on hesitate to use those um yeah doing tilesets with you know a painterly style is very uncommon actually preparing this project I had to ask some friends who are some actually professional game developers about reference games that would use that style and the only one I could find hold on that in there top-down game art um it's one of the games in theme in the thumbnail on it right there this one I told you is one of the very few games that uses a more cartoon painterly style and that's still like a top-down tile based game these are very rare honestly so actually if you go ahead and do something with a lot of you know a very painterly style not even what like like what I'm doing at the moment but something very detailed very refined I think you could make a fairly unique they'll Zelda like yes the stream will be up later don't worry it's automatic actually on all my streams are available to watch as replay and replay so yeah then to complete the whole square well that's one of the things that are maybe a bit easier when you do pixel art because you have the opportunities to make things like circles and all kinds of curves and all when you create the tiles it can actually be easier because quite often you'll rotate them like that it'll just work out of the box well um or if you flip them and on and I can show you that on the I think minish cap for example or even Medora but something very common or grass for example - wow that's dirty yes JPEGs from the internet um Bend's on the style but you can see in Medora that little those little grass grass bits can very easily flip the tile and then just change a few pixels because you're working with very clean colors and all there's no not so much blending um so yeah it's fairly easy to create this kind of base Road and you can see in the game how simple the tile are the tiles are I think if we go to minish cap it's the same um they are fairly simple so the the base row tile is that square in the middle okay the the base texture is that and for the grass it must be the same um yeah you can see it's a green tile like that it's just one color okay and it works it works perfectly um then however you make a lot of variations you make little dots and all and these are placed either by hand or a mix of doing things by hand and using the you know your level editor to generate variations for you okay your teacher showed you who's who's your teacher uh Pinkie Pony is my guru tutorials are yeah I only have a few so they're they're not so great right now there's going to be a lot more is it last or is it in another school so yeah the the ideas that you're going to create the base you know you're going to create those corners and all raid the levels with that and actually once you have a template something when I say template I really mean something like what I have down there something like that and maybe you could have a template with a few more indications or but you know colors are enough but for your level designer you might just use the color of the grass for example here just to say that's the grass and then the color of the the road up there and the good thing with that is if you're working with a team you can get started making the game no problem you don't need anything more than that and you'll add the the extra tiles you're missing you know maybe as I said some indications like these so you don't mess up but then they can build the levels and you in the meantime the artist you will be doing that and when you know as soon as possible you're just going to send send them the updated texture like that let me get back to you this one let's finish that little doll set base I'll just rotate so I want to show you the the result but you can do it's quite limited with a nine patch like this now you need those extra corner tiles to get some more flexibility but I'll show you that we can already have a nice path and also my tiles are quite big right now alarm you know that's something I didn't have time you know enough time to prepare thee it all said beforehand because that's something you need to create the game and calibrate the tiles based on the game and all so that can take quite a bit of time as well the fact also that you know I have wavy edges like I do now in the past shadow is not going not going to work to too great and yeah there's one comment the UM the road looks like bread right now yeah it would definitely need some color correction and those dots are not so great it's over the top but hey that's how it goes when you make everything live and you try to explain at the same time at least I hope you're getting the point because that's the most important part now so let's take our bread and put it in child all done yeah when it's simplified the grass here as well I'm going to be the most beautiful tile set but it to do the trick maybe you can add a filter layer just to fix the bread like effect um our adjustment the details really make it look weird but at least you'd be able to I know not going to work color balance you just trying to find a quick fix I don't have to go back to the texture too much and we can move forward actually I'm saying that but I don't know arm I don't really know what to talk about afterwards maybe we'll talk about props and placing things on top of that Nik is asking I'm familiar with Photoshop but this is the first time I'm the first time seeing of crater what's pros and cons of using crater / Photoshop [Music] the main pro with crater I'd say is there are a few tools that are really useful I don't recommend to use crater over food shop I recommend to use both in combination because creature still likes still lacks a lot of features that a game developer will need and that Photoshop has that's very clear in that regards on Windows it's not always stable and all you've seen the tiling texture like you can have here when you make more complex painterly texture it's great to have it's really missing in Photoshop you have plenty of things that don't exist in Photoshop natively at least you don't have any Bend smoothing you have been smoothing options in here um you do have really good blending brushes as well I know that woodshop has some that crater has a good focus on that and overall for less experienced artists you know it's very good for everything like illustration and all the interface is simple though I'd say advantageous like these and many new features coming with each and every release it's not like Adobe that's really slowing down right now you know but on top of that as you can read in the comments it's free and open source and the more you know visibility it gets the faster it improves because you have more bug reports more students all developers who dabble into it a little bit and you will see that with the upcoming Python programming in the next version you will have more and more plugins I expect we'll see the same thing as in blender or where lots of people create free plugins that's very common well when you use a proprietary tool not only do you pay for the tool you don't contribute or choose the new features that come you know as part of the program but on top of that all the plugins via extra tools and all tend to be paid for especially if you're looking for good tools well if you look at vendor for example you have plenty of add-ons that's just aren't available in 3ds max and all that stuff for free and it's there you have a lot of things that that are of a stellar quality really um but yeah just so just for one second because I work with Photoshop I still do plenty of things with it with it like everything that has to do with text everything that has to do with graphic design because of styles and all I use another program called affinity designer so just to say that I'm not with this channel and all I'm not asking you to go ahead and only use open source it's not going to happen all the game developers I know use Photoshop but you know you have some things that are not available in Photoshop and that are really great or characters and all let me let me grab a character for a second just so I can show you is Silla stration thing typical I have a character I have plenty of sprites on it let's open it up I think it was just right demo so yeah so I have plenty of layers in there and imagine that's a character I want to animate at all and there are some things with the proportions and I'm asked to fix them a bit happens often even at this stage you know well increase I can just take the group get the liquify tool and pick the character proportions you can see though some issues for example in in mirror mode and yeah when I press ENTER crater will recalculate all the layers in the group individually so it's a non-destructive there are some quirks sometimes it doesn't update and all small things like these but overall it it works really great and for plenty of things like these this is something that's probably not ever coming to Photoshop Adobe is really slow at adding those things have very very old program hundreds well thousands all I had a team of 100 engineers working on the program there are things are really slow while with Krita you know it's it's really fast and we have I think I saw someone from the KD board they're they're maybe not maybe I'm mistaken don't hesitate to go and you know ask evil from the community and all and to talk about your experience with Photoshop with Krita especially if we can have more professionals on board to give feedback on the feature and it will help everyone in the long run um let's export the towel set and open Talde real quick I'll make a new map and I'll be il be 256 a a 300 okay minam bad was down six ten by ten will be enough that's quite big I'll just zoom out to show you what we can do with a nine patch like that that is not a lot so this program is open source as well really popular when it comes to writing tiles sets sorry tell base levels I'll import my tile set and there we go we have it zoom out well a 25% you until there you go here's the way I often work I'll put the towels I need the most right on the bold in the top left and then I'll start painting like that do that now I can fill the rest there you go that's about the extent of it you know that's all you can do with a simple 9-patch like that so then we'll need to add those styles I'm just flipping the tile around because I can do that alone it's H how do you do that already but yeah basically we're missing I'm just adding those cells to show how we're missing some things like these they want to have elaborate bath right there sorry I'm starting to I'm starting to lose my voice little it's just that time of the day let's say you want to make areas like these well we need those any tiles as well and we're missing them let's add them real quick to do them you want these are areas are a little more complex to create that than what we had until now I'll place it yeah okay um let me grab some corner so those um I call them the inner or outer corners yeah the way they work is I'm really losing my voice actually I think that the string will not go on fall very very long um okay so we want a corner that goes from this one to UM down like that with Road on the inside ah not really soundly inside but um we want the grass to be the small part and the road to take most of the space and then for these you only need to tile with corners like that because you know the way we design the Talz we made sure that the sides tile with the center and we made sure that the corners tile with the site which means the corners tile with everything basically program is the level design program is called child and so now we're going to use the same trick as before to create those cells so I showed you to create the corner I would take the you know the side the left and the top for example for the top left corner while here I'm going to take the left and the bottom one to create this style ah copy paste please okay wrong layup why is it down there I'll be based I'll just place them in the corner right there these are my main tricks basically when making tassets to exceptional about it um don't hesitate to don't hesitate to use them especially when you are you know prototyping the game you don't want to waste time making individual graphics and finalized and all um honestly in my experience you spend so much time creating games really like a ton it's on a ton of time you really want to spend as little time making the graphics as you can done I'm looking for my shortcut nope control shift T yes that's princey okay you okay so I'll do something like that there we go we have it so when you do that the corner doesn't look too great obviously um so there again I like frita for that so I can take both layers is the liquify tool I'll just pull that bolt in that I'm not to mess up the edges too much and to have a better roundness in there and then want to paint over the seam a little bit you know this transition around here it's not really clean and there you go you're done and so now with this style now I'll just duplicate it around you have all four sides setup and ready for my toolset and then I'll show you the result in child okay it's not a very clean job but I'll do it I'll do the trick you group of them over you okay you and there we go we have our corn tiles are not going to work perfectly that's where you also want to use the trick you've seen on the source references and using a base color for the details is a really good idea um you know those cartoon stars I'm making a training about that right now this type of cel-shaded art basically and it's really efficient it's a really efficient way to make art and that's why it's used in the animation industry know for shadows and all in the characters but also in games quite a lot in 2d games you just like to fill this block the background at least scholar like some issues and pain to ease you know so there again the last few things I'm doing I don't don't do that when you're working unless you're in a game jam or something like that you know it's just for the sake of presentation I'm trying to go fast then I can get to your questions good enough I'll save it again Angie and then if I go back to town child it reloads everything for us and so then let me check or this one you need that that it's one and there you go now it's a bit more flexible um questions you're all welcome thank you a bit off-topic but does style supports arbitrary size placement and rotation of objects for non tiled games yes so you'd better do that in the game engine for example guru supports that and most game engines for that like child is really good at tiles basically but if you have another editor you're better off using that but yes you can load textures I don't remember exactly how we use them once but you can place you know you have them those tools at the top in the tool bar for shapes so you can also draw areas rectangles and all you can assign data for that and I think it I think it exports as Jason or it has it its own arm its own format called TMX that's basically XML if you wanted to polish up the path what strategies would you use just making less darts um so considering it doesn't look too great right now yes I would I would just go back and make it a single color the thing is normally you build the our direction for the game you know separately you make sure you kind of define your color palette and all as you go and then I would yes make a much simpler base texture and make many variations for it so some things a lot more detailed like instead of having dark dots over it I would go back in there because that is really ugly uh well that's that's okay but that's not great art I would just make the art a lot more believable let's see it I had a selection yeah instead I would have something like um you know I would go do something like that's a bad and yeah so I would go to a website with textures and they start looking at how it looks in the real world you have a ground category on textures comm I'll leave you the website this is a website to find plenty of sauce photos that are good for you know texture creation but for 3d games for the most part um I would go with soil maybe is a better yeah okay you can find mud or something like rough might be the right category and let's start to look at how it is in the real world while the most bomb v's are kind of like slopes naturally paths but with a website like that you can get really high resolution photos of how you know they look those things look in the real world and just um find real details to abstract something like that is quite interesting let's see so that is mud but the interesting part about it is babbles well I would probably then go back in there and start working you know making some small rock sprites like that and make all these as variation tiles I would start with simple shapes and then go ahead and paint them and make a library of those more importantly because when you are making pals like that all the details that you have yet that you add and especially if you are painting them all I would personally make a library of those small details so that they can be easily recolored and used in another context you know something like that might work you and then below them I would add some shadows as well I would start to work a lot more on the lighting do you however just be worried because um the more details like these that you add and working with a painterly style has that defect then you cannot use tricks like when you go back to child you cannot just rotate the the tiles anymore you can't do anything you want so then you would have to work a bit differently how over-over though hey Ivan we started yeah a little while ago but you will have the replay after afterwards how is working for how is it working for animated grass or ripples on water wind effect whatever you use gif files no you don't it works like that let me show you just to wrap up with that yeah that's basically the the way we do it so it slowly build up you know details shadows everything until you know I have tiles that look good basically now I would that works like that when you want to have animated tiles hold on I should have some reference in there RPG maker has those let me check and maybe in humans you you there we go tilesets and you have all the tile sets from RPG maker and here's a sample here's how you do it like usual you do animation frames there you go that's all that for this simple answer but basically you redo the tile set with the animation frames another way to do it and much with much older hardware was to have you had so that's a bit complex and that's something you can't do with Krita you have to use a specialized program but they would use index palettes so let me see how is it called because I think yes Cosme go promotion promotion let's say pretty powerful program for pixel artists and this program allows you to replace the color the LEDs are crap let's see the official website in this program you can modify the color palette of your sprites and basically in the engine it would take that color palette so it's an array a list of colors that are in your image and you rotate part of it you might take five colors and then you let them rotate let me see I show you I know it can do that like live yes call the cycling there you go where these are pretty well known those scenes are you know they they have no animation frames it's a single sprite and basically you get animation um hold on hold on if I can find the source yes this one and yeah you will see some animation and all and all that's happening is the color palette a part of it is changing and then you you have some you know also the ability to see it throughout the day and at night and that works simply thanks to you know using a different color palette a different set of colors or the same scene yeah that's one way to do it but that's the old-school pretty hardcore way you could use a shader as well you take what water like that can use a shader to kind of move the pixels in the game that would be more a more technical way to do it ah okay so let's see Paulo is asking common question why program I am I using to navigate the project this one is direct for your purpose it's only you can search for tapas e o P us and it's a paid program but was on the Humble Bundle a while ago and it's very powerful it's very messy it's heavily customizable it has tons of features way too many actually but it's quite powerful it allows me to do you know even by default things like open PowerShell Alon PowerShell Navi I mean prompt or even open it as an admin and things like plenty of things I need to do all the time so that's why I'm using this program it's really powerful and I have another one to recommend which is cross-platform for Linux users around here it's called F Men and this one is a bit technical I don't have a license I I've just tried it real quick this one is a lot more technical where it has V controls of an old program called comment commander I think I've never used that but that's the idea and I know that it's strength is hold on in troll P control P so it's main strength is that you can go to some place and it has auto completion for the folders you type anything in it filters and every time you know you can press tab to move down the directories and when you press ENTER you go to that directory and by the way this one I think it's pretty cheap but you can use it for free as well you'll just have a prom that asks you to click a button when you start and and and and on top of that it's it's quite recent and it gets frequent updates I found it interesting and it's customizable with Python as well you you have plenty of plugins and you can find them all on github and all another question instead of using color you ever use just greyscale then you can use masks to adapt the colors later this might speed up the creation of repetitive environment um I've never done it in practice because it works if you have a more modular system in a certain art direction that allows it so let me check I know they say um tells set generator but are a few programs that do that where you can generate tile sets and and and and I know there's a big salon tile set generator there's a program I think yeah I think that this one Spartan it's a program that you know you you connect nodes to create textures and it creates pixel art tiling textures and in the case like this yes basically the base data is greyscale in a sense and then you choose how you color everything and works for some things like the lava or you know might work or the grass not too great but you know it can work in some instances yeah you can try that definitely um I prefer to work directly with colors because I want to select them quite precisely and when you start with a grayscale image and you want to color it later on it's a lot harder so let me show you some people do that and work that way for illustrations and it works well but if I take a you know a very technical element is like sprites when I'm working with games and all it's a bit harder because when you're doing that for an illustration so you saturated um the way you do it is you start painting a bit freely on a new layer with a friendly you know color blending mode you set the layer to color you start painting you know but the thing is when I start to paint with that arrange you know I just get levels of that same color instead of what I have here where I have some huge shifting so look at the hearing on the advanced color selector it's subtle but when I get to be darker color I have some huge shifting and I do use something quite often however is working with grayscale or not but I use or is it's just months and gradient map it's this one now use something like that just to tint my sprites for example okay so typically something you can do in Photoshop and you can't in Krita there's a gradient mapping filter but it's not stable and it's not fast at all and in Photoshop you can not only use the gradient filter but you can also use conditional blending like that to only apply it with the shadows for example and you know do something a bit like an Instagram filter something that feels a bit like an Instagram filter for example okay Nick has a question can you run through your workflow by program or type of program from tileset creation to creating the game yeah the only thing is I don't have a project set up in a game engine but you know you've seen the critter bolt in Photoshop I would do things a bit differently well although I had that sample where is it all set why did I put it ah ah so let's take the the other one for example it's a bit messy but you know I would take a template I paint the textures on different layers depends a lot and and I wasn't painting all done yeah so I group everything and all that stuff then I export that as a single PNG image but you can see there open it up installed so hold on I might have still the the level files that's why I can show you should be 2014 one and level design let me see I'm going to try to grab all that and unzip it might take a while any other questions in the meantime your bolts I'll try to just grab one level then this one so it's very fragmented I guess so I'm gonna take a well really big archive you can achieve a similar effect to the gradient map with curves built on Crete I know that's that's quite different so yes you can sometimes kind of achieve the look and feel but using a gradient ramp is is quite different it allows you to do really a lot of things where you can play with the boots exactly we the colors you want you know on the gradient you could go it'll have a really split toning effect somewhere um and in Crete are you're quite limited and to make games I use I use Krita Photoshop I work with the the to go to now you know and [Music] yep piled all the tile Maps I'd used some stuff for the sound as well I have FLC you have been using for a long time you know I make a bit of music as well a program for writing I use Visual Studio code for everything with programming you know when I'm actually working on a game the programs I use a bit different than what I show on the tutorials okay and we have been that's having fun in the chat let's see let's do I block him okay I'll leave it there and if there's one more message like that so I'll just block you okay so showing the next step in tile sets and getting from you know making this I'll set to the game would be this one does it work okay it's a bit bugged but okay well this em down the chat and it's elite I can't delete everything I have better okay look yeah look better you there you go there you go so yeah that's the next step although I'm you know these are pretty old files so nah they don't work exactly as expected the the resolution of that and just to tell you using tile you know I wouldn't place all the tiles by hand I just placed like dirt for example and then I would press a key I had a little script and this generates you know all the boulders like that it checks if it's you know on the bottom or on the top edge and it would add the bumps as well and you rock variations right in the middle so there you go and then you just put the the game in the file I don't use game maker studio um nope I've tried it but there's Godot now so yeah I prefer to use Godot personally I mean even if I were to talk about my personal opinion then I do cover I will cover girdle on the channel because it's open source and I try to cover tools that everyone has access to okay and how's how complicated is good to for someone with no programming experience well as with any game making tool because making games is not easy it's pretty complicated to get started as in it's not that it's extremely hard but when you're going into programming you need to have that mindset where you're ready to struggle you have to be ready to struggle programming is like that so that's a good occasion to talk about that making games you're going to struggle when you start to actually make them you'll have to solve a lot of problems that are very specific to your game you won't have tutorials telling you exactly do this and do that that's just how the job is and with programming for example I see people go to tools like that was construct to stencil things like these where it's visual you know and there's going to be the visual scripting in Google as well and people are like yeah it's easier and thing is it's not easier it's just that it makes you feel more comfortable with that daunting task that programming is and you know it does create a bit of a visual bridge between the language and you but at the end of the day when you are using those visual systems you are programming you're creating variables you're working with data and all that stuff and you know you're going to be quite limited if you don't understand the underlying concept the best way to understand them is to embrace language to learn its structure and all thankfully though programming languages are very simple you know you can only do so many things and then you have to learn like the functions the tools that are in the game engine and you do that step by step so arm yeah if you accept the fact that you know you're going to have to read you're going to have to learn words functions what they mean in a sense as when you are learning a language you know you can have a lot of fun with that and the thing is for example in construct two with the blocks that you have the visual things you're going to create variables not I don't have construct two but I don't I do have RPG Maker didn't use that much but that's you know that's uh my friend Audrina has left you know he had to go but and that's how we met and that's how I got started with games when I was I don't know maybe uh you know twelve thirteen III would slack a lot uh was the type of guy who would procrastinate a lot but yeah so if you take RPG maker which has an event based programming system which is quite visual in nature let me check how do I go to the event layer uh I don't even know um mm-hmm I just want to show you that I'll actually it's not that hard right there oh yeah with this system I can click anywhere and you know add a new event on a given cell and then I'm going to set the content of the event so I'm going to do things like for example show text and then I choose the face of the character and write the text so that doing these things in a visual way is very handy because um you know you don't want to write that as code for example if we were in a game programming environment whoops you would have something like that show text um you know image equals blah blah blah text equals and then you would write the text in there you know just say hello and I can do the same here in a visual way and it's a lot more convenient however you are doing plenty of things like you know you have controlled progression and you can control variables in there you will choose the variable you will choose the operation you will add something to it and all it is very slow and that's something gilding all the time in games well you know if you're doing that in a programming environment with the programming language you will just do are able my variable calls 3 + 4 you know you just write it directly this is a Visual Studio code this is not Adam but a really good card code editor yes as far as styled is concerned the files are kind of XML JSON you have a JSON export and the default format is XML and you have importers for various engines the unity has one Godot has one as here there are plugins and I think there's going to be a built-in support eventually it's one of the the things they considered doing at least there you go that said it's high 30 okay I'm losing my voice and I've showed you basically a you know everything there was to to show if you have any questions don't hesitate otherwise I'm going to cut this string for today unity is free to use it's not open source and if you want everything you know you you'll pay a license alarm yeah but you have that in Google so you can go ahead and use that all right I guess that's it for today thank you for being around yeah as always and until you know I launched the Kickstarter I'm going to be quite busy I'll try to stream there will be some videos on the channel but a few less tutorials however during the Kickstarter 30 days 30 tutorials okay so arm yeah 30 tutorials including some streams you know like this one but a lot of you know quality videos thanks a lot see you next time Oh bye gotta stop the stream now whoa look at all those windows crazy and yep see ya

Channel: GDQuest

Views: 116,758

Keywords: tileset, tiling textures, 2d game art, krita tutorial, top-down game, game art tutorial, tiles, gdquest

Id: lqHuppdbctc

Length: 93min 10sec (5590 seconds)

Published: Sat Apr 22 2017