2D HQ graphics on varying screen sizes?

Why is unity 2D orthographic camera and sprite rendering so difficult to get right?

Hello, I have over the last two years tried to solve 2D graphic issues with no luck, and never finished any 2D projects for that reason. This time I have decided to implement only the most basic game mechanics and then focus on getting the graphic right before shaping the game play.

I want to make a game where the player sprite is rendered 1:1 pixel on every device. I have googled, and read tons of forum posts, but still haven't been able to solve my problem. Most posts use an 8-bit like pixelated game type as example, but I want the opposite, I want my sprites rendered HQ 1:1

I have tried to follow (among many other) this guide: https://blogs.unity3d.com/2015/06/19/pixel-perfect-2d/ And I have achieved to make my sprite look somewhat 1:1 clear rendered at a certain screen size (game view size). However, as soon as I resize the game view my sprite becomes either blury or pixelated.

How does games like angry bird, jetpack joyride... etc. achieve perfect 2D rendering no matter if your are on phone, HD phone, tabled, and so on? Not only those, I have seen apps made in unity that are more like a "GUI app" than a game, where the developer have clear shapes, clear text, clear everything no matter what device i run their app on.

To visually display my concern, I have taken some shots of my screen with a real camera so you can see it as I see it. I have also included screen shots for comparison.

1. First shot, is in unity 3 different sprites (PNG), fist one is very high resolution (1000p x 1000p), but scaled down within unity (0.3), 2nd one 50% resolution scaled 0.6, last one 33% resolution scaled 1:1. Unity game view is relatively large here approximately the size of an iPad screen, and my laptops dpi is also very close to an ipad (air)

Photo

full: https://www.photobox.co.uk/my/photo/full?photo_id=500717400033
3rd fish is acceptable with these setting + screen size

2. Same sprite settings. This time I resized to game view to the size of a smartphone, again, my laptop dpi is close to a semi high res smartphone

photo

full: https://www.photobox.co.uk/my/photo/full?photo_id=500717398778
No fish quality is acceptable with this setup

screenshot for comparison


Now I'm gonna show you how the quality of the fish looks in photshop compared to unity. I have made sure the fish is the same size on the screen each time (~3cm wide), and the camera have been same distance from the screen (10cm).

photo

full: https://www.photobox.co.uk/my/photo/full?photo_id=500717400033

screen snip for comparison (holy s**t that sharpness) You see, this fish is even way more sharp than what I on first posted image called "acceptable" - this is "ideal"

full: https://www.photobox.co.uk/my/photo/full?photo_id=500717458938


I'm still very puzzled with this issue, and it caused me a lot of headache. If any of you guys have achieved a 2D game with clear rendered sprites (HQ) on all screen sizes, I would very much like to clone into a project where that is achieved, to analyse your settings, sprites, png(?) files, camera settings etc.

If you know what I am doing wrong. please come forward, I have spend a lot of time trying to figure this out and it seem to be the most blocking problem I have had with unity :/ It has to be possible, because games like angry birds achieves exactly the kind of graphics I want, and it is not compromised on different screen formats/sizes.

Thank you very much!

 

No matter how I scale down my fish in photoshop (free transform/reduce image size.... idiot safe) it looks good, sharp and clear! all the way from 1000x1000 to the last posted picture, you see it looks incredibly sharp. Why is it that when I use a large size image in Unity and it is scaled down it doesn't look good? It looks like it is scaled down too much and then zoomed up again. Why is it not possible for unity to scale down sprites like photoshop does it? Can someone please point me to a guide that covers my concerns, that does not try to make 8-bit pixelated games please? Are there any support on scaling HQ/sharp sprites? It seems like everyone who makes 2D games either want to make them pixelated 8-bit'ish or are fine with their game only looks good on one screen size? I am struggling!

 

Have you modified the pixels per unit at all?
How many pixels in the sprite should equal 1 unity unit.

 

Hello ! You want to have pixel perfect display when Unity scales down your sprites. This is not possible, unless you are dividing source pixels evenly (factor of 2).
In other words, if you want Unity to scale down as Photoshop does, then you should build your game for 960x640 and play your game in a device with 480x320 (divided by 2) or 240x160 (divided by 4) etc. I understand your frustration, but unfortunately this is how it works.
I am not the person who can comment on this but Photoshop must have complex calculations on scaling down. It might be redrawing the rasterized layer when you scale it down.
Conclusion: What you want to do is not possible. But I do want to believe that I am wrong though, I am no expert and confused about this issue as well.
I would really appreciate if anyone can clarify the confusion here.

 

Thanks kapopixel, Yes i'm sure photoshop has a very sophisticated algorithm to do so, because it pops up a loading dialog each time I "reduce" image size, so I'm sure their method is not usable in gaming where frame rate is a matter. How ever i'm dying to know how for example angry birds is made, or jetpack joyride, I have played those games since the first model of iPod touch was released, and played the games on every possible screen size since. Every time their objects are rendered beautifully. All professional game development companies seem to have mastered this, but there is absolutely no documentation or tutorials on how to achieve this. I can't tell if they are using the unity engine, but I guess some of them are. Since unity have no tutorial on how to support different screen size when rendering sprites, I do not know how to continue. Could it be that they have all their sprites in different dpi/ppi/res to support all possible screen sizes, and then programmatically switches between the sprites to chose one that renders 1:1 ? If so... that is gonna be a lot of work when generating images of all sprites to all formats.

 

Hi rpuls, I'm a game dev newb so I might be wrong on this but I figured i'd take a crack at answering if for no other reason that to confirm my thoughts or be educated. If anyone cares to correct me please feel free.

