Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[mifki]

Text tilesets for TwbT do not have to contain any special hand-drawn symbols, so it should be possible to use just any font as is. But I couldn't find any tool to generate tilesets from fonts, so here it is. Can also be used as a starting point for creating customised ASCII tilesets.

http://www.mifki.com/df/fontgen.html

Works best and fonts look best in Chrome. In the font name field you can specify any font available locally or any font from Google Fonts collection (of course monospaced fonts are better). Font weight is a CSS font weight.

[Meph]

I love it.

Thats all.

[Dirst]

This is awesome, thanks mifki!

Now if you find your head constantly tilted to the right, you can use an italic Courier font and see the game properly

[PeridexisErrant]

Awesome!  I might use this if there's no 'native' option for a graphics pack. 

[Meph]

Mifki, could you please make a square version of this?

[therahedwig]

Mifki, could you please make a square version of this?

Change cw:10; in the bottom to decide cell-width.
Like, for example:

{"fw":"normal","fn":"Berkshire Swash","fs":14,"dx":3,"dy":-1,"cw":18,"ch":18}

This won't change the wall-tiles properly, but it's enough for a TwbT font tileset.

This is useful,

[mifki]

Mifki, could you please make a square version of this?

Change cw:10; in the bottom to decide cell-width.

Btw, there are buttons >><< and <<>> for this as well.

[mifki]

I've updated the tool.

Now it's possible to move and resize individual characters (click on a character to select it).

Just paste this (use select button below)

Code: [Select]

{"fw":"normal","fn":"Anonymous Pro","fs":14,"dx":1,"dy":-2,"cw":10,"ch":16,"cust":{"1":{"dx":-1,"dy":0,"ds":-2},"2":{"dx":-1,"dy":0,"ds":-2},"5":{"dx":-1,"dy":0,"ds":-1},"6":{"dx":0,"dy":0,"ds":0},"10":{"dx":-1,"dy":0,"ds":0},"11":{"dx":-1,"dy":0,"ds":-2},"12":{"dx":-3,"dy":0,"ds":-1},"14":{"dx":-3,"dy":0,"ds":-3},"15":{"dx":-1,"dy":0,"ds":-4},"16":{"dx":-1,"dy":0,"ds":-4},"17":{"dx":0,"dy":0,"ds":-1},"30":{"dx":-1,"dy":0,"ds":-4},"31":{"dx":-1,"dy":0,"ds":-5},"32":{"dx":0,"dy":0,"ds":0},"59":{"dx":0,"dy":0,"ds":0},"158":{"dx":0,"dy":0,"ds":-3},"247":{"dx":0,"dy":0,"ds":-2},"251":{"dx":0,"dy":0,"ds":-3}}}
into the import/export field to see the difference. Oh yes, use Chrome, it renders text better and I actually didn't test much in other browsers.

I now expect creation of nice text fonts of various sizes for twbt so that people won't complain about ugly curses font anymore.

[Meph]

A suggestions: Add a link to this thread from the first post in the TwbT thread. Or, considering how small this thread is, just copy all this here into the TwbT thread.

My reasoning is that this thread here is rather inactive, partly because its harder to find (?), so it might be better to keep everthing TwbT in one place.

[HaterSkater]

A suggestions: Add a link to this thread from the first post in the TwbT thread. Or, considering how small this thread is, just copy all this here into the TwbT thread.

My reasoning is that this thread here is rather inactive, partly because its harder to find (?), so it might be better to keep everthing TwbT in one place.

^^^This^^^

That tool is absolutely amazing

upd: Oh, btw i wanted here to make fun of my brand new Lobster tileset (any google font, right? ), just to realise that it won't download image via Safari
upd2: works, if instead of pressing "download" one will right-button-click and "download linked file"

that's hilarious   

Spoiler (click to show/hide)

[Meph]

Windings?

[HaterSkater]

Oh god, i missed that i can use local fonts.
Suggestion here: can you add an option not to smooth resulting image and use nearest neighbour interpolation instead

[mifki]

Oh god, i missed that i can use local fonts.
Suggestion here: can you add an option not to smooth resulting image and use nearest neighbour interpolation instead

What do you mean? Font smoothing?

[CLA]

Man, this is useful.
Any chance of an standalone/offline version? I'd much prefer having a small program in a folder I can point to a ttf file instead of using system fonts with an online application.
I could download the html and use it without internet of course, but it's just not the same.

What do you mean? Font smoothing?

He's talking about the resizing/rasterizing algorithm you use. For some fonts, nearest neighbor (i.e. no form of aliasing or smoothing is applied) might produce better results.
In general, I think it would be great to have an option to export as eps (vector file) and do the resizing yourself.

can you add an option not to smooth resulting image and use nearest neighbour interpolation instead

You could just set the tile size to something like 100px and adjust the font size accordingly. Export that image and resize it with NN in your favorite bitmap editing program.
I played around with a few resizing algorithms, but some fonts just don't work that great with only a few pixels, no matter what you use to resize.
I think first and foremost, this tool is useful to create a template from which you can work; With a lot of fonts, I wouldn't say that the output is already very usable, and you definitely need to do some manual redrawing.

Another request:
Allow selecting multiple tiles with shift clicking so you can move them together.

[mifki]

Man, this is useful.
Any chance of an standalone/offline version? I'd much prefer having a small program in a folder I can point to a ttf file instead of using system fonts with an online application.
I could download the html and use it without internet of course, but it's just not the same.

Why not the same? It works perfectly when opened in a browser from local folder. If you're offline you'll be able to use only system fonts, if you're online you'll be able to use Google fonts as well. Theoretically it may be possible to support loading ttf fonts that are not installed in the system, but I need to try. Do you usually have fonts that are not installed in your system?

He's talking about the resizing/rasterizing algorithm you use. For some fonts, nearest neighbor (i.e. no form of aliasing or smoothing is applied) might produce better results.
In general, I think it would be great to have an option to export as eps (vector file) and do the resizing yourself.

I don't understand because I'm not doing any resizing. I just take an image with size based on the specified cell width and height, and render characters onto it (well not me manually, the browser renders).

Different systems and browsers are using different algorithms of smoothing fonts when rendering text that may work better or worse for some fonts. I'll see whether I can control this in html.