Some time ago I mentioned that we spent some time making our game pixel perfect. We had to do this in order to have our beautiful 2D pixel art game to look good in any resolution. Disclaimer : All this tutorial is based on several sources but mainly on this great twitter thread. I also know there are other ways to do this probably better and more optimal, but this is the one I am using after a lot of research.

Anti aliasing is used in videogames to smooth texture borders. The bottom line is smoothed and blurry. This will make it look ok if we see it in a smaller resolution than this. In our case we precisely want to have the oposite so we need to deactivate the anti aliasing. It is activated by default in Unity. Be aware that there could be multiple quality levels.

You need to click on each of them and change their Anti Aliasing setting to Disabled in all of them. Again this may be a good idea for other kind of games, but not for pixel art ones. You need to go to each sprite you have in the project and change these settings in the inspector:. Again, this needs to be done for every sprite you have in the game.

You can find this setting also in Sprite Import Settings. It is by default. Change it to your tile size in pixels for example in our case we have 19x19 tiles. Now that we have setted up our PPU, we need to tell the camera how big we want it to be based on that PPU so that one pixel on screen corresponds with one pixel on our game. Once you have that size click in the Main Camera object, and put that value in the Size setting:.

Important to mention that in our case we render everything in a tiny resolution and we scale up later. Do not put the desired vertical resolution in our case p but the one that you are rendering.

unity pixel snap

This is the last step to make it look pixel perfect. There are different methods to avoid this like using an specific 2D camera plugin or shaders. To achieve that you need to move your sprite renderer to a child object and add that script also there. It checks the parent position and rounds it to be on the grid. So no more half pixel movement! With all of these settings your game should look fine by now. I hope this helps somebody else tunning Unity for Pixel Art games.

Humans Ways in Which Machines Learn. The Truth. Get Custom Discounts for Premium Courses. Visit Udemy.

Subscribe to get your daily round-up of top tech stories!The 2D Pixel Perfect package contains the Pixel Perfect Camera component, which ensures your pixel art remains crisp and clear at different resolutions, and stable in motion. You can use the component settings to adjust the definition of the rendered pixel art within the camera viewport, and you can use the Run in Edit Mode feature to preview any changes immediately in the Game view.

Attach the Pixel Perfect Camera component to the main Camera GameObject in the Scene, it is represented by two green bounding boxes centered on the Camera gizmo in the Scene view.

The solid green bounding box shows the visible area in Game view, while the dotted bounding box shows the Reference Resolution. The Reference Resolution is the original resolution your Assets are designed for, its effect on the component's functions is detailed further in the documentation. Before using the component, first ensure your Sprites are prepared correctly for best results with the the following steps.

After importing your textures into the project as Sprites, set all Sprites to the same Pixels Per Unit value. This allows you to set the pivot point's coordinates in pixels, or drag the pivot point around freely in the Sprite Editor and have it automatically snap to pixel corners.

To ensure the pixelated movement of Sprites are consistent with each other, follow the below steps to set the proper snap settings for your project. Unity does not apply Snap settings retroactively.

unity pixel snap

The component's Inspector window. This is the original resolution your Assets are designed for. Scaling up Scenes and Assets from this resolution preserves your pixel art cleanly at higher resolutions. By default, the Scene is rendered at the pixel perfect resolution closest to the full screen resolution.

Enable this option to have the Scene rendered to a temporary texture set as close as possible to the Reference Resolutionwhile maintaining the full screen aspect ratio. This temporary texture is then upscaled to fit the entire screen. The result is unaliased and unrotated pixels, which may be a desirable visual style for certain game projects.

Enable this feature to snap Sprite Renderers to a grid in world space at render-time. The grid size is based on the Assets Pixels Per Unit value. Pixel Snapping prevents subpixel movement and make Sprites appear to move in pixel-by-pixel increments. This does not affect any GameObjects' Transform positions. Crops the viewport along the checked axis with black bars to match the Reference Resolution.

