Forum - DDraceNetwork

How to make your tilesets look crisp
written by Ravie

I noticed many tilesets have a common problem:
They have blurred straight details, some to a lesser degree, but still. It may not be a big flaw, but fixing it certainly gives your tiles a more polished, professional look.

Here's an example of what I mean: The solution is quite simple, however you have to keep it in mind all throughout and even before you
start making the tileset.

Before you get started you must decide whether you want to use tileset_borderadd later, in which case you make
the canvas 960x960px, if not, keep it at 1024x1024px, you cannot change the canvas size after you are done
or the solution won't work.
When setting up your canvas for the tileset apply a 1px by 1px grid .
If you use Inkscape like I do you can do it by going to File > Document Properties > Grids > New.
If you use another program I'm sure you can do the same thing, you just have know/figure out how to set a 1px grid in your program of choice.
Snap all straight lines/rectangle edges to the pixel grid, basically like this: That way the program renders perfect edges instead of anti-aliased, blurry ones.

I hope this tutorial helped somebody and was clear
If not, at least I had fun writing it

Thank you for writing this, and I hope everyone will read and apply it This is super important to get a good tileset.

I just add one point: never use "borderfix" tool. Otherwise, all alignments to pixel grid will be lost. As Ravie said, only "borderadd" should be used.

Actually tileset_borderfix works just fine as long as you stick to the 1024x1024 dimensions and follow all the other steps
I made this 64x64 tile and used tileset_borderfix:

You are write, the tool don't use interpolation to reduce the size of each cell. Instead, you loose completly one row and one column (result and original file):

So, if you already made the tileset in 1024x1024 borderfix is acceptable, but borderadd works better, am I right?

From what I've understood, "borderadd" don't touch your image. It only add a border around each tile, so it's "safe". "borderfix" reduce the size of your image (1px around each tile), so you lost some pixels, and then add the border. For me, it's not acceptable that you lost pixels, so I don't recommend at all the use of "borderfix". I even prefer to apply borderadd on 1024x1024 image and then get an image of 1088x1088 pixels that just works fine in game.
That's just my point of view ^^

Thanks for this tutorial, really appreciate your recent work (including all the skins and tilesets) :3
Also thanks for the additional tips, necropotame :) The same goes to you!

Added heading and linked it in the list.

Thx necropotame I never fully understood how these tools work, I just knew it's best to use borderadd

For me it looks not blured, it look more natural insted of this white stroke

It's not about natural or not. When you want to draw a rectangle, you expect to have a sharp rectangle. But if it's not aligned with the grid, you obtain something else. That's what Ravie try to solve with this tutorial. You can found that same problematic in this page made by Adobe, and in particular the first illustration:

In the above image, only the position of the rectangle is different. You see that unaligned elements lead to blured artefacts