Pixel art is a very popular visual style for games, but displaying it correctly in a modern game engine is quite difficult. The look can fall apart aesthetically if not rendered the right way. I want everyone’s pixel art to display beautifully, so I’m releasing a free Unity Pixel Art camera that solves this problem elegantly.
For an example of my tool in practice, check out my recently released “GirlJail” jam game. This is a good demo showcasing the production reliability of this approach across iOS, Android, PC, Mac and Linux.
At the moment the common approaches to pixel art in Unity are based on just setting your camera’s size in perfect ratio with your art’s pixel size, then setting point filtering on every texture and hoping for the best. This is woefully inadequate for maintaining consistency and displaying pixel art well.
History
As per the name, pixel art came about because every individual pixel a low resolution screen displayed was carefully decided and hand drawn. On modern high resolution displays it is not practical to draw every single pixel. We need to come up with new methods of displaying pixel art that preserve it as a style, while keeping it a viable low-cost choice.
Key Goals
To render pixel art correctly in our modern 3D-based game engine, there are a number of principles a Unity pixel art camera should follow:
Display sprites without distortion
Simply enough, when we display a sprite, it shouldn’t be stretched or distorted. Most existing solutions focus on addressing this, but don’t try to solve any of the following points.
Enforce a consistent pixel size
Failing to abide by this rule is by far the most common mistake visible in modern pixel art games. All pixels should be the same size. This consistency lets players eyes process the image comfortably, allowing sharp edges to not disrupt the experience.
Conform to a pixel grid
Related to the consistent pixel size, pixels should all align to the grid, a pixel should never be able to half overlap another pixel. Either it occupies the whole pixel space or it doesn’t. If there isn’t a consistent grid, the visual result is inconsistent pixel sizes, even if your images maintain correct scale.
Pixels are the atoms of your game universe, they are quantised and it’s safest not to split them.
Retain position stability while the camera moves
The position of objects in the world should not be affected by the movement of the camera. In the warning example above, look at the shadow under the character or the fence relative to the dirt path; observe that as the camera moves, the sprites jitter out from their expected position.
Fill the screen in a predictable way
When designing the screen composition of your game, you want a high degree of certainty about what will and will not be displayed on screen. You want to choose the resolution that works best for the experience you want to provide. Many Unity pixel art camera approaches prioritise multiplying pixels by integer values, resulting in a completely unpredictable composition based on the resolution of the screen.
So a larger or smaller resolution screen should still display the same composition, and a change in aspect ratio should add as few pixels as possible onto our design.
Avoid floating point precision errors
We want our pixel art to always display consistently, however because we’re not working in an old school 2D integer space, our viewport is all based on imprecise floating-point maths. Even if we carefully round our sprite positions, distortion can still occur when sprites are placed on certain pixel boundaries, it is critical to be aware of this and prevent it.
The Solution
So how do we create such a consistent display of pixel art while also scaling to any resolution or aspect ratio?
Simply by rendering at the true designed resolution of our game, then scaling twice.
- First we set up an internal texture of the ideal pixel resolution. The size of this is determined by an input target resolution, with pixels added on either the width or height to accommodate the screen’s aspect ratio difference, if any. The whole scene is rendered to this small texture. This step automatically eliminates any possibility of broken pixel grids, or inconsistent pixel sizes, because it is impossible to draw to anything smaller than a pixel.
- Secondly we want to scale to any possible percentage, but scaling pixel art by non-integer values often leads to obvious distortion, or blurriness. To solve this problem as a first step we scale by integer values, using point filtering up to the first resolution larger than our screen resolution.
- Finally, we scale this large texture back down to our destination screen resolution using bilinear filtering.
Update (April 2018): In version 2 of this package, I achieve the upscaling/downscaling effect in a single step via a bilinear-upscale shader, which looks almost identical but saves a significant amount of memory and GPU time on high resolution devices.
The result preserves the clean pixel look, while allowing us to target any resolution or aspect ratio we want. This has the side-effect of introducing some interpolated pixels at pixel grid boundaries, but with the high DPI of modern screens, it is not a visible issue. Take this image as an example (your browser will apply bilinear downsampling to it as it displays):
But we’re not done yet, we still need to prevent sprite distortion and keep positional stability etc. The other major part required for this is a sprite shader to keep all the textures drawing at precise pixel positions. Inside this shader:
- the first step is to effectively align the camera to a pixel position, so all vertices are offset by the position difference of the camera to the nearest pixel. This is the key to ensuring stability.
- Then they are snapped to the nearest pixel in viewport space, so boundaries will sit on pixel edges and draw without distortion.
- And finally offset by half a pixel if there is an odd-numbered pixel resolution as viewport space is always aligned to the centre.
Download
You can get the Unity Pixel Art Camera including an example scene from github, or download the unitypackage.
It requires a minimum Unity version of 2017.2. If you’ve tested it and it functions as you want, but you need it to work on an older version, let me know and I might invest some time in making it backwards compatible.
If you end up using this, I’d love to hear about your game (and if you’re nice I always appreciate a credit!)
Setup
It’s super easy to get started:
- Put the PixelArtCamera component anywhere in your scene (I recommend on your camera)
- Connect the Camera and Canvas in the appropriate fields if they’re not automatically filled in.
- Set the resolution on the PixelArtCamera component to your preference (and match the Pixels Per Unit to your texture imports, if you haven’t left it on the default ‘100’.)
- Put a material using the ‘Ocias/Pixel Art Sprite’ shader on your sprites.
That’s it!
A Personal Recommendation
A major point of contention in pixel art display is the choice of displaying pixel art with hard edges or smoothly interpolated. Generally the consensus has been on hard edges, despite the fact that pixel art at native resolution is realistically not as sharp. Why is this? We know sharpness is not authentic, and possibly not even optimal, but on some level we just feel smooth pixel art looks “wrong”. I propose there a very simple reason for this. We dislike pixel art when interpolated due to incorrect gamma color blending.
Consider these three images:
- a gamma blended image
- a photo of native 1 to 1 pixel display of the scene on my monitor
- and a linearly blended image:
It is completely clear how far away the gamma blended version is from the ground truth. Black lines become much thicker, characters especially appear less pleasant to look at. When blended correctly – linearly – pixel art captures the same warm feeling we like from native display.
My recommendation: For your next game consider setting your color space to linear, and your pixel art camera to “smooth”. It’s actually more authentic and, in my view, more pleasant to look at than sharp pixels.
this is what im looking for ^^ …. thanks for sharing! really helpful
It’s frustrating that Unity doesn’t come with something like this out of the box. For an engine that’s so popular for indies, it’s crazy how making a clean looking pixel art game that scales well isn’t immediately intuitive.
Amazing asset… Thank your for make this
Alex,
I’m trying to use these scripts and they seem to work pretty well, however I noticed that changing scenes seems to somehow break the script. If I load a scene directly in unity it looks great. However, if I load the scene from another scene, then the pixels are different sizes.
Hmm, unfortunately I’ve not been able to reproduce your scene loading problem. Do you have a simple repro project you could send me?
This is a fantastic tool. I was using another setup like the common approach you described, and it was leading to a lot of code for handling specific cases in order to keep things looking right.
While setting this up, I encountered an issue with the clarity of the resulting texture. My sprites were originally set to 16 ppu, and while at that setting, there seems to be quite a bit of blurriness. If I increase it to, say, 100 ppu, that is resolved. I assume this issue is due to the pixel interpolation at grid boundaries that you described. Is there any way to mitigate this problem for lower ppu values?
Thanks Oak! The PPU should have no relation to blurriness when set correctly, it’s just for making your unit scale correct. When you set the PPU, you need to make sure all your images have that PPU value in their import settings AND the pixel art camera script has that same PPU set. The pixel-boundary blur should be very minor, and not noticeable at native resolution.
Hello Alex, I use your script but i have a problem, in my canvas have a button with OnDrag Event, when i Drag the button, this “Disappear” moving in others positions x, y , z very far from the canvas, I try in other scenes without your scripts and works, i need to solved this, Thanks
public void OnDrag(PointerEventData eventData)
{
transform.position = Input.mousePosition;
}
Hey Erick, when setting the position of an object on a canvas it’s always safest to explicitly convert from screen space to canvas space, and since my system puts the canvas in camera render mode with canvas scaler settings, you must do this to get the correct position. The fastest way to fix your problem is to just set your transform to local space, then divide by the canvas’s scalefactor (and adjust 0 being the centre of the canvas):
public void OnDrag(PointerEventData eventData) {transform.localPosition = (Input.mousePosition - new Vector3(Screen.width / 2, Screen.height / 2)) / GameObject.Find("Canvas").GetComponent<Canvas>().scaleFactor;
}
For a more thorough solution, use the RectTransformUtility class’s functions.
Hey Alex, I really love this Asset it’s wonderful! I did run into a problem when it came using sprite masks. Sprites masks seem to not be rendered in the scene and I was curious if you knew a solution or if this was just a problem on my end. Thank you very much for this great asset!
Hi Gavin, yep, I’ve fixed that right up for you, download the new package and enable the new “Require Stencil Buffer” checkbox to get your sprite masks working (turns out rendertextures don’t enable them by default.)
Awesome thank you so much!!!
When I tried this script I get an error about the vector2Int namepsace.
Hi Ernie, the script requires Unity 2017.2 or newer, does your project meet that requirement?
Hey I’m curious about a few things. Sorry if these are really dumb questions I’m still new and don’t understand that much. When setting the “Target pixel dimensions” and “Pixels per unit” I assume these need to be set to the resolution at which the project is being made (1920×1080 in my case) and the ppu of the sprites used (16 in my case). When running the game in a higher resolution things seem to work fine, but when I set the resolution of the game to something lower like 1280×720 all the assets are no longer pixel perfect. Spacing of UI elements seems to break too? I have applied all the correct materials to everything in the scenes but perhaps there is something else I have overlooked? Thanks in advance.
Hey Ser Oleg, the target pixel dimensions are for the internal resolution you render/design at, not the final screen resolution, everything is drawn at those dimensions then scaled up appropriately, that’s you’re seeing that result. See the included example scene for reference.
This is a tool for rendering traditional low resolution pixel art games, if you’re working with assets created at 1920×1080 and just want them 1-to-1 physical-pixel-aligned, you can just configure a few built-in settings instead to achieve that, check the instructions on the Unity blog.
Hey Alex! Awesome article! It’s very informative but I still don’t get many aspects of the pixel-art approach. According to your latest comment: What do you mean by “internal resolution you render/design at”?
Basically, my problem is… How do I start a pixel-art game project? What decision should I make at the beginning to not screw things up?
I’d love to hear an answer from you. Have a great day!
Hi Jacob, don’t worry too much about screwing things up, the best and normal way to learn is to make mistakes.
That said, the key to understand is that it’s about having an internally consistent universe of pixels.
When making a pixel-art game, think about it like you were making a Gameboy Advance game. A GBA screen is 240x160px, so you design your screen composition, do your mock-ups and draw your sprites etc for that resolution. So broadly, early on you want to pick a resolution for your game. Generally the lower you go, the better, especially for projects that you’re doing solo or on a small team (going above SNES resolution, 256×224, gets pretty time consuming). This tool will then take your low-resolution pixel art and make sure that 240×160 or whatever resolution style you’re creating will display the same whether it’s on a 1920×1080 screen or 2880×1440 screen or anything else.
If you’re starting out, it may help to visit Pixeljoint and Pixelation to get familiar with some principles of the artform.
Thank you very much for your answer! I think you’re clarifying things up for me. I’ll check out those communities to gather more knowledge in this topic. Have a nice day!
Hey, Awesome tool. I ran into a problem though.
After launching the sample scene, I changed color from gamma to linear as you suggested, after a little while (after playing the game once? or resizing the viewport…) the game screen gets really washed out. After a while other unity windows (like scene) also look bleached. The problem is resolved on swithcing back to gamma color space. Any idea whats going on?
If you’re getting changes in colour in linear space other than in blended areas, it usually means you’re running into bugs in the Unity editor. I’ve also run into the problem of UI etc also get transformed to linear colour in my non-pixel-art projects. Unfortunately this is probably not something that my tool is causing, so I can’t fix it for you. Try restarting Unity, building your game and check if it renders as expected there, and maybe try a different Unity version if this is a critical issue for you.
Thanks, it seems on further investigation you are probably right. I always hate bugs that can’t be fixed because they aren’t your fault, haha.
Thank you for solving my last issue! I’m also curious what licence this falls under?
It’s a “Do whatever you want, I’m not a cop” license. (Though I do like it when people credit me when they use it)
Of course! I’ve made sure to credit it “Alex Ocias’s Pixel Camera” in all of my games that I’ve used it in! Do you have another preference to how you wanna be credited?
Thanks! It’s all good, I’m not fussy.
Hello,,, im using your great assets for my last project,, thanks ^^ … but now im using canvas on diffrent HUD scene (embed scene) … it seems doesnt work as expected… should i use pixel art script on both scene?
scene 1 has main camera
scene 2 has canvas
Hi Wednesday, for now, just temporarily set up a canvas in scene 1, let the pixel art camera configure the settings of the canvas scaler, then copy the values onto the canvas in scene 2. Alternatively plug in the canvas to the pixel art camera when scene 2 loads.
I’ll look into changing the way canvas setup works to make this less of a workaround in the future.
I followed your steps and everything seems to work well, save for one issue: my sprites constantly jitter out from their positions during camera movement, just as you’ve demonstrated in one of your goals. How can I prevent this? I currently am working with a PPU of 16 and have my camera attached to my player, who moves along a grid similar to Pokemon.
Hi Alex, are you using the latest version from GitHub? I recently committed a fix for some camera-related jittering edge cases.
Downloading the latest version fixed the jittering for my player, but the issue persisted for other sprites that did not move with the camera. Then I realized I forgot to apply PixelArtSprite to my tilemaps. Doing this fixed the remaining jittering up. Thank you so much!
I just can’t seem to get it to work, in the example scene it works fine. I can drop my own sprite in and everything works great, but when I try using it in my own scene it doesn’t work, I add the pixel art camera component, add the canvas and camera to it then I add the shader to my sprite but nothing really happens. I noticed that in the example scene, pixel resolution, upscaled resolution and pixel scale all change whenever I change the screen size but in my own scene they stay the default and never change. Upscaled resolution actually sits at 0x0, I’m not sure what I’m doing wrong…
Hey Ocias! excellent asset, I’m working on achieving perfection and I have some doubts regards your asset.
How do I set my UI not blurry? I can sense some pixel-blurryness even tho I followed every step and I have example scene, I can’t even replicate your HUD in your own example scene. Maybe I’m missing something? thanks in advance!
I mean in my own example scene* I would just like to achieve more sharpness in my UI.
Hi Ezekiel, sounds like an unusual problem… Can you double check that you’ve got your reference-resolution and pixels-per-unit set up appropriately? What values are you using?
Hi Jes, I think I know what you’re running into. There’s a special PixelArtUI shader/material included to help with this problem, are you using it on your UI elements?
Hello. I just discovered this asset, and it’s quite impressive! I’ve spent a lot of time on this problem without getting good results.
I wanted to ask about the PixelArtDiffuse shader and its usage. Specifically, I’m looking for a substitute for Unity’s Sprites/Diffuse shader that works with this pixel art camera. PixelArtDiffuse appears to be designed for non-sprites since it includes a texture field and is used on a cube in your example scene. If I try creating a material with PixelArtDiffuse and assigning it to a sprite, the transparent sections of the sprite are rendered as black. I did try using the standard Sprites/Diffuse shader, and even though I didn’t notice any immediate problems I’m assuming this isn’t a good solution due to the precision issues you mentioned.
Is there a proper way to use PixelArtDiffuse with sprites as a substitute for Sprites/Diffuse, or is this functionality not supported? Anyway, thanks for making such a useful asset package available!
Hi Kevin, thanks! I’ve just added a new shader to handle that for you, grab the latest version from GitHub and use the “PixelArtSpriteDiffuse” material.
Wow, thanks for such a quick response! I tried PixelArtSpriteDiffuse on a few different objects (with a light in the scene), but the sprite disappears completely with that material (it’s fine with the others). I’ve checked alpha settings on both the sprite and the material and they are both at 255. Any ideas?
I’m not sure what would be causing that for you (got a Pixel Art Camera script active on your Camera, right?). If you’re still running into the problem, send me a repro project.
https://www.dropbox.com/s/0xxh4mxzy9r722m/PixelCameraDiffuseTest.zip?dl=1
Still having the issue. In this project folder, I took your example build and added PixelArtSpriteDiffuse to several objects in the example scene, including the two characters. If this is a system dependent problem, it might not be noticeable on your end, but I included a screenshot in the top level folder called “DiffuseScreenshot.png” that shows how it looks on my end. I’m on Unity 2018.1.0f2 on Windows 10 in case that matters. Thanks for the help!
It appears you’re not using all the latest files, so the shader isn’t getting the values its needs from the script. Try updating to the latest version from Github again, and make sure the full directory is updated.
Ah, I could have sworn I replaced the whole thing, but apparently not. Works perfectly now. Thanks so much!
Hello Alex, Thanks for quick response! I’m using PixeArtFont Material, just like your example. Canvas is like the script set it so I don’t see what I’m doing wrong, I’ll let a screenshot about my result here: http://prntscr.com/jqodsh
(I’m having this issue with fonts and texts)
Ah I see Jes, there’s something strange going on there. First download the latest version of the Pixel Art Camera if you’re not already on it, and if this persists, please send me a repro project.
Sorry for taking so long Alex, just updated and I know I must be doing something wrong, maybe you can help me more by looking at my example project test. https://www.dropbox.com/s/vh6mxuo2wyq6dz2/PixelTest-Camera.rar?dl=0
I see the problem Jes, you’ve got some broken values in your Camera’s Viewport Rect setting. Set them back to 0, 0, 1, 1 and everything will render correctly.
Thank you so much, got it, you’re right, I was trying to do some letterboxing so no matter what resolution the game is rendered, you can always see the same thing, but I haven’t got lucky trying with one of my codes here: https://gist.github.com/oultrox/babb76d5f2a507dd14870a446e07c575.
Reference of my trying and failing haha: http://prntscr.com/jr6uw5
Have you done anything like this before? maybe I’m missing something up again? how would you achieve this? I believe it’s the only thing missing for me to consider this framework perfect for me at least.
Again, thank you for your help Alex. It’s hugely appreciated.
I’m working on built-in Windowboxing (you can see it’s commented out in the script); there’s a really simple way to achieve it in the meantime: just add a panel to your canvas that’s the same width and height as your target resolution (no stretching settings), then put big black rectangles attached to its outer edges. This way you can also use fancy frame graphics if you need to.
Alright, thank you, that’s actually a nice idea I’ve actually used in some engine called Construct 2. Thanks for letting me know you’re working on it. I’ll let you know if it works~ thanks!
One question When i build my game and install it in my android phone why do the colors of my sprites look more darker then in unity
Hi Rohan, it’s tough to say without knowing the specifics. The screen gamma of your monitor may be different than your phone, or it may be a gamut issue, or something else entirely. My suggestion is to take a screenshot of the game in both circumstances to compare on the same screen. You can email me that and any other details you have and I may be able to help investigate.
Hi, I found your wonderful script a few weeks ago and it solved so many issues i can’t even thank you enough. 🙂
However, I’ve noticed that the unity post processing stack v2 doesn’t work when your script is active. Is there any way to get it working or is the issue on my side?
Hi John, I’ve seen someone else report to Unity that their PP stack doesn’t work my camera, I’m not familiar with the specifics of that package though. My recommendation is to try use what you need from the legacy image effects package.
Incase anyone has the same issue with blurred images on scaled resolutions, check to see if you have HDR enabled on the camera, spent hours trying to fix the issue both in editor and code only to discover that I had missed the fact that HDR was causing this.
This is a incredible asset. Thank you very much! I’ve noticed that unity’s post processing stack doesn’t work with it, is there any chance you’ll add support for this?
Unfortunately probably not, Crossfire. I’m not familiar with the details of how the post processing stack is programmed and I don’t really use Unity anymore.
Hi, first of all I’d like to say this is an amazing asset, the best by far out of all the Unity pixel perfect solutions I’ve found.
However I’m having a big issue that I haven’t been able to fix so far. You can see it in this video https://streamable.com/sj4a6 . You can see, especially on the piano keys, that there is a very annoying jittering, with pixels that seem to be jumping around while the object is moving.
The weird thing is that the effect is much more noticeable in the game window, especially for the moon ground. I can’t see it as much in the video, but it’s there nontheless.
I did the full setup you reccomend,using the latest Github version, do you have any ideas about what I could be doing wrong, or point me in the right direction? My assets have a ppu of 10, with a reference resolution of 240×135. Thanks!
Thanks Luca! The jittering you’re encountering there is a tough problem. As you can see by going over the individual frames of the video, it’s not that the keys pixels are actually moving, but rather it is an optical illusion caused by the relative motion timing of the background etc. In my experience, this is caused by objects moving on alternating frames, which in turn is a result of working with floating-point positions.
To cut straight to the solutions, my main recommendation is to find a way to avoid dealing with it, and play with the velocity of your objects until the effect is minimised.
Secondly, there may indeed by some error at play, as you say the effect is less pronounced in a build, so it may be worth stepping through frame-by frame in Unity and seeing if some behaviour is unpredictable.
Finally, the comprehensive solution requires thinking in the old-fashion way, and work in terms of pixels/units (and acculumators instead of deltatime). Find a way to quantise your motion so all objects move a completely predictable pixel-based distance per frame.
An example of this I always like to think of is character movement in A Link to the Past. Orthogonal walking moves 1 pixel on even frames, 2 pixels on odd frames, and diagonal walking moves 1 pixel on each axis. Applying this kind of logic to your whole game is a big job, but one way to comprehensively remove jittery motion.
Thanks for your super fast answer! Just to make sure I understand, you’re saying that ( in my example ) the piano and the ground move at different frames even if they have the same speed? And I assume this happens because the position is saved a floating point number, which means that a “step” where the motion actually happens ( 0.1 units in my case , since I have a ppu of 10 ) can happen at different frames for different objects.
The solution to this would be to create a system that forces objects to be in sync, ie objects with the same speed should always move on the same frame. Please correct me if I’m wrong.
You’re thinking in the right area, yeah. Same-speed jitter can happen like you describe, but generally isn’t an issue. I believe the effect in your example may be caused by the relative velocities of the objects moving by different amounts per frame, as well as on different frames (exacerbated by deltaTime instability).
The solution is to make everything move a *reliable* distance per frame (which in turn will mostly sync up motion anyway).
The first step either way is to confirm the theory: make the background move exactly 2px per update, and the piano move exactly 1px per update, and see if the optical illusion of the shifting keys goes away. (it may just be an illusion from black/white colours next to each other instead!)
Amazing ✨ thank you ~ ❃ ^^
Please could you help me? I´m having some problems. I downloaded the unitypackage version (not github). Everything works as it should except when I build my game for Android. Game works but the screen is glitchy. Is this version compatible with newest unity version?
I don’t use Unity anymore, so I don’t keep up to date with it, but I don’t see any reason why it wouldn’t work in newer versions, is there an error being output?
Hi!
Does this package work with UI at different resolutions, meaning that it doesn’t stretch the images?
This tool enforces a consistent internal pixel size, so no matter what you change the resolution to, the UI will stay the same internal pixel size size and won’t stretch.
Hi again.
I’ve tried the package and makes the UI pixel perfect, without any distortion. Before find this article I was using instead the pixel perfect camera made by Unity, but it doesn’t work well with UI.
A last question. I’ve looked from near and noticed that between pixels there are sub pixels. Everything looks perfect, but wanted to know about this. Sorry for this english.
Also, I’m making a game and if I’ll managed to end it, I’ll put you in the credits. Thanks a lot.
Great, and don’t worry about the interpolated physical pixels, they are intentional, the only thing that matters is the perceptual result.
Hi, the package works great whenever the scale of the sprites is set to (1,1). However, as soon as I change the scale the sprites become very distorted and don’t render properly. Do you have any idea what could cause this or how to fix it?
Thanks.
This tool is designed to display pixel art correctly, with uniform pixel sizes. If you want sprites to use various scales and pixel sizes, you will need to find a different solution.
Hi again (again).
So, I’ve found the reason of why it wasn’t pixel perfect. Basically in the Pixel Art Camera script if the upscale shader bool was set true, the filter mode is set to Bilinear, so yea, now it’s perfect.
Just wanted to say thank you. I’ve been working on my own solution for some time but could never get the canvas part right. Unity’s offering is still not there yet, so you have come to the rescue.
Glad it’s helpful, Hawken! 🙂
Actual question though when I move the camera in a diagonal position it makes everything look like it’s shaking, I have all the right materials on everything
Last question for font it’s super blurry if I use TextMeshPro even if I change the material to Pixel Art Text and if I use normal font it looks weird still as well. Using normal text it looks like this: https://imgur.com/a/tLE5Xru comparison here
In terms of things looking like they’re “shaking”, assuming they’re moving in unison, this is may just be a trait of correctly rendered pixel art, as pixel boundaries on different axes are crossed on alternating frames. Try quantising your camera and moving on diagonals in neat ratio-ed amounts if it’s viable for the type of game you’re making.
As for the TextMeshPro issue, I haven’t used Unity in many years so I don’t know how TMP works these days, but that issue looks like it’s caused by the texels of the font not being aligned with the framebuffer’s pixels. You’d want to make sure TMP is using a true bitmap font, without vectorised padding, and isn’t adding padding to its mesh. For basic pixel art UI I’d recommend sticking with a simpler text solution, if it still exists in Unity these days.
Hi Alex! I was wondering if there was a way to disable pixel snapping for everything because I am working with 16×16 sprites, and top down movement. This causes the character to move in very jagged lines because it is snapping with the nearest pixels, any help would be amazing, thanks! – Jonah.
Hey Jonah, if you don’t want pixel alignment you don’t need to use this tool, for you I’d recommend just scale your textures by 4x using nearest-neighbour scaling, or use a shader/material that preserves pixel sharpness.
Hey Alex, thanks for making this blog post and package. I’ve been struggling trying to get my UI specifically to look pixel perfect with no avail. So, I downloaded your package and I just tried using your package and I cannot seem to get it to work properly. Maybe my version of Unity is too new? as I’m using 2021.3.2f1? Anyways I would really appreciate the help if you’re available, I feel like I’ve read every post online about this topic at this point… If you have maybe 10 minutes for a discord call or something like that I’d really appreciate it.
Sure, send me an email to organise that.
Hello, thank you for your work, I have a few questions about dome aspects of the package. For example, is it normal that when creating prefabs, the they don’t show the sprite to represent the prefab in the assets ? And more important, I added a canvas with a button to make menus, but I cannot add the PixelArtUI so it is all blurry. Is it due to the unity version I am using ? it is the 2022.3.10f1.
anyways I hope you are doing well
hello, thank you for your work, I just have a question about the canvas. Is it normal that I cant drag and place the ui and font component in it ? cuz the ui is all blurry 🙁
have a good weekend !
In terms of the prefabs, I don’t recall much in the way of generated thumbs for prefabs back when I used Unity.
In terms of UI and fonts, I think these days text in Unity is done through TextMeshPro by default, so you may need to configure your font data to be correct for bitmap fonts.
If you’re unsure if something is normal or not, I recommend checking the included sample scene and seeing if and how it works in there.