Black bars are added to make the Game view fit the full screen resolution. This is the amount of pixels that make up one unit of the Scene. Enable this property to create a temporary rendered texture of the Scene close-to or at the Reference Resolution, which is then upscaled. Crops the viewport with black bars to match the Reference Resolution along the checked axis. Check X to add horizontal black bars, and Y to add vertical black bars.

For more information and a visual example, refer to the Property Details below. Enable to expand the viewport to fit the screen resolution while maintaining the viewport's aspect ratio.Discussion in ' 2D ' started by gillempDec 18, Search Unity. Log in Create a Unity ID. Unity Forum.

Forums Quick Links. Asset Store Spring Sale starts soon! Unite Now has started! Come level up your Unity skills and knowledge. The best pixel perfect method Discussion in ' 2D ' started by gillempDec 18, Joined: Nov 23, Posts: I've seen at least 3 that seems to work pretty well but I don't know which one is the best in terms of performance and final effect. Last edited by a moderator: Jul 3, Joined: Oct 19, Posts: I wasn't able to look at the videos completely but my way of doing it is having a script on the camera that lets you pick a resolution for example: x, Game Boy resolution and it will automatically display that resolution as big as possible on screen keeping the aspect ratio and only using integer scale values:.

SiegfriedCroesDec 19, RyiahAmon and JoeStrout like this. After some testing the method that gives me less errror and better performance seems to be the seccond one:. SiegfriedCroesDec 26, Joined: Mar 21, Posts: 5, Not quite sure what you are trying to achieve exactly.

A low resolution blocky pixel type of display? That will make absolutely all rendering become blocky, but it could also introduce some cross-pixel bilinear filtering stuff.

You have to also position objects at exact integer coordinates. Joined: Aug 6, Posts: Last edited: Jan 3, Joined: Feb 7, Posts: Eduardo Oriz and Mike GeigMarch 13, Retro games with simple mechanics and pixelated graphics can evoke fond memories for veteran gamers, while also being approachable to younger audiences.

Get our sample project and follow along! Mega Cat Studiosout of Pittsburgh, Pennsylvania, has turned the creation of highly accurate retro games into an art form. So much so, in fact, that several of their titles can also be acquired in cartridge form and played on retro consoles like the Sega Genesis.

Recent additions to the Unity workflows have made it a well-suited environment for creating your retro games. Additionally, you can use the new Pixel Perfect Camera component to achieve consistent pixel-based motion and visuals.

You can even go so far as to use the Post Processing Stack to add all sorts of cool retro screen effects. Before any of this work can be done, however, your assets will need to be imported and set up correctly.

Our assets first need a correct configuration to be crisp and clear. If compression is used, the data of the image will be compressed which results in some loss of accuracy to the original. This is important to note, as it can cause some pixels to change color, possibly resulting in a change to the overall color palette itself. The fewer colors and the smaller your sprite, the greater the visual difference compression causes.

Another thing to be aware of is the Max Size setting for the image in the Inspector. This will usually result in some loss of quality and cause the image to become blurry. Since some hardware will not properly support textures over on either axis, it is a good idea to try to stay within that limit. Above, is a sprite from a spritesheet that was on one axis with max size set at As you can see, increasing the Max Size property to allows the image to be sized appropriately and avoid a loss of quality.

If the sprite were to not pivot from a pixel exactly, we would lose pixel-perfectness.

Pivots can be set for sprites in the Sprite Editor, which can be opened from the Inspector when you have a sprite asset selected.

A pixel-perfect result will look clean and crisp. Select 2D Pixel Perfect from the list on the left, and select install on the top right of the window. To add it, go to your main camera and add the Pixel Perfect Camera component to it. If the Pixel Perfect Camera component option is not there, follow the previously stated instructions to first import it into the project. The component will display helpful messages in the game view explaining if the display is not pixel-perfect at any given resolution.

Now, you can go through each setting to see what they do and how they affect the look of your game! Original not rotated 2. Without Upscale Render Texture rotated 45 degrees, pixel-perfectness is lost as pixel size varies on diagonal edges 3.

