Bay 12 Games Forum

Dwarf Fortress => DF Modding => Utilities and 3rd Party Applications => Topic started by: mifki on July 09, 2014, 11:54:00 pm

Title: Tool to generate text tilesets
Post by: mifki on July 09, 2014, 11:54:00 pm
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 (https://www.google.com/fonts) collection (of course monospaced fonts are better). Font weight is a CSS font weight.
Title: Re: Tool to generate text-only tilesets for TwbT
Post by: Meph on July 10, 2014, 12:08:44 pm
I love it.

Thats all.
Title: Re: Tool to generate text-only tilesets for TwbT
Post by: Dirst on July 10, 2014, 12:30:05 pm
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 :)
Title: Re: Tool to generate text-only tilesets for TwbT
Post by: PeridexisErrant on July 14, 2014, 07:23:16 pm
Awesome!  I might use this if there's no 'native' option for a graphics pack. 
Title: Re: Tool to generate text-only tilesets for TwbT
Post by: Meph on July 28, 2014, 11:55:35 am
Mifki, could you please make a square version of this?
Title: Re: Tool to generate text-only tilesets for TwbT
Post by: therahedwig on July 28, 2014, 12:30:22 pm
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, :)
Title: Re: Tool to generate text-only tilesets for TwbT
Post by: mifki on July 28, 2014, 04:25:27 pm
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.
Title: Re: Tool to generate text tilesets
Post by: mifki on October 10, 2014, 06:43:02 am
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.

Title: Re: Tool to generate text tilesets
Post by: Meph on October 10, 2014, 11:15:07 am
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.
Title: Re: Tool to generate text tilesets
Post by: HaterSkater on October 10, 2014, 06:07:29 pm
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? :D), 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   :D
Spoiler (click to show/hide)
Title: Re: Tool to generate text tilesets
Post by: Meph on October 10, 2014, 08:54:03 pm
Windings?
Title: Re: Tool to generate text tilesets
Post by: HaterSkater on October 10, 2014, 10:36:51 pm
Oh god, i missed that i can use local fonts. :o
Suggestion here: can you add an option not to smooth resulting image and use nearest neighbour interpolation instead
Title: Re: Tool to generate text tilesets
Post by: mifki on October 10, 2014, 10:43:14 pm
Oh god, i missed that i can use local fonts. :o
Suggestion here: can you add an option not to smooth resulting image and use nearest neighbour interpolation instead

What do you mean? Font smoothing?
Title: Re: Tool to generate text tilesets
Post by: CLA on October 11, 2014, 04:58:20 am
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.



Quote from: mifki
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.

Quote from: HaterSkater
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.
Title: Re: Tool to generate text tilesets
Post by: mifki on October 11, 2014, 05:57:23 am
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.
Title: Re: Tool to generate text tilesets
Post by: CLA on October 11, 2014, 06:45:29 am
Why not the same?
As you said:
Quote
Do you usually have fonts that are not installed in your system?
I do, especially fonts that I'd want to use for a DF tileset.
And also:
Quote
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.

Ideally, a "normal", non-browser based application would have algorithms that are platform independent, and with the same settings, produce the same output. Not that I expect you to rewrite your entire tool to do that. There are already ways to do this good enough, and it's not really necessary for this.
Title: Re: Tool to generate text tilesets
Post by: mifki on October 11, 2014, 07:13:29 am
Ideally, a "normal", non-browser based application would have algorithms that are platform independent, and with the same settings, produce the same output.

In simplest case - no it wouldn't. Theoretically it's possible to include and use font engine like http://www.freetype.org instead of system text rendering calls, but it's an overkill for such a simple tool.

Anyway, I'll see what can be done about this in browser environment.
Title: Re: Tool to generate text tilesets
Post by: CLA on October 11, 2014, 07:26:12 am
Ideally, a "normal", non-browser based application would have algorithms that are platform independent, and with the same settings, produce the same output.

In simplest case - no it wouldn't. [...] it's an overkill for such a simple tool.
Yeah, I agree; that's what I meant with "it's not really necessary for this."
Edit:
Some more requests:
It's a bit annoying to keep remembering the exact system name of fonts you installed (especially if it just doesn't work because you forgot to restart your browser), so a drop down menu with all system fonts or some form of auto-completion would be nice to have.