I believe that what you want is NOT 'pixel perfect 2d'. That term is reserved for 'pixel art' games whose art style is based on old 8 or 16 bit games with clearly visible pixels. If a sprite is only 32 pixels high and you want the artwork to appear sharp, you need to either use 1:1 device pixels to art pixels, or some multiple of that (one 'pixel' in your art is drawn on 4, 16, etc device pixels). That way the 'low res' art remains nice and sharp. But the fish artwork you posted as an example is not 'pixel art'.

As kapopixel said, what you describe is not possible, unless you are fine with your art changing size drastically as you play it on a different device.

I think what you really want is nice clean art with a pixel filter. Most 'pixel perfect' guides will tell you to turn off the pixel filter because it would blur the sharp squares of pixel art. That doesn't apply to you. Games like Angry Birds are not 1:1 pixel art games. They (likely) have 1 to 3 versions of comparatively high res art that is pixel filtered during play. Try importing your artwork and make sure the bilinear (or trilinear) filter is switched on for that sprite in the inspector. It should stay sharp at multiple resolutions and sizes (to a point, unless you scale it up to much). What res you ultimately need of course will depend on the amount of screen space you intend the art to take up, and the performance hit you take with higher res filtered sprites.

 

Hi kemijo! Thanks for your post. You understand exactly what I want. And you happened to know what the term "pixel perfect" means, which I didn't. I had no idea that it was related to 8bit style graphics, I my logic it would mean that the render stays sharp

No wonder why I have only been able to find 8bit related guides when including "pixel perfect" in my searches, and why everyone have been talking about 1:1/1:4/1:16....

Anyway, I have tried bilinear and trilinear filter modes, I have tried changing the pixel per unit up, and scaling the game object down (and the other way around). No matter what I do it becomes very very unsharp, and never looks like the photoshop example. It looks like it have been scaled down too much and then scaled back up.

 

Well sounds like you're getting closer

I did a search for a random character png file, dropped it into Unity and scaled it down. Default settings look fine to me. Bilinear filter is on, alpha source is 'input texture alpha', alpha is transparency is turned on. Looks relatively clean, but of course there are limitations. Couple things to check:

What is the "scale" set to at the top of your Game view window? Make sure it's set to 1x. Unity's Game view is not filtered.

For obvious reasons you can't scale an image up too much or it will appear soft/blurry. But scaling it down should be ok.

Is your alpha channel on your PNG nice and clean and anti-aliased? Check in photoshop.

Lastly, If all the above is done, it might be 'as good as it gets.' Scaling in Unity will not be as clean as scaling in photoshop. That said, it should not be jaggy and should definitely be cleaner than the image examples you posted.

 

Is there no way to use @2, @3 etc to achieve what you want? Ie, including a images for each resolution type and let Unity choose for you? I've done this with my games for another engine (Gideros) and then you truly get pixel perfect results regardless of resolution. Pixel perfect in this case meaning sharp on any device, not trying to get a retro look. Like in Angry Birds.

I'm new to Unity, so it's a question, not a suggestion.

 

rpuls, if you're looking for Adobe Photoshop level quality while reducing the size of images for display on different resolutions you're going to have to look at AssetBundles https://docs.unity3d.com/Manual/AssetBundlesIntro.html and package multiple sizes of your art with your game.

 

Hey @rpuls, any developments on this matter?

@LogicSeed, do you mean we should prepare our game assets, let's say, in three different resolutions for iphone (1920 x 1080), ipad (2048 x 1536) and iphone X (2436 x 1125) so we can avoid blury or pixelated sprites?

By the way, although 2D Game developers frequently ask this question, it is interesting that there is not any comprehensive tutorial/guide addressing this issue. I even tried UNITY's official paid 2D Mobile Development tutorial (https://unity3d.com/learn/2D-mobile-game-dev). In this tutorial it lets you go to Google Play Store and download finished product to your mobile to grasp what you would develop. And it is funny to see that even in the "completed product" subject to this official tutorial, they did not/could not solve this problem. Please download the game and let yourself to disappoint.

 

From the comments it sounds like you're basically trying to take original crisp vector graphics type of imagery, not "pixel art", and get it to look good at many resolutions.

But it also looks like you are trying to force that kind of imargery into a pixel representation, because I see that when you scale down you resolution, there are rows and columns from the image which are simply not displayed which happens when you are using nearest-neighbor scaling on the texture.

To get it to stay "smooth", which is what you seem to want, not pixelated, you would need to use bilinear filtering.

In photoshop it's possible I think to bilinear filter but they also have other more sophisticated image filters like bicubic and others which look a bit better.

Seems to me like you want to actually get AWAY from "pixel perfect" and get away from trying to make it look like pixelated sprites, and more towards having it look smooth. So switch off "pixel perfect" in any sprite shader and change the filtering from nearest-neighbor to bilinear.

Another alternative you could consider, is to actually render your game to a render texture at a higher resolution, for example at the highest phone resolution or whatever, no matter what device you are on. Then, output that render texture to a 2nd camera covering the screen and do your own filtering, or try the bilinear filtering on it. You can also then apply a small amount of sharpening in a shader for example to make it a bit more "crisp" because usually when an algorithm scales down graphics, it'll introduce a slight amount of "blurring" due to the averaging of values across pixels. I always combine downscaling with sharpening where possible.

Also beware of your monitor, if your screen is lcd etc with a native resolution, you're going to have to use native resolutions or an exact multiple/halving of that, something that fits 1:1 pixel ratio, otherwise the monitor itself is now going to introduce its own scaling algorithm and make everything look even worse.