With Upscale Render Texture rotated 45 degrees, pixel-perfectness is maintained as all pixels are the same size, but the sprite is less accurate looking compared to the original. Pixel Snapping disabled. With our background at position 0, 0 and our character sprite at 1. Notice how there are some pixels that are only half-covered by the shadow.

Pixel Snapping enabled. Same positions — background 0, 0 and character sprite 1. The pixels snap together perfectly. Character and background blurred from stretch fill.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. The 2D Pixel Perfect package contains the Pixel Perfect Camera component which ensures your pixel art remains crisp and clear at different resolutions, and stable in motion.

It is a single component that makes all the calculations needed to scale the viewport with resolution changes, removing the hassle from the user. The user can adjust the definition of the pixel art rendered within the camera viewport through the component settings, as well preview any changes immediately in Game view by using the Run in Edit Mode feature.

The Pixel Perfect Camera gizmo in the Scene. Attach the Pixel Perfect Camera component to the main Camera GameObject in the Scene, it is represented by two green bounding boxes centered on the Camera gizmo in the Scene view. The solid green bounding box shows the visible area in Game view, while the dotted bounding box shows the Reference Resolution. The Reference Resolution is the original resolution your Assets are designed for, its effect on the component's functions is detailed further in the documentation.

Before using the component, first ensure your Sprites are prepared correctly for best results with the the following steps. After importing your textures into the project as Sprites, set all Sprites to the same Pixels Per Unit value. If Sprite Mode is set to Multiple and there are multiple Sprite elements, then a pivot point must be set for each individual Sprite element.

Under the Sprite settings, select Custom from the Pivot drop-down menu. Then select Pixels from the Pivot Unit Mode drop-down menu. This allows you to input the pivot point's coordinatess in pixels, or drag the pivot point around freely in the Sprite Editor and have it automatically snap to pixel corners. To ensure the pixelated movement of Sprites are consistent with each other, follow the below steps to set the proper snap settings for your project.

Snap settings are not applied retroactively. The component's Inspector window. This value is the amount of pixels that make up one unit of the Scene. This is the original resolution your Assets are designed for. Scaling up Scenes and Assets from this resolution preserves your pixel art cleanly at higher resolutions.

Unity 2D Tutorial: Pixel Perfect Rendering

By default, the Scene is rendered at the pixel perfect resolution closest to the full screen resolution. Enable this option to have the Scene rendered to a temporary texture set as close as possible to the Reference Resolutionwhile maintaining the full screen aspect ratio. This temporary texture is then upscaled to fit the full screen. The result is unaliased and unrotated pixels, which may be a desirable visual style for certain game projects.

Enable this feature to snap Sprite Renderers to a grid in world space at render-time. The grid size is based on the Assets Pixels Per Unit value. Pixel Snapping prevents subpixel movement and make Sprites appear to move in pixel-by-pixel increments. This does not affect any GameObjects' Transform positions.It is a single component that makes all the calculations needed to scale the viewport with resolution changes, removing the hassle from the user.

The solid green bounding box shows the visible area in Game view, while the dotted bounding box shows the Reference Resolution. Before using with the component, first ensure your Sprites are prepared correctly for best results with the the following steps.

The component's Inspector window. Enable to create a temporary rendered texture of the Scene close-to or at the Reference Resolutionwhich is then upscaled. Enable this feature to snap Sprite Renderers to a grid in world space at render-time.

The best pixel perfect method

Stretch Fill available when both X and Y are checked. Enable to expand the viewport to fit the screen resolution while maintaining the viewport's aspect ratio. This value is the amount of pixels that make up one unit of the Scene. This is the original resolution your Assets are designed for.

Making your Pixel Art Game look Pixel Perfect in Unity3D

Scaling up Scenes and Assets from this resolution preserves your pixel art cleanly at higher resolutions. By default, the Scene is rendered at the pixel perfect resolution closest to the full screen resolution. This temporary texture is then upscaled to fit the full screen.