Not all fonts have all glyphs of CP437, and the missing glyphs (which use glyphs from a default font?) look out of place with more extravagant fonts. Having tiles which use a fallback font get a different background or colored border in the preview window would help with recognizing these.
Title: Re: Tool to generate text tilesets
Post by: mifki on October 13, 2014, 05:46:28 am
It's a bit annoying to keep remembering the exact system name of fonts you installed (especially if it just doesn't work because you forgot to restart your browser), so a drop down menu with all system fonts or some form of auto-completion would be nice to have.

Not all fonts have all glyphs of CP437, and the missing glyphs (which use glyphs from a default font?) look out of place with more extravagant fonts. Having tiles which use a fallback font get a different background or colored border in the preview window would help with recognizing these.

I doubt any of this is possible in browser environment. I actually wasn't going to make a full-featured tool like this, it just was very easy and quick to make it in html/javascript, but it's deliberately simple and ugly.

However this gave me an idea of making it possible to manually mark characters to be rendered with another font, if the main one doesn't have some glyphs.
Title: Re: Tool to generate text tilesets
Post by: draeath on December 06, 2014, 08:28:56 pm
Bumpage. Also, here's DejaVu Sans Mono (http://dl.dropboxusercontent.com/u/45188701/TWBT__DejaVu-Mono.png), a wonderfully readable font.

