Libgdx Pixellated GUI Effect

Question

In LibGDX, I am currently trying to achieve the effect of a pixellated GUI, meaning the buttons are pixellated, like an 8-bit theme.

When I make my GUI elements, such as a TextButton, I am using images that are small, say 34x16 pixels, but I am rendering them on a large resolution like 1920x1080. What is the best way to render such a small image at a high resolution?

My thoughts were to use stage.setViewport(WIDTH,HEIGHT), and set the width and height to a scaled down resolution, so the gui elements wouldn't be so big. This works, however when adding elements things go wrong.

This my stage/table currently, using a scaled down resolution. I am adding widgets using to the table like this:

    table.add(playButton);
    table.row();
    table.add(title);

but as you can see, the table.row() makes a row that is much too large, perhaps a row fit for a larger resolution. Is there any way to change the gap that is made by the row? I would have thought that the gap would be zero, and by using table.add().pad() you could change the gap, but I am not doing any of that.

Any help would be greatly appreciated.

Answer 1

Ninepatch

This is a common issue in all apps. To overcome this, images which can be safely resized in parts are used. they are called ninepatches.

Here is a nice Tutorial about using them in libgdx.

---

Distance Field Fonts

Although you haven't mentioned it here, you'd also find font sizing (pixellated fonts) as an issue. For that Distance Field Fonts are used.

Hope this helps.

Answer 2

I would say don't worry about scaling them up and making the virtual resolution bigger. If you want to see picture still pixelated when you scale it use Texture filter. For your case you want to use Nearest filter. use it like this:

yourTexture.setFilter(TextureFilter.Nearest, TextureFilter.Nearest);

where yourTexture is the texture that you have all your bitmaps and skin elements on. If you are using texturePacker than you can specify the filter before packing too. Or just open the .pack file and on the top you will see filtering options, and edit those to Nearest.