Tiling a Worldmap in Pyxel Edit (Timelapse/Commentary)

[Music] hello there my name is brandon and i make pictures out of tiny squares and today i'm going to make a small overworld map using a program called pixel edit which is a pixel art software with focus on making tile sets and i've had it on my computer for a while but i haven't really used it all that much so i thought i'd dust it off and just try something that's a little bit different to get started i'm going to create a new document and you can choose a canvas size based on how many tiles you want in the design as well as the dimensions of the individual tiles themselves for mine i'm going to use a tile size of 8 by 8 pixels and my canvas is going to be 32 tiles wide by 30 tiles tall which will give an overall canvas size of 256 by 240 pixels and i chose that because it's the resolution of the nes in fact the nes color palette itself comes baked into this program as one of the preset palette options which is pretty cool they've also got other gaming palettes like the game boy and the commodore 64. but for my work today i'm going to use this preset palette called tasty pastels just because it looks like a good amount of variety and harmony and it's pretty mellow on the eyes too first thing i'm doing is making a little eight by eight tile of a road just by drawing it within one tile of the grid here and then by using the tile placer tool i can control click to add that design to my tile bank which will then allow me to paint that same tile across the canvas and you can also rotate the tile which is how i got the vertical version of it here similarly when you're working out something like a corner design you can either rotate or flip the tile just to fill in the other orientations that you might need the next tile set here is going to be some water surrounded by land and i've made sure to make the middle tile of that grid as just entirely water and then the other tiles are the bordering pieces of land that way i can tile out and repeat the water tile to whatever size i might need and all that'll be left to do is to surround it by the land tiles of course when you use this to make a randomly shaped lake or something you realize that certain changes in direction will require their own kinds of tiles that the original set didn't account for so it's important with a design like this to also create the inside corners which can basically be constructed by creating another tile set but with the opposite design elements so here i'm making a complimentary tile set with land in the middle that's surrounded by water and then i can use these inside corner pieces in combination with the original set of tiles to create different sizes and shapes of land and water all within that 8x8 scheme so what am i gonna do with all these tiles uh well i don't really know or at least i didn't quite know what the direction was at this stage in the artwork i just knew i wanted a bit of exercise building out some tile sets like this and like i mentioned i also wanted to play around with this program specifically since i've had it for a while but haven't really sat down to make something complete yet so i started by collecting together a few repeatable tile designs and then i figured i'd throw them all together into a map once i had enough unique pieces to work with and at this point the position of everything within the canvas is essentially just for the purpose of working out the tile designs so this isn't necessarily where everything's going to be for the final image in fact i wipe the entire canvas clean before tiling the final map but we'll get to that in a bit so after getting a few of those repeatable elements handled i figured it'd be good to have a couple unique landmarks across the map this one here is a small city design that i'm working on for which i'm using a typical top down perspective that'll show the top and the front face of the buildings to get that kind of distinction i've used a lighter shade for the top and a medium shade for the front and then in some cases i've used the brightest color as a highlight edge to separate them i've also worked the idea of this lighting scheme into the colored outline of the building where i've tried to use a lighter outline color on the top and a darker outline color along the front side all within this sort of peachy red hierarchy of that color palette up close it might not feel like it makes too much of a difference either way but from a distance it'll help keep those top and front faces distinguish from one another while also giving kind of a vibrant but soft quality from those pastel outline colors one of the features i liked from the city design was making this seamless connection to the main road tile and i carried that road to disappear into the city which kind of gave me this idea that the purpose for this world map could be like a stage select map for a racing game and you could you know kind of go through and select these different points along the road to play that particular race so this one for instance you know might be like a circuit that goes throughout this city and maybe it's all themed with that architecture and that color palette and stuff like that and i'm kind of totally picturing this like in the classic outrun aesthetic so i don't know that might have to be a follow-up video at some point actually it's kind of funny because in my last video i was saying how i'm not really a car guy while making a car and now i'm working on another car theme piece so i don't know they're just having a moment for me apparently but this is one of those times also where i just kind of jumped into a piece without much direction so it is kind of nice to discover a purpose along the way and just kind of follow up on that idea by the way if you're curious about the versatility of this program for making pixel art it is a pretty simple and straightforward interface to use i mean i did have a bit of an adjustment period but that's just because all the photoshop shortcuts are burned into my brain and the ones in here are slightly different but it wasn't actually that far off and actually the magic wand selection tool in this program was particularly awesome to use because you can actually toggle it to only select stuff within a tile and on top of that you can also toggle whether it selects contiguous pixels or not so between combining those two there's a good amount of fine tuning when editing specific tile designs that way also when you do edit a tile it'll update all instances of that same tile in real time which is obviously really nice for just immediately getting to see the effect of your changes across the entire map design one of the areas i found it to be a bit lacking though was with the animation so you can see at the bottom there's an animation and frame edit tool and it works well for creating kind of an isolated sprite sheet for an individual object like let's say it's a character animation or pickup in a game but i couldn't find a way to create an animated tile and then place that animated tile within a larger design which is kind of too bad because it'd really be a neat way to add some life into a map design or something but i guess that's not really the intent with it so this program is nine dollars u.s and i think there's a free version of an older build also but overall you know it's a pretty light purchase it's kind of hard to say that you know it'd work as a one-stop shop for everything you'll need out of the pixel art program especially when something like a sprite is only a little bit more but for me at least it's been a fun kind of novelty program to dip into for something different and i do just kind of like seeing how different developers tackle functions and interfaces in these kind of niche pixel art programs all right so at this point i've got all my assets designed and i'm ready to draw my world map so i wiped the canvas area clear and started by blocking out the area for the map i didn't want it to go right to the edge so i put a black trim around the whole thing first just so i could go in and add a border to it later after that i started painting in some tiles for just a very basic structure of the grass and water areas and then the path of the roadway that will go across the entire map i had some desiree tile designs so i started shaping the right side of the map as these islands that are off from the main coast and that way it would also serve as a different aesthetic location for a different level in this game the thing that's a bit tedious with the tiling is that you can only do one tile design at a time rather than you know selecting groups of tiles to place down together so you'll continually see me going back and forth to the tile bank and the canvas and you know sometimes you can plan ahead like oh maybe i'll go through and drop all the top right corners of this specific design and leave enough room and double back to fill in the rest but you know a lot of the design choices can vary as you go along so it's definitely a lot of back and forth with that one also there's this black bar that shows the name of the tile uh kind of underneath your cursor that gets in the way of seeing what's below the cursor and it's sort of usually relevant to see that space because you're trying to place a tile there so that's kind of another thing to watch out for after like a solid 20 or 30 minutes of working my way through this initial placement uh this is what i ended up with and honestly i was kind of like oh man that's it i felt like i designed way more than this and i realized that the secret here was really to go in and utilize a lot of the changing direction and corner tiles to kind of break up a lot of the monotony uh which leads me to the final design which is this in addition to using more variation and cornering for the land masses i've added texture tiles throughout the grass and desert areas and also injected more color throughout such as the brick red color on the edges of the land and the patches of darker blue within the water to kind of indicate deeper areas oh and i definitely cheated for the animation here of course uh by bringing this image into photoshop after and i overlaid those clouds and just some other simple animated components uh but i really wanted to see it with a bit more life you know so let's go ahead and close out with some crt time let me know if there's a particular kind of world map or tile design you'd like to see because i think i'll have to revisit this idea and workflow again at some point uh but until then thank you for watching and take care and keep it square [Music] um [Music] you

Channel: Brandon James Greer

Views: 44,797

Keywords: tutorial, speedpaint, timelapse, gamedev, tilesets, tiles, pixel art

Id: 5f-g87aGbBc

Length: 10min 16sec (616 seconds)

Published: Sun Feb 28 2021