Libgdx Maps Flickering - How to easily add Border/Padding to existing Tileset

Question

I'm having some well know problem with Libgdx and Tiled Maps, where my map flickers when the player moves (the camera follows the player).

I have searched for the answer and find out that all maps do that, and to fix that you must pack your sprites with 4 padding, 2 border and duplicate border (or extruded border in some tools). With texturepacker that comes with libgdx, you can pack your images, as long as you split then first, and add the padding/border. But, they are randomly placed in the tileset, making it harder to make maps (you need to see tiles grouped in original order)

My problem is that i'm trying to do that for some days now and never got it done. I have one input tileset and it is 32x32px. So what i try so far is:

The closest i got is: unpacked all 32x32 images from tileset and packed then again using some tool. First problem is that all image unpacker (spliter) that i used dont apply transparence to background, and some tileset are extremely detailed, making it too hard to get it right. Second problem is that when i want to pack it, most tools dont provide order, so i lose the tileset configuration (which is realy important when making the map).

Can someone please tell me how to do it without that much of effort? Do i really need to lose days of work to make a tileset look good in Libgdx?

I just need to add border/padding to the tileset, holding its original positions.

I'm sure that there is something i'm missing, it can't be that hard.

Thanks

Answer 1

Ok so the easier way i find so far was to use a plugin for the Gimp.

registry.gimp.org/node/26044

It allows you to add border, Gutter(in that case, is the dupplicatePadding or Extrude of other tools), and also remove that.

Works like a charm and got the job done in one step. To use the plugin, add it to your folder (in windows, User/gimp/scripts) or check documentation.

So in tiled configuration i use

In the Gimp plugin i use this configuration (Menu -> Filters -> Sprite Sheet -> Add Gutter)

Answer 2

I also have the same exact situation as you. Here's what I did step by step:

1. Split/Unpack the sprite sheet into an individual image using Alferd-Spritesheet-Unpacker.The process will also apply transparency to the background. You can use any software you like as long as it does the job.

2. Second problem is that when i want to pack it, most tools dont provide order, so i loose the tileset configuration

Before repacking, you rename each image by Alphabetical Order in that way the Texture Packer will order the images accordingly by Alphabetical order.

Ex: walk_1.png, walk_2.png, walk_3.png and so on..

3. Use LibGDX Texture Packer (there's a GUI version of this one) to repack the images. The trick here is to add Padding of the image as shown below.

4. This is the most important step. Now that you've finished repacking your images. Add the sprite sheet into the Tileset and configure the Margin and Spacing. Don't worry if your sprites have no padding from the start. The TiledMap will configure it. Now it's done.