Pixel Perfect Rendering in Unity (Part 1)

[Music] [Music] hello everybody my name is alex garbas and today i'm going to be walking you through how to set up your unity projects to be pixel perfect now what do i mean by pixel perfect well when you're working with pixel art you typically want it to display in in engine just as it does in your art or image editing software you don't want there to be any blurring or scaling you just want it to be one to one um between your the game and your original artwork now this sounds like it would be simple to set up and for the most part it is but then there are some parts of it that can be a bit of a headache especially if you're developing for multiple screen sizes so i wanted to walk you through the process i use for setting up pixel perfect this is going to be split into two parts during the first part we are going to take a look at um unity's pixel perfect camera component and in the second part we're going to talk about um setting up your user interface to be pixel perfect if you wish to follow along at all or view my project files for yourself you can view them all at um github.com alex carbus slash unity pixel perfect tutorial so i've got a couple sprites set up here we've got our character named pixel pickle um we've got these tiles for the for just the quick map i set up um this isn't really really the pickles at all i guess we could say it's a pickle factory um let's go with that it's a pickle factory this game is about pixel pickle in a pickle factory um and then we've got a ui bubble um as as the name implies it is a bubble for containing ui elements um so before you begin you're going to want to determine two values your first value is the pixels per unit value or ppu and what this is it defines how many pixels of your art correspond to a unit within unity's world space when you're working in your art software the pixels are the units so you have a ppu of one but unity uses its own world space unit system and so you have to tell it how many pixels in your artwork correspond to a unit in unity space and typically this is going to be the size of your tiles so for instance with the tiles i've made um each each the width and the height of each tile is 16 pixels so that means the ppu would be 16 16 pixels per per unit um if you're not working with a tile based game um which in most cases you are going to be working with tile based if you're doing pixel art but if for some reason you aren't um i would say make the ppu the size of your um the the width and height of your smallest square object so like we have our character here who is also 16 by 16. but yeah the next thing you're going to want to determine is your reference resolution now this is the resolution that your um sprites your pixel art is designed for um another way to think of it is the screen how many pixels are going to be displayed on the screen width and height wise um so for instance since we have um a ppu of 16 each tile is 16 by 16 pixels um and let's just use the hypothetical scenario here let's say you want a um your game your game screen to be 20 tiles wide and 20 tiles tall then um you would have your reference resolution be 16 times 20 on both the width and the height which would be 320 by 320. a good rule of thumb for um picking your reference resolution is just taking a base aspect ratio and multiplying it by a certain value so like the um default value it gives us when we jump into unity is 320 by 180 and that's actually just a 16 that's just a 16 by nine aspect ratio but multiplied by 20. and we'll we'll talk a bit more about reference resolution once we head into unity because for um for games like um for mobile devices it can be a bit of a trickier process for selecting your reference resolution but for games for pc and console you're typically going to be developing for a 16 by 9 aspect ratio so you can just make your um reference resolution that aspect ratio multiplied by a certain value one last thing you're going to want to do before um jumping into unity is you're going to want to make sure all of your sprites are exported as pngs that is the um file format that we're going to import them with because it it maintains transparency and it prevents any sort of quality loss because it does not compress your files um so typically in pretty much every image editing software you can export your file as a png and with all that done we can go ahead and jump into unity so as you can see it's not very clean right now i've set up a um base tile map and a um some base scripts here and um but i've um went ahead and reverted most of the settings to their defaults so you can see here um this is this is a mess yeah nothing's lined up properly um and we need to fix that so the first thing we need to do is you can go ahead and select you can select all your sprites by um control clicking or you can do click and then shift click to select all the sprites within a certain area um we want to set the ppu that we determined earlier um so in this case it's a 16 so we're going to enter the pixels per unit as 16 hit apply and everything's sized properly now but you'll see the um that it's pretty blurry um which again this is not pixel perfect that's one the issue this is one of the issues um pixel perfect rendering aims to avoid um because we want the edges to be nice and crisp so we need to prevent so when unity imports sprites it has these compression settings and we want to go ahead and disable all of them we don't want any compression whatsoever so set the filter mode to point and then set the compression to none we'll hit apply again and as you can see it's nice and crisp you'll notice the pixels are still a bit distorted um like some you'll see some pixels appear larger than others depending on where i move um but everything's everything is crisp so we're getting there um and real quick i'll go over some of the um additional settings for importing sprites so for a tile map or an animated object that exists in the sprite sheet you can open up the spread editor here actually first um you set the sprite mode from single to multiple then you open up the sprite editor and you can select the slice option um grid by cell size and then enter a pixel size that's equivalent to your ppu on both the x and y axis and then you can also set a pivot point i have them set as um center here this just determines like the the point that um transformations are performed around or sprites are sorted by um [Music] i'm gonna go ahead and hit slice here and as you can see it automatically sliced up the um tile map into individual sprites and then you just hit apply and you're good now for um ui elements like this ui bubble we want to be able to resize the um we want to be able to resize this without distorting it at all um and so in order to do that um you keep it keep the sprite mode single open up the sprite editor and you'll see these green um these green squares on each side you can simply drag those out to nine slice your sprite and so what this does is whenever you now whenever you you resize a ui component that uses the sprite um the corners will remain the same the same size no matter what while the um edges will scale according to the um size you've set as opposed to if it was just a single um sprite then the corners would resize along with the rest of the sprite and it would look distorted so we've imported the sprites now there's a few more settings we'll want to change before um jumping into the 2d pixel perfect package um you want to go to your project settings um go to quality and for each quality level here you're going to want to um disable anti-aliasing anti-aliasing is the um is the um effects where it blurs the edges to create smoothness which of course you don't want because this is pixel art so for every quality setting in in your um quality settings for every quality level in your quality settings i mean um just disable the anti-aliasing all right looks good and then we're gonna go to edit again edit grid and snap settings and for the moo for the move um snap here you can um just select this little icon to change all three values at once you want to set this to 1 divided by your ppu so in our case 1 divided by 16 and you can perform operations like this within the um unity inspector just press enter and it gives you your result now what this does is it allows us to move our sprites on a pixel grid um so go select the little um the the directional arrows icon up here select this to begin moving your sprite and ordinarily you can see it moves freely um so you can like set it to um slide in between a set of pixels right here which doesn't look natural um since it's pixel art so but now that we've defined the um grid and snap settings if you hold ctrl it'll snap the um it'll snap the object to the grid and since our grid is one divided by our pixels per unit it moves along with it snaps to the rest of the pixels as you can see whenever it moves now it looks nice and natural it fits in with the background and that is the um initial project setup needed for setting up pixel perfect now you are also going to need a um package from unity called the 2d pixel perfect package which can be installed from window um package manager give it a chance to load it's doing its bets it's doing its best um and i already have it installed but there'll if you don't have it installed there will just be an install button here you click it to install and um this this has the pixel perfect camera component which basically renders the scene to be pixel per pixel perfect we've already done plenty of setup to make it pixel perfect but as you can see if i hit play there's still some issues you can see i can still slide in between um pixels um there's still some um [Music] some pixels like if you look at the lines some are appearing thicker than others and so the pics so while we've gotten rid of most of the um blurriness the pixel perfect camera is going to do the rest of the work and ensure that everything remains completely crisp and pixel perfect so you're going to go to your the main camera in your scene and add a component pixel perfect camera and as you can see it gives you a sort of um it gives you some green boxes here to give you a um preview um you want to select run and edit mode and this will let you preview the changes in real time um in the game window here now this this isn't a variable that gets saved this is just for the editor so every time you reload the scene in the editor you'll need to hit this button again if you want to preview the pixel perfect camera in real time and you'll notice there's a um error up here because of the way pixel perfect rendering works there are certain um if you're rendering at certain resolutions it will not work properly and it will display this error message so i'm going to go ahead and run through each of these settings in the pixel perfect camera and talk about what they do um these two are just the um values we had defined previously so the um asset pixels per unit is the ppu 16 and then our reference resolution is the reference resolution we defined before um in our case we'll just keep it at 320 by 180. and so you'll see here the dotted line is the um reference resolution it's everything that is rendered within the reference resolution while the um solid green line is everything that gets rendered outside of the reference resolution if you're rendering anything outside of that resolution now go ahead and explain that a bit further with the next three settings these are all the upscale render texture pixel snapping and crop frame are all um variable depending on your um your needs um for upscale render texture if it's enabled it changes the rendering mode so that instead of um also real quick here um go ahead and um set this to 1920 by 1080 just to get rid of that error because the if you haven't set the free aspect the free aspect view in the unity editor tends to generate that error message um but what upscale render texture does is if it is enabled it changes the rendering mode so that the scene is drawn as close as possible to the reference resolution you've set and then upscaled to fit the screen um this can result in some pixel distortion at times but is typically safe and it also has the added benefit of pixelizing any sprite transformations you you perform so for instance let's go the pixel pickle here and i'm gonna rotate them 45 degrees squish them or let's stretch them now as you'll see it's no longer pixel perfect it's no longer lined up with the rest of the pixels on the screen if we have upscale render texture set the true it is it's still it's still stretched but it's pixel perfect all the pixels line up and so for if you're wanting this sort of effect it's also you know as you apply transformations it continues to pixelize them so if you're wanting this sort of super pixelated effect then definitely go with upscale render texture um let me let's go ahead and reset this here back to normal now if you have upscale render texture disabled you have access to the pixel snapping option and what this does is essentially like how we defined with the grid and snap settings where if you control click and move your um object will snap to the pixel grid pixel snapping ensures that the objects will snap to the pixel grid during gameplay you this won't affect their actual positions um but rather the positions they appear at so you can have an object let's say pix pixel pixel is positioned right here um and it'll keep this position during the gameplay but if you have pixel snapping enabled let's let's look here if you have pixel snapping enabled pic pixel pickle will it's a bit of tongue twister there actually pixel pickle will um now appear to um snap to the um grid again this does not affect pixel pixels pixel pixels pixel pickles actual position but rather the the position it appears in and of course if you have um upscale render texture enabled it already performs this behavior because it's rendering at such a small size the next set of options here are crop frame x and y and what these do are so if you look if you look in the scene view oh this actually lines up pretty well um but let's say it didn't or of course it lines up pretty well because it's 16 by 9. let's say it didn't let's say the reference resolution is let's subtract 16 from this from both sides so it no longer fits the screen if you have crop frame x or y enabled it will disable it will not render anything outside of the reference resolution then if you have both checked you can also select stretch fill which will as the name implies stretch the viewport to fit the screen um you typically don't want to do this because it does result in blurring it's a bit minor there but it is still somewhat noticeable and of course the goal pixel perfect is to render the pixels as perfectly as possible so like i said these settings are pretty situational um they really depend on your needs my personal recommendations are if you're making a game for a fixed aspect ratio like let's say this is this is being made for pc and console then we'll stick with a 16x9 aspect ratio the settings i'd recommend are um upscale render texture disabled while you have pixel snapping enabled and um crop frame x and y are both disabled we'll take a look at this here it's a bit jittery meaning just because i haven't perfected the movement scripts but it's everything snaps and that is what you would like with pixel perfect the snappy um the snappy crisp movement all the pixels line up now if you were designing a game for a variable aspect ratio like this is typically for if you're designing for mobile devices or if you're maybe making a game where the window a pc game where the window can be resized um i would recommend having upscale render texture set um upscale render texture enabled um while still keeping crop frame x and y disabled this this movement isn't as snappy as if you have pixel snapping enabled but for for um variable screen resolutions it is necessary to use this to avoid errors and if you're developing for mobile devices there's actually a um tool you can use to um to um preview that in real time just as you would with the pixel perfect camera um it is a preview package so in order to enable preview packages you'll need to go to um edit project settings package manager and make sure enable preview packages is enabled if it is then you can go to window package manager and look for device simulator and it's not installed yet so i'm going to go ahead and install it all right so we have the device simulator installed so now in the game window you see this little drop down here you can select the switch to the simulator and this lets you preview the game as if it was being run on you get a ton of different devices here you get apple you get um google you get motorola samsung you get this whole list here and you can just switch between them make sure of course that you have um run an edit mode enabled and you can see how the game will look on these various devices you can also rotate the screen to see how it'll look at different orientations and here's where i was talking about earlier how if you're developing for variable aspect ratios you may want to play around with the reference resolution because as you can see here if i go over to the scene view we're currently using a reference resolution um made for a landscape so it looks fine if we switch to landscape it fits fine but if we switch to um portrait you can see it's pretty small and so and then the opposite is true as well if you switch these values so it's 180 by 320. then portrait looks fine while um landscape or actually landscape looks fine here but it is still a bit zoomed out compared to um the portrait view and so a way to ensure that it'll have the same level of zoom on um both on both portrait and landscapes is to just set your reference resolution to something square so let's do 180 by 180 and then we when you rotate it you can see that the view is slightly different on both orientations but also the zoom level is about the same let's go to the scene view also to observe this so you know you can you know you can for sure see this part of the screen on both orientations and this is this is something that you'll want to if you don't have a if you don't have a good idea of how you want it to look this is something to play around with um i'd say i usually think like either a square reference resolution or a portrait reference resolution is fine um you also cannot use your keyboard to control in the device simulator oops all right so that about does it for setting up the pixel perfect camera in unity now in the next part where you're going to discuss setting up um user interface to be pixel perfect because user interface is a set is separate from your actual world space objects and as a result we're going to need to go through some separate setup processes for them um so see you in the next part and thank you so much for watching you

Channel: Louisville Makes Games

Views: 224

Keywords: Game development, talk, game, games, gaming, development, tutorial, how-to, gamedev, content, game design, video games, louisville, kentucky, lmg, LMG Content Creator Jam, instructional, game creation, unity, unity3d, unity2d, pixelart, pixel perfect, alex garbus

Id: S70NvLLmBPg

Length: 26min 25sec (1585 seconds)

Published: Tue Dec 08 2020

Reddit Comments

[u/abezuska]

I am part of Louisville Makes Games, a local gamedev community here in Louisville, KY. A couple months ago we held a "Content Creation Jam" on itch.io where we asked people in our community to create video tutorials and share their knowledge on any gamedev relevant topics. We ended up with 9 videos which we are releasing every 2 weeks.

This is a completely volunteer effort and our community is a 501(c)(3) non profit, we are doing this for community building, knowledge sharing and just education in general.
Subscribe to the channel to get notified when the next videos come out.

What topics would you like to see covered in our future video tutorials?