How to make your tilesets look crisp

Guides about mapping and everything Teeworlds related.

Post Reply
User avatar
Ravie
User
Posts: 377
Joined: Sat Feb 04, 2017 5:04 am
Player profile: https://ddnet.tw/players/Ravie/
Mapper profile: https://ddnet.tw/mappers/Ravie/
Clan: TOP

How to make your tilesets look crisp

Post by Ravie »

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:
SpoilerShow
pro sol.png
pro sol.png (22.33 KiB) Viewed 2744 times
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:
SpoilerShow
grid n stuff.png
grid n stuff.png (20.67 KiB) Viewed 2744 times
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 :lol:
Image
necropotame
User
Posts: 61
Joined: Fri Jul 15, 2016 11:35 pm

Re: How to make your tilesets look crisp

Post by necropotame »

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.
User avatar
Ravie
User
Posts: 377
Joined: Sat Feb 04, 2017 5:04 am
Player profile: https://ddnet.tw/players/Ravie/
Mapper profile: https://ddnet.tw/mappers/Ravie/
Clan: TOP

Re: How to make your tilesets look crisp

Post by Ravie »

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:
SpoilerShow
testblock.png
testblock.png (5.71 KiB) Viewed 2695 times
Image
necropotame
User
Posts: 61
Joined: Fri Jul 15, 2016 11:35 pm

Re: How to make your tilesets look crisp

Post by necropotame »

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):
borderfix.png
borderfix.png (10.57 KiB) Viewed 2686 times
User avatar
Ravie
User
Posts: 377
Joined: Sat Feb 04, 2017 5:04 am
Player profile: https://ddnet.tw/players/Ravie/
Mapper profile: https://ddnet.tw/mappers/Ravie/
Clan: TOP

Re: How to make your tilesets look crisp

Post by Ravie »

So, if you already made the tileset in 1024x1024 borderfix is acceptable, but borderadd works better, am I right?
Image
necropotame
User
Posts: 61
Joined: Fri Jul 15, 2016 11:35 pm

Re: How to make your tilesets look crisp

Post by necropotame »

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 ^^
Index
User
Posts: 1087
Joined: Mon May 05, 2014 7:30 pm
Clan: Eagle

Re: How to make your tilesets look crisp

Post by Index »

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.
User avatar
Ravie
User
Posts: 377
Joined: Sat Feb 04, 2017 5:04 am
Player profile: https://ddnet.tw/players/Ravie/
Mapper profile: https://ddnet.tw/mappers/Ravie/
Clan: TOP

Re: How to make your tilesets look crisp

Post by Ravie »

Thx necropotame I never fully understood how these tools work, I just knew it's best to use borderadd :)
Image
Ninjed
User
Posts: 1300
Joined: Thu Oct 01, 2015 7:00 pm
Player profile: https://ddnet.tw/players/Le-32-Petit-32-Prince/
Mapper profile: https://ddnet.tw/mappers/Ninjed

Re: How to make your tilesets look crisp

Post by Ninjed »

For me it looks not blured, it look more natural insted of this white stroke
The Real One!
necropotame
User
Posts: 61
Joined: Fri Jul 15, 2016 11:35 pm

Re: How to make your tilesets look crisp

Post by necropotame »

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:
Image
In the above image, only the position of the rectangle is different. You see that unaligned elements lead to blured artefacts
Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests