Question by Pangamini · Mar 15, 2022 at 12:00 PM · ui atlas pixels

Pixel-perfect UI sprites for multiple resolutions

I am trying to figure out the intended workflow for rendering pixel-perfect UI sprites for any / supported screen sizes. So far I figured out I need to use constant pixel size canvas scaler, pixel perfect canvas render mode and native sprite rect sizes. That causes sprites to be displayed large on small screens and vice versa. Therefore I guess I need to have multiple sprites and somehow swap them, w$$anonymous$$le also maintaining its rect size to always keep native size. The built-in sprite variants give me no control over the downsized atlas content, all it does it uses some default downsampling technique, I am not able to downsample and create a sprite atlas on the fly (as the sprite atlases seem to be read-only in runtime). Therefore I cannot compose my own sprite atlas from sprites that I generate using some advanced downsampling, nor can I generate sprite atlas variants in the editor. All I can t$$anonymous$$nk of at t$$anonymous$$s point is to have an Image component accompanied by a script that swaps and resizes the image (selecting the most appropriate size) at runtime, without being able to use atlases at all. I could write some custom solution if I could build atlases at runtime. Is there some intended workflow I am missing completely, or is t$$anonymous$$s left completely unsolved?

0 Show 2

xxmariofer · Mar 15, 2022 at 03:06 PM 0

Im not that familiar with 2d pixel games, but may I ask why arent you using the scale factor in the canvas scaler component? to my understanding, you would create your game targeting a resolution for example 720p, and if someone was playing at 1440p you would set scale factor to 2. But honestly I am not sure how the scale factor affects the pixel perfect from the render mode

Pangamini xxmariofer · Mar 15, 2022 at 09:41 PM 0

Layout scaling is not the issue, it's the resampling of sprites. When you have sharp edges in toony sprites, those can get blurred by the bilinear filter if sprite texels don't match the screen pixels. To get the best results, I need to use different versions of sprites for different sizes (unless I wanted to use some different, possibly mobile-unfriendly downscaling filter shader - bicubic, or even higher order). Even bilinear filter could be disabled in a pixel-perfect UI, saving a significant amount of battery power, but I haven't done any tests myself.