How to import pixel art into Unity

hello everybody and welcome to this video on how to set up pixel art for importing into unity these assets that i am using here i downloaded and i will leave a link to them in the description so let's get started the first thing that you're gonna wonder about is why is it that hard you should just be able to drag and drop it drag and drop it into your scene but that's not the case especially with pixel art um you can see that if we do it with the character there's a lot of weird stuff going on here like part of his eyes are red everything's all weird and he's really blurry like if we zoom up close you can see this isn't crisp at all it's all fuzzied out at the edges and we don't want that and it's also really really tiny so that's the first thing that we're going to fix is the size and the size is controlled by the pixels per unit which i usually set to about 16 the lower that they are the bigger the object will be so you can see now the player is a pretty reasonable size but he's still blurry and he has like weird coloring issues so let's fix that um the blurry part is actually pretty easy i'm just going to go through and set all of these pixels per unit to 16 so that everything appears at the same pixel ratio so now the blurry uh we can fix that pretty easily all it is is in the filter mode and now the filter mode is like it'll add um blurring to normal art to make it look a little bit smoother but we don't want that to pick with pixel art so you got trial in here and if you do that it'll change a few things but we want is point no filter and that'll render it to the exact pixels that it was and it won't try and smooth out anything so now the blurriness is fixed and it's you can see it's hard round uh not round hard crisp edges so now what we want to do is we want to fix this weird coloring where the red is bleeding through everywhere so you can do that by going to compression now most people where they go wrong is by setting the compression to high quality and you can see that fixes most of it but there's still a few parts you can see this is slightly tinted red and this is two and then some of the outline got a little bit red and then there's gray here and it's just a little bit weird looking so what you want to do is you want to set this to none and then that will render it exactly like the colors were and you can see the difference here if i set this back to normal quality it gets all weird but if i set it to nine it's perfect so that's pretty good and i'm just going to go ahead and change all of this to the right settings and this is only for pixel art if you do this with other art it might look a little bit odd besides the compression i would always turn down the compression um but now what you want to do is you want to go to your character and if you drag and drop into the scene so you wanted to animate them this this won't work he's one big object of a bunch of tiny little frames and like if you drag in our tile set it looks really weird because it's just one big object you can't really do much with that so what you want to do is you want to take your character and then you can go to the sprite editor and this is normally where you could slice them up but it's in a single sprite mode right now which only do that if you want to work with single sprites if you want to work with multiple sprites you got gotta set the sprite mode to multiple so now if we apply that go into the sprite editor you can see that big white bounding box is gone so now we can slice it up these sprites so you can just go just you can slice them by just clicking and dragging a little slice and then you've got this little sprite that if we hit apply we can go back to here and then expand this and we can see our little slice here and it looks pretty good but that would take absolutely forever to do all of them like that so what you can do is you can go to the slicing and you can choose automatic here and then if you go to slice and then you can change the mess method which um safe and smart just do it without deleting anything delete existing delete exists existing so what you want to do is you can just hit slice here and then this will slice them all out but um they aren't all the same size you can see that this one is shorter and then they're all going to get all wonky so what we want to do is i'm just going to hit ctrl z what we want to do is we want to go to slice and then grid by cell size now this all depends on how you set up your object if you um if you drew it and you didn't really try and do any any kind of sorting then it'll just turn out really really weird looking so now you can find the size for your grid all right so i found that with this particular asset pack then slicing it by 16 and 32 seems to work pretty well it gets a little bit weird on this guy cuts off a few pixels here and there but i think it goes pretty okay it's easier than having to resize every single one with automatic so you can just now go through here and tweak a few things you can drag this out to match his whole arm and stuff like that but there's one more way to slice them up you can go to slice and then grid by cell count which is how many cells are on a specified row and column and row a column is straight up and down and a row is side to side so for every column there's four we aren't going to get into these these are weirdly spaced so we're gonna have to do those you'd have to do those uh manually and then per row there's um one two three four five uh we'll just do these so four and four so if we hit slice oh it wants to do the whole thing okay i'll just enter some number okay so with the way that this one is laid out you can't really do that but if you were to actually have one correct it would work but actually unity does it weird it treats a column side to side and a row up and down so just remember that when you're doing something else so i'm just going to go back to slice and choose automatic and then hit slice here so now we've got all this and if you wanted then you could go through and change everything i think that this is probably the best way to do it personally i think that it is you can just change all this it won't take that long but um another thing that you will want to do and it doesn't really matter but if you go in and edit something and re-slice it if the numbers yeah if you say you added a little dude another one of these little dudes right here and then you re-sliced it then that dude would get put at some random interval of character you could see if you click on them what the name is and it just um it just counts up from whatever the base name of the thing is and um you can see if you were to put another one right here if you were to slice it right then it would probably get in the middle of all that and then it mess everything up because when you animate it's entirely based on the name and if there's another name it throws everything off bounce see there is a different thing for the sprite one then everything else would get off balance and it would be putting weird things weird places so the solution to that is just to go through and rename them all so it doesn't take that long all you got to do is say like character walk and then you can like um copy this and then go to the next one paste it and then say one if you paste it with the same name as another one when you click away and then click back then it will revert to its original name so then you can just go through and name all these um and that is probably a good thing to do because if you don't then like i said before it's going to get a little bit weird so um yeah that is how you set up the pixel art character but there's one more thing i'd like to cover and if this is all you needed then you can just stop the video but if you want to set up your tile map and slice it then you can go to here sprite editor and you can see uh we need to set this multiple go to the spray editor and you can see this is a big tile set and i happen to know that these things are set on a 16 by 16 grid so if you slice it if we go to slice and we go to grid by cell size then you can hit 16 here slice and it'll cut them up perfectly because you can see we've got this path we got a side corner and then top corner and then side corner and then the bottom corner um so and then you've got all these inner roundings and it's all just fine so when you're setting up if you're drawing your tile maps make sure to put them on a certain specified grid so you don't have to individually go through and slice every single one all right now we can just hit apply and there is one last thing that i would like to cover we'll just let that think for a second okay last thing nine slicing it's very very helpful i'm just gonna change this multiple real quick so we got a few different dialogue things here and we're gonna choose this basic one it's just like a little dialog holder so we can slice this thing out rename it to something like dialogue and then um actually you know what i'm gonna add box onto the end of that dialog box and then just delete that we can hit apply here and then go to here pop this guy out he was under objects and then drag him in but if we go to ui and then image and then we set this dude as a source image and you want to focus on that and then i'm going to hit shift alt to move and anchor it to the bottom and then if we try and arrange this to about the size of a dialog box then you can see it gets all wonky and it gets all stretched and it doesn't look very good at all so what we need to do is we need to go back to objects and nine slice it non-slicing just shows what parts of it you want to tile and what parts you do not so you can just grab this tiny little green square here drag them up and drag them up and just put this one past the shadows because if if we tile this um little border here it won't look at all weird the white it won't because it has no texture to it so it won't look at all weird so if we now slice it like this hit apply then we can go back to this and um just delete this image and remake it image and then drag and drop the sprite in then we can hit t to scale it and you can see it's tiling just fine and it works just fine and it doesn't stretch anything that we don't want it to stretch awesome so that is the end of this tutorial on setting up pixel art in unity i hope you learned a bunch and if you enjoyed the video please like and subscribe for more tutorials and hit that little bell icon so you can be notified when anyone comes out i'll see you later

Channel: The Code Anvil

Views: 8,814

Keywords: unity, game development, pixel art, import, tutorial, 2D

Id: 8twoMvV10O4

Length: 12min 41sec (761 seconds)

Published: Thu Jan 14 2021