How to make your tilesets look crisp
Posted: Tue Feb 28, 2017 12:26 pm
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
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:
SpoilerShow
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:
SpoilerShow
I hope this tutorial helped somebody and was clear
If not, at least I had fun writing it