I couldn't really find any tips on this (or perhaps I just lack the proper words once again), but I'm thinking about how to get some retro looks (SNES 16 Bit, specifially) using a modern system. Basically, the game still runs with the native resolution, however, vertially and horizontally we're limited to 256x224 (512x448). The colour palette is not an issue nowadays.

So I basically came up with this idea and am wondering if it's a smart approach (using OpenGL):

  1. Create Orthogonal Projection Matrix with 256 units width and 224 units wide.
  2. Use a fragment shader that doesn't do anti-aliasing on the textures, so the textures are upscaled to look pixel-y.

Since I couldn't really find a shader for 2), I also came up with a plan b):

  1. Same as 1a)
  2. Don't use textures at all, replace pixels with 1x1 coloured quads, convert spritesheets to 3D models made of quads.

I think plan a) seems more realistic, however. But I do wonder how other games (Shovel Knight, Freedom Planet) approach a pixel-y, retro look that stays true to the systems of 20 years ago.

  • \$\begingroup\$ The resolution of your rendered image is not determined by your projection matrix, but by your render target. \$\endgroup\$
    – DMGregory
    Jul 11, 2015 at 13:53
  • \$\begingroup\$ @DMGregory I'm talking about a kind of fake resolution so the final image is still rendered in full HD, e.g. 1920x1080. I tried just setting the game resotion to 256x224, but the results look horrible on a full-HD monitor and I know that's not how Shovel Knight and such created this effect. \$\endgroup\$
    – Lanbo
    Jul 11, 2015 at 14:01
  • \$\begingroup\$ Post a screenshot of what you have right now. Horrible is quite a loose concept. \$\endgroup\$ Jul 11, 2015 at 14:14
  • \$\begingroup\$ ... and a screenshot of what you'd like to achieve :) \$\endgroup\$
    – Vaillancourt
    Jul 11, 2015 at 14:37
  • \$\begingroup\$ @nikoliazekter I will once I get back to my other PC. This windows one refuses to even show 256x224 as full screen resultion, alas. \$\endgroup\$
    – Lanbo
    Jul 11, 2015 at 14:56

1 Answer 1


Shovel Knight screenshot

If you open the image above in its full resolution and look closely (with something like Magnifier on Windows), you should see that all the pixels simply have something like a blurred edge.

Shovel Knight screenshot fragment, 5x zoom

Since there can be seen standalone "edges" of pixels, it is clearly not a post-processing method. When looking at screenshots in different resolutions, the edge appears to be always one pixel wide.

This leads me to a conclusion that they're probably using textures with bilinear filtering disabled and they're doing the filtering manually in a shader, by taking multiple samples from the texture within the screen pixel distance.

The way I would implement this is by taking screen-space derivatives of texture coordinates and using multiple blur offsets.


// define "offsets" as an array of float2 with each number between [-0.5;0.5], preferably random
float2 dx = ddx( texcoord );
float2 dy = ddy( texcoord );
float4 color = float4(0,0,0,0);
for( int i = 0; i < numOffsets; ++i )
    color += tex2D( texture, texcoord + dx * offsets[ i ].x + dy * offsets[ i ].y );
color /= numOffsets;

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .