LIBGDX Smooth pixelart rendering (is this possible?)

Question

When I load a 16x16 pixelart image into my game and render it (upscaled in the spritebatch) it all looks fine. But when you make the window smaller the textures also get smaller (thats good) and their pixels get larger and smaller when moving (not good). Is there any way to make a small interpolation between the pixels? I tried texture.setFilter(Texture.TextureFilter.Linear, Texture.TextureFilter.Linear); but that makes the whole texture blury. I saw the online game diep.io which has a great execution on this (grid lines) and I wondered if I could do something similar in my game with libgdx.

My textures:

diep.io example

(Big frame)

(small frame)

The general technique would be to render the game to a FrameBuffer that is sized to be the same ratio as the screen, but small enough for 1:1 pixel to pixel ratio of your sprites. So in resize() you would dispose and create new FrameBuffers as the screen size changes. Then you draw the FrameBuffer's texture to the screen using an upscaling shader. There are various examples online of pixel art upscaling shaders that have different pros and cons. That's as much as I can help, because I've never actually done it myself. — Tenfour04
An article about it here: medium.com/@michelotti.matthew/rendering-pixel-art-c07a85d2dc43 — Tenfour04

Asecave Asecave · Accepted Answer · 2020-12-19T11:37:22

I managed to find a simple way to do this. The idea with the fbo was good and I thought about it a lot.

My solution is to just render everything to a FrameBuffer that is double the size of the frame (works best) and then downscale it to fit the frame. I basically let the downscale algorithm to the thing :).

Thank you Thenfour. Your comment really helped me on my thoughts even if my solution is a bit different.

Here is what I achieved:

no scale:

scale x2:

scale x8:

I think the double sized scale looks the smoothest so I'll go with that one.

LIBGDX Smooth pixelart rendering (is this possible?)

1 Answers