🎉 Celebrating 25 Years of GameDev.net! 🎉

Not many can claim 25 years on the Internet! Join us in celebrating this milestone. Learn more about our history, and thank you for being a part of our community!

Sharpen/9Patch "filter" in Unity?

Started by
4 comments, last by Zurtan 2 years, 10 months ago

For my game GF2, and now also GF3. I have sprite characters.

I wanted the characters to look pixelated, but also not having aliased edges in the outline and between the pixels.

What I am doing is taking every 32x32 sprite(for instance,) and turn it into a 128x128 scaled up sprite with nearest filtering. Then I apply trilinear filter on this.

So it means in any resolution, the sprite will look pixelated with no weird artifacts.

(I also implement a 9patch but that's just “more of the same”)

Since I also save all pictures with None compression, to have maximum quality of the texture. It also help save space in the final product. Although, I am not sure why Unity can't save None textures as PNG? I get the feeling it saves it raw or as BMP.

Is there a better approach to do this? This might simplify also the sprite shaders, or when I do custom sprite shaders.

Should I implement a special filter in the shader instead?

Creating this data doesn't take a lot of time even on a phone.

However, I wonder if I there is no much simpler solution that I didn't think of?

(It also lets me have the character move smoothly, because it uses the native texture and not scaled up lower res)

Advertisement

I don't have much experience with Unity, but in DirectX and OpenGL there is such a thing as a magnification filter, which you can set to “NEAREST”. That should be sufficient,
This ancient thread doens't make me very optimistic wrt. getting it in Unity, though, but I'm unsure as wrt. what "GGeff" means; Point should, as I understand it from this Unity doc page, scale up by Nearest when using Point.

By the way, this:

Zurtan said:
and turn it into a 128x128 scaled up sprite with nearest filtering. Then I apply trilinear filter on this. So it means in any resolution, the sprite will look pixelated with no weird artifacts.

Sounds off - trilinear filtering will in some cases cause antialiasing between your texels. It being a higher resolution at first might help this by not being so pronounced, though…

Well here is the difference without(left) and with the sharpen trick(right).

You are right that if the sprite was filled to the edges, it wouldn't be smoothed in the edges, but I also do 9 patch. The transparency makes the hard edges not visible.

Hi @zurtan ,

I admit that I'm not quite getting it - perhaps I don't need to. I see the leftmost sprite as the most sharp.
The filtering on the right variant makes it look blurrier, and it could be seen as an undesired artifact, at least if the whole game doesn't use that style.
Some might prefer the one over the other - different strokes and all. ?

Zurtan said:
You are right that if the sprite was filled to the edges, it wouldn't be smoothed in the edges

I didn't state that, but yes: That's not due to the filtering though - that's due to nothing being rasterized outside a drawn polygon. For smoothing here, you could anti-aliasing or supersampling.
However, I think what you'd benefit most from here would be to extend the drawn polygons to always exceed the sprite by some amount.

Zurtan said:
I also do 9 patch

Could you elaborate on this? From where I'm from, a 9-patch is a bitmap divided into 3x3 sections, where each section (except the corners) are tileable across one or both axes.

How about the approach with point filtering I mentioned?
Also, regardless (but perhaps easiest with nearest/point) of the filtering, you could write a simple shader that did this edge blur. That would simplify the process a lot IMO (no preprocess scaling of sprites).

The issue with the left one, is that the aliasing is popping up in motion(For instance if the character is slowing it's speed to 0, it will have a lot of alias popping when slowing down).

The only way to get it like the left one without popping, is if the resolution and the scale/motion match. Which means the scale change depending on user resolution.

The right one is slightly more blurry, but it's also monitor resolution agnostic.

This is very zoomed in, so in full screen the blurriness is a lot less visible.

Here is a screenshot with this “trick" that you can see it looks both pixelated(and resolution agnostic) but also sharp.

This topic is closed to new replies.

Advertisement