(http://dl.dropboxusercontent.com/u/45188701/TWBT__DejaVu-Mono__PREVIEW.png)

THANK YOU!!!

Meph, I'd love it if you could include this in the MDF launcher. You should be good to do so. (http://dejavu-fonts.org/wiki/License)

Quote
{"fw":"normal","fn":"DejaVu Sans Mono","fs":14,"dx":3,"dy":-1,"cw":16,"ch":16,"cust":{"NaN":{"dx":0,"dy":0,"ds":0}}}
Those are the parameters I used. I then manually shifted the underscore up 2 pixels, because it just seemed lower than it should be.
Title: Re: Tool to generate text tilesets
Post by: Putnam on December 06, 2014, 08:33:14 pm
Looks like the MIT license, which basically means go for it, if you couldn't tell.
Title: Re: Tool to generate text tilesets
Post by: mifki on December 06, 2014, 10:27:56 pm
Bumpage. Also, here's DejaVu Sans Mono (http://dl.dropboxusercontent.com/u/45188701/TWBT__DejaVu-Mono.png), a wonderfully readable font.

Is this a square font intentionally or you have set cell width too big?
Btw, for me, Anonymous Pro (I think it's the default when you open the page) is the best so far.

(http://i.imgur.com/GCB8QXZ.png)
Title: Re: Tool to generate text tilesets
Post by: Meph on December 06, 2014, 10:32:20 pm
Bumpage. Also, here's DejaVu Sans Mono (http://dl.dropboxusercontent.com/u/45188701/TWBT__DejaVu-Mono.png), a wonderfully readable font.

Spoiler (click to show/hide)

THANK YOU!!!

Meph, I'd love it if you could include this in the MDF launcher. You should be good to do so. (http://dejavu-fonts.org/wiki/License)

Quote
{"fw":"normal","fn":"DejaVu Sans Mono","fs":14,"dx":3,"dy":-1,"cw":16,"ch":16,"cust":{"NaN":{"dx":0,"dy":0,"ds":0}}}
Those are the parameters I used. I then manually shifted the underscore up 2 pixels, because it just seemed lower than it should be.
Is noted. Downloaded it, next update will have it.
Title: Re: Tool to generate text tilesets
Post by: draeath on December 07, 2014, 08:57:34 am
Is this a square font intentionally or you have set cell width too big?
Btw, for me, Anonymous Pro (I think it's the default when you open the page) is the best so far.

(http://i.imgur.com/GCB8QXZ.png)

Intentional. My intention is to work with square-aspect ascii tilesets (like taffer) without breaking the 'feel' too much, while being more readable. That's not a bad font there either, but I'm just sentimentally attached to DejaVu (and it's bitstream ancestor)
Title: Re: Tool to generate text tilesets
Post by: Abadrausar on December 07, 2014, 11:50:55 am
This tiny util in HTML5 compliant standard code should be integrated not only in masterwork frontend but in every other DF frontend launcher out there, specially Starter Pack and variants...

Why? because if you combine this with TWBT overrides you have almost unlimited DF tilesets disponibles that can use every local font installed and the online chrome free font repo as a base... Awesome.

Now the only missing part is someone bold enought to recreate or compile  the DF TWBT overrides as an opentype font with some font editor to be able to change their size with the text without image artifacts...

Thanks to Mifki to make all this possible and to Meph to be the 1st implementer of a killer feature (sure that you have the vision to identify them before most of us  ;))



Spoiler (click to show/hide)
Title: Re: Tool to generate text tilesets
Post by: rmblr on December 07, 2014, 01:12:55 pm
Could someone post the link to the Anonymous Pro tileset?
Title: Re: Tool to generate text tilesets
Post by: Meph on December 07, 2014, 01:15:36 pm
{"fw":"normal","fn":"Anonymous Pro","fs":14,"dx":1,"dy":-2,"cw":10,"ch":16,"cust":{}}

Enter this at the bottom. Link to the generator: http://www.mifki.com/df/fontgen.html
Title: Re: Tool to generate text tilesets
Post by: rmblr on December 07, 2014, 02:04:42 pm
Ugh. Sorry, I see now that it uses Google Fonts.


Anyways, here's one with my favorite terminal font, Inconsolata (http://levien.com/type/myfonts/inconsolata.html)

Code: [Select]
{"fw":"normal","fn":"Inconsolata","fs":14,"dx":1,"dy":-2,"cw":14,"ch":16,"cust":{}}
Spoiler: Inconsolata Preview (click to show/hide)

Title: Re: Tool to generate text tilesets
Post by: Meph on December 07, 2014, 02:16:41 pm
Fixed that link for you.

Spoiler (click to show/hide)
Title: Re: Tool to generate text tilesets
Post by: brokegamer on December 10, 2014, 02:17:20 pm

This is neat.
Title: Re: Tool to generate text tilesets
Post by: PopTart on February 05, 2016, 02:03:26 am
Great tool! Is it possible to load local fonts on OS X?
Title: Re: Tool to generate text tilesets
Post by: mifki on February 05, 2016, 02:09:01 am
Great tool! Is it possible to load local fonts on OS X?

Yes, you should be able to specify local font names as they appear in Font Book.app. Just press enter after changing font name.
Title: Re: Tool to generate text tilesets
Post by: PopTart on February 05, 2016, 03:45:01 am
Works good for all fonts except this one called G.B.BOOT Regular. Maybe the punctuation is messing it up.
Title: Re: Tool to generate text tilesets
Post by: PopTart on February 05, 2016, 03:49:35 am
Man. I really like a tileset with Interstate.
Title: Re: Tool to generate text tilesets
Post by: daagar on June 17, 2016, 09:25:15 pm
Didn't really follow the need for this tool, always using just whatever font came with the tilesets. Ran this over Ubuntu Mono at 20pt, and am completely thrilled with the result.

Title: Re: Tool to generate text tilesets
Post by: Moogie on August 06, 2017, 09:18:25 pm
(Win7 x64) Could not get this tool to work.

When attempting to load a locally installed font,

-on Firefox (54.0.1 x32): it does not detect the font, but does allow the image to be downloaded when you click the link (but you'll just get a default font, not the one specified).
-on IE (11.0.9600.18665): it detects the correct font, but when you click the download link the page just loads eternally and doesn't give you the file.

The font is called "SMW2: Yoshi's Island" and is utterly adorable. It's the font used for the JollyBastion tileset.

Thank you for creating this tool, but I am sad that it isn't working for me. :( I don't have Chrome.

Title: Re: Tool to generate text tilesets
Post by: mifki on August 06, 2017, 09:43:40 pm
-on Firefox (54.0.1 x32): it does not detect the font, but does allow the image to be downloaded when you click the link (but you'll just get a default font, not the one specified).
-on IE (11.0.9600.18665): it detects the correct font, but when you click the download link the page just loads eternally and doesn't give you the file.

Try again now in FF. First set the font name, it won't appear straight away, change font size or press any button to update preview.
Title: Re: Tool to generate text tilesets
Post by: Moogie on August 06, 2017, 09:48:05 pm
Oh! You absolute star, whatever you did fixed the issue. It worked. Thank you so much! :D