# SDL zooming/upscaling without images becoming blurry?

I'm working on a game with 32px tiles and I have one question regarding this and scaling. When I try to see my game fullscreen my image just becomes blurry. I remember playing NES games and when the image was scaled you just saw pixels as big blocks but they were still as crisp as when they were small, so I'm wondering how I can do this in SDL.

• if you want blocky pixels you need to try nearest neighbor scaling algorithm. – concept3d Jun 17 '14 at 22:35
• – Anko Jun 18 '14 at 9:24

As far as I know, this is not a standard feature of SDL. It is (if I remember correctly) a feature in SDL2_gfx(an extension library made specifically for linux) and OpenGL.

However, if you would like to multiply your image's size by a whole number (n), you could do so by reading each pixel and assigning that color value to a square that is (n)-times larger than a single pixel. This would work best for small sprites, rather than large and complex images. I have not implemented this myself, but theoretically it sounds straight-forward.

• Yes, I tried doing that at the time. However it's not extremely practical. – Lisandro Vaccaro Feb 19 '14 at 23:22

If you make the scale an integer number, like 2 here

SDL_RenderSetScale(renderer, 2)


then every pixel will scale up to an integer number of pixels. There's then no need for anti-aliasing between pixels and hence no blurriness.

• Fleshing this answer out with a little more information would be useful. For example, describing the problem being solved and how this is solving it. – MichaelHouse Jun 17 '14 at 22:16
• No, this is clear enough. – user3720733 Jun 17 '14 at 23:43

What you'll be after is an image scaling algorithm. You can do this using plain (as in CPU) code, which is very slow, or I believe many scalers are available as GPU shader programs. This is especially suitable for you, as it sounds like you are working with low-resolution pixel art and you want to upscale them without introducing blurriness.

The simplest algorithm is nearest-neighbour but it tends to introduce blockiness, which may or may not be what you want. Typical pixel scalers will try to look for line patterns and preserve them. See this example (original is in the middle, nearest neighbour on the left, 2xSaI on the right):

hqx is also a popular choice as code is very easy to find for it these days, and it's fairly high quality. The state of the art includes xbr and Kopf-Lischinski.

These scalers are commonly found in console emulators, some of which are open source so you can easily take a look at how it's done.

• Unfortunately many of those scalers have restrictive licenses (such as gpl) – Jari Komppa Jun 18 '14 at 6:52

The current implementation of SDL 2.0 allow you to do that natively. Read in the Migration Guide The section called Setting up a game with the new video API and see how the flag SDL_WINDOW_FULLSCREEN and function SDL_RenderSetLogicalSize will help you on this.

You don't have to make any software algorithm to do that. Believe me I like to write direct pixel access runtines.

In general, if you are using any 3D API textures you should be allowed to set te Texture filtering to "Point" (Nearest-neighbor interpolation) instead of the default Bilinear or Anisotropic wich are the filters that make your texture blurred when scaled.

Is just scaling your texture without interpolated filtering, like in the old days of DOOM and Tomb Rider I without accelerated graphics.

See this examples of OpenGL texture filters; how they use the GL_NEAREST flag.

I know this is an ancient question, but since I came across this in google I'll drop in this answer. What you want to do (if you are using SDL2), is to initialise your application with this scaling hint:

SDL_SetHint(SDL_HINT_RENDER_SCALE_QUALITY, "0");

https://wiki.libsdl.org/SDL_SetHint

The images will look best scaled by a whole number.