- Home /
Unity UI image + mask has jaggies
Hi there! The new layout for GUI in Unity is amazing BUT, as I was playing around with it, I've found out that one of my canvas' images is rendered with jaggies and I know it shouldn't have them.
I've imported it with maximum settings and the image itself is pretty large, which is why I wasn't expecting this issue. Thing is, the image is jagged even if I scale it to lower W/H in the Canvas.
Since I'm not familiar with these problems and I've already checked the import settings, I'm now clueless.
MAYBE I should also mention the fact that this particular image is coupled with a mask image.
Does that matters?
What should I try to do?
Thanks for your time!
P.S.: As suggested, I'm editing this to include the pics...
This is with jaggies, the orange colour is a flat layer, the Stamina itself is the mask I'm using on it
This is a pic of the Stamina while you deplete it, if you look carefully the edges of the mask are not jagged
please take a snapshot of the import settings and attach it here
Edited! thanks for the suggestion, sorry if it took me a while!
Answer by digzou · May 04, 2015 at 04:40 AM
Try creating the image sprite with an ideal resolution. (By ideal I mean to say that, in my game I was setting 300x300 facebook profile picture.But my dummy avatar image size was 1024x1024,which I was resizing and using. So I changed the size of my dummy avatar to 300x300. And set the max size to 256[closest to 300] and set import to 'Truecolor'. Although not very crisp, it did improve the jaggies.) :)
Hi digzou, sorry if some days have passed!
edit I've found out that one of the significant causes of those jaggies was the Filter $$anonymous$$ode... I changed it from Bilinear to Trilinear while $$anonymous$$dlessly stuffing with options and magic happened!
Right now I'm almost happy with the result on the mask while full ( it still has some jaggies but now they seem acceptable).
I couldn't try your suggestion with those textures because, If I've understood correctly, I should try to scale them to the resolution my Canvas will use. That would be 1080 hd, but originals are raster and far tinier than that; if I photoshop/resize them I'll get something wrong.
I do have tried to manipulate the scale of another piece of GUI that could be rescaled, but I've noticed no visible improvements in my specific case, sorry :(
Thanks a lot for your efforts though!
Note: I used Point first as filter, and the texture under the mask displayed in a precise way but not the mask itself. Trilinear ins$$anonymous$$d works decently when full screen is on, both for the mask and the texture beneath it.
As I was reworking the interface's elements from scratches, I decided to try out your suggestion also with those that I couldn't rescale ( I redrawn them bigger).
The results are better, but when I mask an element with another, I still get a bit of jaggies! Thanks again for the suggestion!
This answer is partially correct, but I think this is only happening because Unity is generating mip maps for sprites that are displayed at lower-than-native resolution. Therefore, if you can't save your images at display resolution for some reason...
...With your texture selected in the project panel uncheck "mip maps" and watch the jaggies disappear.
The downside of this is that the memory footprint for that texture is going to be larger than necessary when you build your game, so try to get them saved into your assets folder at the display resolution if possible.
Answer by SergeantBiscuits · Mar 16, 2018 at 09:24 PM
Found this question while searching about the same issue... I was able to get 100% clean masking by changing the 'Compression' setting for the texture to 'None.' Hope this helps anyone else who comes across this. :)
https://docs.unity3d.com/Manual/class-TextureImporter.html
At the bottom of the texture importer