The result is unaliased and unrotated pixels, which may be a desirable visual style for certain game projects. This does not affect any GameObjects' Transform positions. Crops the viewport along the checked axis with black bars to match the Reference Resolution. Black bars are added to make the Game View fit the full screen resoluti on. Enable this to preview Camera setting changes in Edit Mode. This will cause constant changes to the Scene while active. Ratio of the rendered Sprites compared to their original size.

Follow the steps below to correctly set the pivot for a Sprite Open the Sprite Editor for the selected Sprite. If Sprite Mode is set to Multiple and there are multiple Sprite elements, click on each of the elements to select it. The pivot point must be set for each Sprite element individually.

This mode allows you to input pivot positions in pixels, and snaps the pivot point to pixel corners automatically when dragging the pivot into position. Repeat step 4c for each individual Sprite element as needed. Reference Resolution This is the original resolution your Assets are designed for. Upscale Render Texture By default, the Scene is rendered at the pixel perfect resolution closest to the full screen resolution. P ixel Snapping Enable this feature to snap Sprite Renderers to a grid in world space at render-time.

Crop Frame Crops the viewport along the checked axis with black bars to match the Reference Resolution. Current Pixel Ratio Ratio of the rendered Sprites compared to their original size.

unity pixel snap

Asset Pixels Per Unit. Amount of pixels that make up one unit of the Scene. Reference Resolution. Original resolution Assets are designed for. Upscale Render Texture. Crop Frame. Run In Edit Mode.Paul ThamJune 19, Image on the left is rendered on a poorly calibrated camera while the one on the right is properly calibrated.

The secret to making your pixelated game look nice is to ensure that your sprite is rendered on a nice pixel boundary. In other words, ensure that each pixel of your sprite is rendered on one screen pixel or any other round number. To apply this on an actual project requires a bit more considerations and planning ahead.

Changing the orthographic size will have the effect of increasing or decreasing the visible world space. This impacts your game code directly and need to be accounted for. There are three well known techniques to handle the scaling and it is quite plausible that you will employ all three in your project. The overall screen size grows but the art size stays the same. However, when the screen increases beyond a certain size, a thick border will no longer be practical.

If you start out with a reference screen height of and PPU of 32, going to is going to be troublesome as your assets will not scale nicely. The table above illustrates scaling a game starting from all to way to with three alternatives on how to deal with The most interesting number to look at is the orthographic size.

The ideal situation is that as your screen size grows, the orthographic size remains the same. This will ensure that your assets will take up the same amount of screen space as they do with your reference resolution.

This could be easily dealt with using the thick border approach. Notice the terrible looking PPU 32 sprites on the left. Color shifted on the right to clearly show swapped asset variants. Swapping the sprite assets can be easily done at runtime using AssetBundle Variants. See a demo here. If your screen grows big enough, we could display your sprites at 2x by applying a scaling factor to the calculation of the orthographic size. This means, each world space units will contain 64 screen pixels.

This effectively tells the engine to render 32 pixels from the sprite onto 64 pixels on screen. This only works for whole number enlargement.

PixelPerfect component. Check out a demo project that demonstrates this approach. Making pixel perfect 2D games is possible with the current version of Unity.

However, as detailed above, there are consequences and known issues, but they are not insurmountable nor are they blockers.

Long live retro style games! Instead of the standard rotation of Unity2D, Pixel Art Rotation rotates the sprites pixel by pixel, letting you create a perfect retro style looking game. You can also rotate your animated sprites. This works at the camera level, basically making the game render to a fixed resolution no matter the aspect ratio, actual screen resolution or screen size.

Also this looks better the smaller your game resolution is compared to the actual screen, and if they are a multiple of each other since that will make all game pixels have the same size which is just a limitation of the math involved, really.

Damn HTML formatting.


thoughts on “Unity pixel snap

Leave a Reply

Your email address will not be published. Required fields are marked *