[{"data":1,"prerenderedAt":370},["ShallowReactive",2],{"tutorial-2022-09-unity-pixel-perfect":3},{"tutorial":4,"series":350,"author":358},{"id":5,"title":6,"author":7,"body":8,"category":339,"cover":340,"date":343,"description":344,"extension":345,"meta":346,"navigation":347,"path":348,"seo":349,"series":350,"stem":351,"tags":352,"youtube":355,"youtubeRange":350,"__hash__":356,"slug":357},"posts\u002Fposts\u002F2022\u002F09\u002Funity-pixel-perfect.md","Unity Pixel Perfect","danielle",{"type":9,"value":10,"toc":328},"minimark",[11,25,30,34,45,51,56,61,92,96,103,116,119,123,126,136,151,158,163,170,182,185,190,200,204,210,219,223,227,249,252,256,261,279,284,289,307,312],[12,13,14,15,19,20,24],"p",{},"When we create a ",[16,17,18],"strong",{},"Pixel Art game",", we want our games’ visuals to remain crisp and sharp at all times. For that, Unity has the ",[21,22,23],"em",{},"Pixel Perfect package",".",[26,27],"article-download",{"href":28,"title":29},"https:\u002F\u002Fgithub.com\u002Fnotslot\u002Fguide-pixel-perfect\u002Freleases\u002Fdownload\u002Fv1\u002FPixel.Perfect.CS.zip","Download with C# Code",[26,31],{"href":32,"title":33},"https:\u002F\u002Fgithub.com\u002Fnotslot\u002Fguide-pixel-perfect\u002Freleases\u002Fdownload\u002Fv1\u002FPixel.Perfect.VS.zip","Download with Visual Scripting",[12,35,36,37,40,41,44],{},"Let’s take a look below at this pixel-art-styled platformer game.",[38,39],"br",{},"\nWe can notice it has some issues we should tackle, mainly blurry sprites and misalignment with the grid. The solutions are straightforward, but there are a few secrets we ",[16,42,43],{},"must"," nail to achieve our desired style.",[46,47,50],"article-image",{"src":48,"alt":49},"\u002Fposts\u002F2022\u002F09-19\u002Fpixel-perfect-1.jpg","Blurry pixel art game","\nBlurry pixel art game.\n",[52,53,55],"h2",{"id":54},"texture-settings","Texture Settings",[12,57,58,59],{},"We start with 3 modifications to the texture assets to ensure precise rendering.",[38,60],{},[62,63,64,72,85],"ol",{},[65,66,67,68,71],"li",{},"All textures should share the same ",[21,69,70],{},"Pixels Per Unit"," value; it determines how many pixels fit inside a single grid unit.",[65,73,74,75,78,79,82,83],{},"We also set the ",[21,76,77],{},"Filter Mode"," to ",[21,80,81],{},"Point",", making our texture crisp at any scale.",[38,84],{},[65,86,87,88,91],{},"Finally, we disable the ",[21,89,90],{},"Compression"," since we want to maintain color accuracy.",[46,93,50],{"src":94,"alt":95},"\u002Fposts\u002F2022\u002F09-19\u002Fpixel-perfect-2.jpg","Pixel perfect texture settings",[12,97,98,99,102],{},"The textures in the project are smaller than 2048 pixels. If you have larger textures, you need to set the ",[21,100,101],{},"Max Size"," to 4096 or greater to prevent blurry downscaling.",[12,104,105],{},[21,106,107,108,115],{},"It’s a fantastic time to thank ",[109,110,114],"a",{"href":111,"rel":112},"https:\u002F\u002Fpixelfrog-assets.itch.io\u002Fkings-and-pigs",[113],"nofollow","Pixel Frog"," for the beautiful art.",[117,118],"article-assets",{},[52,120,122],{"id":121},"pixel-perfect-camera","Pixel Perfect Camera",[12,124,125],{},"Once we have finished adjusting the objects, let’s make sure our assets remain stable during motion and stay sharp in different resolutions.",[12,127,128,129,131,132,135],{},"We add to our camera the ",[21,130,122],{}," component. If you can’t find it, ensure the ",[21,133,134],{},"2D Pixel Perfect"," package is installed.",[12,137,138,139,142,143,146,147,150],{},"First, we match the ",[21,140,141],{},"Assets Pixels Per Unit"," to our textures’ ",[21,144,145],{},"Pixel Per Unit",". We also activate ",[21,148,149],{},"Run In Edit Mode"," to immediately see the component effect without running the game.",[12,152,153,154,157],{},"At the ",[21,155,156],{},"Reference Resolution",", set the resolution the assets are designed for. For a retro look, it’s probably a tiny resolution.",[46,159,162],{"src":160,"alt":161},"\u002Fposts\u002F2022\u002F09-19\u002Fpixel-perfect-3.jpg","Pixel Perfect Camera component","\nPixel Perfect Camera component.\n",[12,164,165,166,169],{},"When it comes to the ",[21,167,168],{},"Upscale Render Texture",", we have two paths to choose from:",[171,172,173,176],"ul",{},[65,174,175],{},"Without this configuration, Unity will render the scene in a larger resolution near our screen’s resolution.",[65,177,178,179,181],{},"If we enable upscaling, Unity will first render the scene at the small ",[21,180,156],{},", and only then it will upscale it.",[12,183,184],{},"In practice, it determines whether or not lines should adhere to the smaller reference grid or the larger screen’s grid.",[186,187,189],"article-giphy",{"gif":188},"fZQKTIqJKbAedhXoFW","\nUpscale Render Texture.\n",[12,191,192,193,195,196,199],{},"When we prefer to not use the ",[21,194,168],{},", we can still maintain integrity between all sprites and the pixel grid by enabling ",[21,197,198],{},"Pixel Snapping",". While the objects themself will move in the world smoothly, the sprites will be rendered precisely with the grid.",[186,201,203],{"gif":202},"6gDC8zzCYTMMtbpUdM","\nPixel Snapping (Off vs. On)\n",[12,205,206,207,209],{},"Both Pixel Snapping and ",[21,208,168],{}," depends on your game’s style requirements. For example, Celeste’s character snaps to the grid.",[12,211,212,213,216,217,24],{},"We can also use ",[21,214,215],{},"Crop Frame"," – it will hide parts of the screen to match the ",[21,218,156],{},[46,220,222],{"src":221,"alt":215},"\u002Fposts\u002F2022\u002F09-19\u002Fpixel-perfect-4.jpg","\nCrop Frame.\n",[52,224,226],{"id":225},"cinemachine-integration","Cinemachine Integration",[12,228,229,230,233,234,237,238,241,242,244,245,248],{},"We can add Cinemachine to this level, but when using the ",[21,231,232],{},"Cinemachine package",", its ",[21,235,236],{},"Camera Brain"," and the ",[21,239,240],{},"Pixel Perfect"," components fight over controlling the camera’s orthographic size.",[38,243],{},"\nUsing retro-style visuals doesn’t mean we need to give up on Cinemachine. By adding a ",[21,246,247],{},"CinemachinePixelPerfect"," extension to the Virtual Camera component, we can still enjoy the benefits of both.",[250,251],"article-affiliate-group",{},[52,253,255],{"id":254},"grid-snapping","Grid Snapping",[12,257,258,259,24],{},"Lastly, we have some rebellious objects we should align with the grid. We can try to align them manually, but if we want the pixels to be on the spot, we will need to use ",[21,260,255],{},[12,262,263,264,267,268,271,272,275,276,278],{},"To activate auto-snapping, we use the ",[21,265,266],{},"Move"," tool, set the ",[21,269,270],{},"Tool Settings"," overlay to ",[21,273,274],{},"Global",", and click on the grid snapping icon.",[38,277],{},"\nThe object snaps incorrectly, so we will need to change its pivot position.",[46,280,283],{"src":281,"alt":282},"\u002Fposts\u002F2022\u002F09-19\u002Fpixel-perfect-5.jpg","Pixel perfect object snapping","\nPixel perfect object snapping.\n",[285,286,288],"h3",{"id":287},"pivot-point","Pivot Point",[12,290,291,292,295,296,299,300,78,303,306],{},"In the ",[21,293,294],{},"Sprite Editor"," window, we set the pivot position to ",[21,297,298],{},"Bottom Center"," and set the ",[21,301,302],{},"Pivot Unit Mode",[21,304,305],{},"Pixels",". This will set the Pivot position in pixels and snap it to the pixel corners.",[46,308,311],{"src":309,"alt":310},"\u002Fposts\u002F2022\u002F09-19\u002Fpixel-perfect-6.jpg","Pixel perfect grid settings","\nPixel perfect grid settings.\n",[12,313,314,315,271,317,320,321,78,324,24],{},"At the scene, we set the ",[21,316,270],{},[21,318,319],{},"Pivot",", and now it snaps perfectly. We can even take it further by setting the ",[21,322,323],{},"Grid Size",[325,326,327],"code",{},"0.5",{"title":329,"searchDepth":330,"depth":330,"links":331},"",3,[332,334,335,336],{"id":54,"depth":333,"text":55},2,{"id":121,"depth":333,"text":122},{"id":225,"depth":333,"text":226},{"id":254,"depth":333,"text":255,"children":337},[338],{"id":287,"depth":330,"text":288},"tutorial",{"480w":341,"960w":342},"\u002Fposts\u002F2022\u002F09-19\u002Funity-pixel-perfect-480w.jpg","\u002Fposts\u002F2022\u002F09-19\u002Funity-pixel-perfect-960w.jpg","2022-09-19","Create crisp, sharp and perfect pixel art game in Unity 2D. Tutorial with all the secrets for setting up pixel perfect art: package installation, textures configuration, Cinemachine camera, and more...","md",{},true,"\u002Fposts\u002F2022\u002F09\u002Funity-pixel-perfect",{"title":6,"description":344},null,"posts\u002F2022\u002F09\u002Funity-pixel-perfect",[353,354],"unity","2d","5jbgT25fc-0","2guLJggk2rU5VlLyrkQNdHOkd3_IYXfPptG756bOBd8","unity-pixel-perfect",{"id":359,"authorPage":347,"extension":360,"meta":361,"name":362,"social":363,"stem":368,"__hash__":369},"team\u002Fteam\u002Fdanielle.yaml","yaml",{},"Danielle Elias",{"twitter":364,"instagram":365,"linkedin":366,"website":367},"ddanielleelias","https:\u002F\u002Fwww.instagram.com\u002Fdanielle_elias_","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fdanielle-elias-847a1816a","https:\u002F\u002Fwww.danielleelias.com","team\u002Fdanielle","P4cpTrFv0g83_T48iFqh7voUrrlvEAlt5tc_ZtZvusk",1790297819936]