I'm having a hard time to understand how to prepare my assets to look sharp on multi-resolution without making lots of copies of the same texture in different sizes.

I'm making a match 3 game where the assets I bought from the asset store are 400x400 (NPOT) and I want to make sure it'll look sharp on all resolutions.

I understand the variables of the formula are Orthographic Size, PPU and the Size of the texture. considering that it means that on S10 where the vertical height of the screen is 1440 and assume I want 10 pieces of my game board to occupy 80% of the screen height 0.8 1440 = 1152 divided by 10 = 115.2px so each board piece size equals 115.2x115.2 px to look crisp. So if my Orthographic size is 5 units (10 vertical units in total) and 80% of 10 is 8 units then I have to fit 8/10 115.2 PPU in order to be good. But then on 1080p I'll have 0.8 * 1080 = 864 / 10 = 86.4px so now I'll get a downscale.

So I have the option of dynamically changing my camera size and/or PPU which feels a little weird because it will also zoom in and out other parts of my game.

If the right way is to make multiple texture sizes then I'm blowing up my package size and it means that I'll have to use asset bundle with lots of variations and download the correct one the first time user is installing the app.

I wonder how big game companies handle this. Is using multiple atlas's is the right way to go? If so, how do I make sure the right atlas is being used by the matching device.

We just use one size which looks good on large screens.  It's OK with us if it's slightly less sharp on lower resolutions.

Hey @Nypyren, 

Can you be more specific as to which size is your reference resolution on Android? and if you use Unity do you use Atlas and with which PPU size?

I'm not sure what the reference size is (I only handle programming, not art).  I just know that we don't ship multiple sizes of textures with the app (because we don't have any code to switch between Unity asset bundle variants or any other DPI/PPU-based scheme).  We might have multiple resolutions for the splash screen, and I think we're required to have multiple resolutions for the app icon, but we have one resolution for the in-game textures.

Our major constraint is fitting all of our assets within the over-the-air download budget (around 150MB now, I believe).  Having multiple texture resolutions would either require increasing our download size or having a separate download after the user installs the game, both of which reduce the number of users who are willing to wait for the app to finish downloading. Many users just uninstall the game if it takes too long to download and start.

We support iOS and Android devices, and the largest one I've tested on is an iPad Pro.  Our textures are scaled up slightly on that one, but they still look good.

19 hours ago, Yoshiro said:

so each board piece size equals 115.2x115.2 px to look crisp.

I don't think this will make them look crisp, it'll just make them span the screen space you want.

What'd make them look crisp is if you either displayed the textures at 100% their size (400²px) or a higher integer multiple of that: 800²px, 1200²px, 1600²px etc.
Any size smaller than the original will result in minification -- resampling -- because more than one texel (a pixel from a texture) will be occupying a screen pixel, so you'll get the average of the texels captured in that screen pixel rather than a pure 1 : 1 texel to pixel mapping (this is what "pixel perfect" means).

Do you have a phone that you can use? Make a simple app that just displays your textures at various sizes, and see for yourself. If it doesn't look too bad, then you don't have to worry about anything.

I have a feeling though that downscaling something from 400²px to 115.2²px is going to remove a lot of detail. It's almost a 4x reduction.  
When artists need an asset at different sizes sometimes it's better to just redraw it at that smaller size, since downscaling filters don't often preserve the important details (again, you need to test, no point in speculating).

You can also try exploring some fancy modern perceptual downscaling algorithms, but you need the coding skills for it:
- https://github.com/nmndeep/Image-Downscaling
- https://github.com/ShariqueMohd/Spectral-Remapping-for-Image-Downscaling

@Nypyren Thanks, that is really helpful

@Kryzon I really appreciate your answer. It was truly helpful to me. I used Unity Editor to do some tests without changing much of my settings but using different resolutions and texture sizes.

The settings I used:

Orthographic size = 36 (72 Units for full height)

PPU = 100

Disabled Mip Maps

Filter = Point Filter

The animals are at different "max size". So unity basically creates a smaller texture in case max size < actual size.

Chick max size = 64

Aligator max size = 128

Cow max size = 256

This is how it looks for 3 of the most popular screen resolution and my S10 resolution and very low end.

1. 1080x1920

2. 720x1280

3. 750x1334

4. 1440x2960

5. 360x640 (very low end)

My conclusion: there's no way but to code some logic to map to pixel perfect because the gaps between the high end and low end are just too big. Although I must say that the Aligator texture at 128 yields the best overall results.

This here needs attention, some sampling artifacts caused by the point filter (aka "nearest neighbor" filter):

That is from the 360x640, but it's also visible to a lesser extent on the higher resolutions.
Try using the bilinear filter and seeing how it holds up: https://docs.unity3d.com/ScriptReference/FilterMode.Bilinear.html