How to correctly get jaggy free pixel textures in 3D game?

Question

I have a simple 3D fps game (think original Wolfenstein and Doom) where the textures are done old-school pixel style, but I find I'm having to save every texture out from Photoshop at a min of say 512x512 (even though the actual texture art for the walls is actually only 32x32) just to stop it looking all aliased when the game is running.

Here's a couple images of the game:

alt text

If I set the textures to Point (no filter) in Unity then they look all jaggy. If I set them to Bilinear or Trilinear in Unity then they look clean, but only if I output them at the much higher resolution from Photoshop first, otherwise Unity's filters turn them into blurred mess.

So how am I supposed to use pixel art textures as intended, which is naturally drawn at a low resolution (so they're not taking up a lot of space each) but without any blurring?

Answer 1

Answer by Vilhien · Jan 04 at 09:24 PM

When you change their size in photoshop, under image size make sure "Resample" is unchecked, you shouldn't get any resampling of the pixels upon changing the size that way.

Add comment · Show 3 · Share

impurekind · Jan 04 at 10:50 PM 0

Share

I don't think this is an issue with Photoshop's end of things. The original images output from it are perfectly sharp (using nearest neighbor to preserve the clean pixel look). It's when the game does its stuff in Unity that the issues arise. I either have to go with the original images with no Unity filtering options turned on, in which case they can be used at their original low memory size but are jaggy as hell as soon as the camera isn't looking exactly flat on at them and any angles of the pixels aren't perfectly horizontal or vertical, or I have to use one of Unity's texture filter options that makes them completely blurry unless I first go back and save them out of Photoshop scaled up by an order of magnitude (like I said, a 32x32 now needs to be output at 512x512, or 256x256 at a push, just so Unity's filtering doesn't completely blur things).

So I don't know how to get nice clean pixel textures on my 3D game's walls without having to save every single normally-32x32 texture at 512x512 instead, which seems like a terrible waste of memory, especially with some of my even smaller textures (16x16 or even 8x8) that still need to be saved at min 128x128 so they don't look either jaggy or blurry in the game with filters on.

Something seems a bit off to me, like maybe there's some other option I'm missing where I can still use the tiny texture as is but that also keeps them looking nice and smooth in my 3D game too. . . .

Vilhien impurekind · Jan 06 at 05:28 PM 0

Share

Hey bud,

Looked around and playing with it a bit on my end as well with my project.

Yer right, no filter, point seems to make mine look best as well, but I'm not following any strict guidelines.

I did read somewhere that the pixel count should match, so try setting your pixel count to 32.

I'm running into all sorts of shader issues myself currently as I'm flipping sprites.. It seems every time I venture out to make a 2d game it ends up 3d.

Any other luck so far?

impurekind Vilhien · Jan 06 at 06:00 PM 0

Share

Changing the pixel count doesn't seem to make any difference that I can see. I guess it's not a huge deal because the game's file size isn't huge when I save out the build, but it just seems strange that I have to convert all my pixel art sprites/images to something much bigger before putting them into Unity just to avoid the blur when using either Bilinear or Trilinear Unity filters on the texture settings, which I have to use in order to get rid of the jaggy lines that appears on the textures when viewed any way other than perfectly flat/straight on in my 3D game.

Answer 2

Since bilinear interpolation naturally blends between every pixel across the entire length of those pixels, you'll need to write a shader which ignores that normal blending.

For this, you'll want to decide on your basis for calculation:

A) Manually interpolate pixels in a point-filtered texture (which requires no fewer than 4 pixels read), then adapt the blending itself.

B) Manipulate texture reads on an interpolated texture (1 pixel read, but more costly) to make it look like a point-filtered texture, then adapt the position of the read pixel.

This isn't complete, but should get you started in the right direction for approach B. Using an unlit shader as the baseline to keep it short:

 Shader "Unlit/FilterScale"
 {
     Properties
     {
         _MainTex ("Texture", 2D) = "white" {}
         _Threshold ("Rounding Threshold", Range(0.0, 1.0)) = 0.5
     }
     SubShader
     {
         Tags { "RenderType"="Opaque" }
         
         Pass
         {
             CGPROGRAM
             #pragma vertex vert
             #pragma fragment frag
             
             #include "UnityCG.cginc"
             
             struct appdata
             {
                 float4 vertex : POSITION;
                 float2 uv : TEXCOORD0;
             };
         
             struct v2f
             {
                 float2 uv : TEXCOORD0;
                 float4 vertex : SV_POSITION;
             };
             
             sampler2D _MainTex;
             float4 _MainTex_ST;
             float4 _MainTex_TexelSize;
             float _Threshold;
             
             v2f vert (appdata v)
             {
                 v2f o;
                 o.vertex = UnityObjectToClipPos    (v.vertex);
                 o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                 return o;
             }
             
             fixed4 frag (v2f i) : SV_Target
             {
                 // Half-pixel offset to grab the center of each pixel to disguise bilinear-filtered textures as point-sampled
                 float2 halfPixel = _MainTex_TexelSize.xy * 0.5;
                 // Location (0-1) on a given pixel for the current sample
                 float2 pixelPos = frac(i.uv * _MainTex_TexelSize.zw);
                 // sub-pixel position transformed into (-1 to 1) range from pixel center
                 pixelPos = pixelPos * 2.0 - 1.0;
                 float2 scale;
                 float2 absPixelPos = abs(pixelPos);
                 // If sub-pixel position is near an edge (_Threshold), use point-filtering (scale = 0)
                 // Otherwise, use an analog dead zone calculation to approximate blending
                 // (note: can be improved)
                 // http://www.third-helix.com/2013/04/12/doing-thumbstick-dead-zones-right.html
                 if(absPixelPos.x < _Threshold)
                 {
                     scale.x = 0.0;
                 }
                 else
                 {
                     scale.x = (absPixelPos.x - _Threshold) / (1.0 - _Threshold);
                 }
                 if (absPixelPos.y < _Threshold)
                 {
                     scale.y = 0.0;
                 }
                 else
                 {
                     scale.y = (absPixelPos.y - _Threshold) / (1.0 - _Threshold);
                 }
                 // Calculate the new real UV coordinate by blending between the center of the current pixel and the original sample position per axis
                 float2 uvCoord;
                 uvCoord.x = lerp(floor(i.uv.x * _MainTex_TexelSize.z) * _MainTex_TexelSize.x + halfPixel.x, i.uv.x, scale.x);
                 uvCoord.y = lerp(floor(i.uv.y * _MainTex_TexelSize.w) * _MainTex_TexelSize.y + halfPixel.y, i.uv.y, scale.y);
                 
                 float4 col = tex2D(_MainTex, uvCoord);
                 return col;
             }
             ENDCG
         }
     }
 }

_{I apologize that it's a little sloppy (I got the algorithm close enough to function well, but can't remember what I'm missing to make it just a little cleaner).}

How to correctly get jaggy free pixel textures in 3D game?

2 Replies

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions