How to make your tilesets look crisp

Guides about mapping and everything Teeworlds related.

Post Reply
User avatar
Ravie
User
Posts: 373
Joined: Sat Feb 04, 2017 5:04 am
Player profile: Ravie
Mapper profile: Ravie
Clan: TOP

How to make your tilesets look crisp

Post by Ravie » 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:
SpoilerShow
pro sol.png
pro sol.png (22.33 KiB) Viewed 1535 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 1535 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 » Wed Mar 01, 2017 3:39 pm

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: 373
Joined: Sat Feb 04, 2017 5:04 am
Player profile: Ravie
Mapper profile: Ravie
Clan: TOP

Re: How to make your tilesets look crisp

Post by Ravie » Wed Mar 01, 2017 4:38 pm

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 1486 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 » Wed Mar 01, 2017 5:17 pm

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 1477 times

User avatar
Ravie
User
Posts: 373
Joined: Sat Feb 04, 2017 5:04 am
Player profile: Ravie
Mapper profile: Ravie
Clan: TOP

Re: How to make your tilesets look crisp

Post by Ravie » Wed Mar 01, 2017 5:37 pm

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 » Wed Mar 01, 2017 5:42 pm

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: 1069
Joined: Mon May 05, 2014 7:30 pm
Player profile: ٭ıƞdex'<3
Mapper profile: ٭ıƞdex'<3
Clan: Eagle

Re: How to make your tilesets look crisp

Post by Index » Wed Mar 01, 2017 11:16 pm

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: 373
Joined: Sat Feb 04, 2017 5:04 am
Player profile: Ravie
Mapper profile: Ravie
Clan: TOP

Re: How to make your tilesets look crisp

Post by Ravie » Thu Mar 02, 2017 1:01 am

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: Le Petit Prince
Mapper profile: Ninjed

Re: How to make your tilesets look crisp

Post by Ninjed » Thu Mar 02, 2017 10:35 am

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 » Thu Mar 02, 2017 12:09 pm

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: Bing [Bot] and 1 guest