[TUTORIAL] How to turn DRAWINGS into GAME ART

hi there i'm jay and nobody knows who or what i am what i am is a game developer who sometimes works with pixels and sometimes works with pens on paper this youtube channel got its name somehow then the main project i've been working on for over two years now is a platform game called neko negro that from early beginnings kinda developed into a good looking if i may say so myself platform game that i am happy to be still working on it's hook hopefully it's a unique art style that grabs potential players by the color of their shirt or other upper body garment brings them uncomfortably close and says look at me i am different and i've been asked exactly how i'm doing both this and my recent wowie jam 3 game mr cheebs well here's where i tell you exactly that how i make graphics draw them on paper at the end well that's not the end there's more to it than that i'm going to break down my process predominantly for the foreground scenery in this video step 1 consistent scale this is by far the most important of considerations when drawing level art i could just scribble it all on loose sheets of paper and scan things in and it would be the most horrible task of getting all of that to sizes that work with each other i happen to have a clever hack around that remember doing mathematics at school chances are you had one of these bad boys they have grid paper pages you're smart you can probably see where this is going but still i shall elaborate scan this grid paper just the paper find out how much you need to scale it down to to make a decent size for your level art for example 32 by 32 pixels which is the absolute smallest i would recommend from hand drawings i've found this paper in particular scales down to that at something like 38 percent which will give me nice 64 by 64 blocks if i draw things on a general 2x2 square basis something like this for now we're only drawing a monochrome to be colored digitally at a later point step 2 scan and clean up scanning is easy enough and i won't fat in this video nor insult your intelligence by describing how to do that what i will describe though is my favorite tools for cleaning up my artwork one thing you'll notice immediately is that i personally tend to draw very bold solid lines and shapes and this helps out immensely with my approach after scanning you'll have a page that looks like this excellent our task now is to zoom into one of the scanned images patchier looking areas of blackfill this is going to be our visual guide for the first important thing which is to remove our grid lines locate the threshold function in your graphics program i don't know if this has the same name everywhere but the gist is that it reduces your art to a literal bitmap this means it comprises entirely of just black and white pixels threshold will have a setting that determines the threshold of light and dark pixels and which it considers to be white and which are black what you need to do is to find the darkest possible setting to even out that patchy black as much as you can whilst still nonetheless thresholding out the grid lines next is a case of removing all these naughty stray pixels usually coming from the tiny specks scratches and dust on your scanner glass with noise reduction i generally go for default settings here but i recommend you feel what works best with the results of your own scan next up another threshold to remove any edge smoothing from the noise reduction process and then it's time to zoom right in and peruse your black and white pixel art for anything left to clean up manually usually not much to do here if you don't own a graphics tablet and pen you could zoom in and do it with a mouse step 3 color if you have to then color i'm glossing over this step entirely because rendering in digital art is entirely its own subject and too big for this video feel free to use your own methods look up tutorials and guides or forego color entirely step 4 export whether i've colored my art or not there will be a hue i haven't used elsewhere which is a good thing as i'm now going to fill all the negative space with this and then select it all and then erase it to give my asset sheet transparency you should be saving regularly anyway but please save it here now remember what number you came up with in step 1 to scale your art down to size i had 38 and that's exactly what i'm scaling down to now feel free to do so with a different number as per your grid size despite using the threshold function to get the pixels a perfect unsmoothed black and white i now sorely recommend scaling down with smoothing on otherwise what is even the point you may as well have drawn this in pixels silly rabbit and from here it's just a case of select a rectangular area copy paste as the new image export the image to a folder with an appropriate name that you will later use to identify this asset in your game development tools repeat until done step 5 level decoration when making a game with this art i will initially make levels that typically look like this i tend to test like crazy in this state to make sure the level is actually fun before i proceed with this next step but that's another thing for a future video what you're seeing here is a tile set of flat 32 by 32 squares hey remember where i mentioned those exact pixel dimensions before that function solely as a levels collision because the draw on graphics will not with very few exceptions when it's fun and i enjoy playing it and there are no huge changes to make it's time to make it actually look like a thing methods may differ but in construct i generally like to have what i personally call a dump layout for each world or whatever what this entails is a non-interactive space i drag my sprites into so that i can edit their initial instances and configurations here without breaking anything later on handy if i want to do something like gently animate say plants with a subtle sign behavior affecting their angle from a low offset origin point stuff like that when all my sprites are in this dump layout i can then drag them from my sprite list into the level in question one thing to notice is that they may not necessarily have scaled perfectly to those 32x32 blocks and there may be some re-positioning needed going with a hand-drawn style inherently has some looseness to it so this really is just one of the quirks of working with such an aesthetic this is pretty much what i'll be doing for the next hour or so placing these sprites around the level like it's a big amorphous dress-up doll until it is pretty done of course this isn't it not yet in a future video i will describe my process for both background and character art for now have fun drawing art and making levels with it thank you for watching this has been my first ever video tutorial so there's a chance it may need some work if you'd like to leave any constructive criticism or feedback in the comments please do so but remember to be civil with other youtube users if you'd like to see more of this kind of thing please ring my notification bell and if you'd like to help support the channel please give this video a like so the video gets better visibility in searches and subscribe to the channel so the channel gets better visibility and searches thanks for being great friends stay beautiful

Channel: Pens 'n' Pixels

Views: 34,917

Keywords:

Id: KFoFDS4fKl0

Length: 7min 42sec (462 seconds)

Published: Sun Mar 14 2021