Adventure Game Studio

AGS Support => Advanced Technical Forum => Topic started by: Amir on Sat 26/02/2022 10:24:55

Title: Anti-aliasing WFN Font from TTF
Post by: Amir on Sat 26/02/2022 10:24:55
Hello,

Is it possible to get an anti-aliased WFN font from a TTF like Detective Gallo's font? Khris and Rulaman's tools are great but don't support anti-aliasing, the font looks a bit pixelated with corners and not round.

(https://i.ibb.co/SPKrtxV/font.png) (https://ibb.co/PN5QcY1)
Title: Re: Anti-aliasing WFN Font from TTF
Post by: eri0o on Sat 26/02/2022 10:47:22
I don't understand much, but why not just use ttf font? Which game resolution you have? And which is the outline size?

Also, in the particular screenshot both look aliased. :/
Title: Re: Anti-aliasing WFN Font from TTF
Post by: Amir on Sat 26/02/2022 11:06:11
Quote from: eri0o on Sat 26/02/2022 10:47:22
I don't understand much, but why not just use ttf font? Which game resolution you have? And which is the outline size?

Also, in the particular screenshot both look aliased. :/

1280 x 720. The outline of TTF is very thin, in some places its unreadable. I need thicker outline.

yeah a little bit anti-aliased but not quite, as I said, u can see corners and pixelated places. Not quite round.
the font looks like in the picture. the letters are round with no corners, not like the WFN font in the game. (this is made by Khri's tool)


(https://i.ibb.co/M5tHRgw/Font.png) (https://ibb.co/prMT31V)



Title: Re: Anti-aliasing WFN Font from TTF
Post by: eri0o on Sat 26/02/2022 11:48:11
The way AGS makes the auto-outline is just not good for high resolution usage (but it's good for pixel fonts, so changes would mean having two different strategies for auto outline), and it should partially responsible for such effect. This can be fixed more easily in 4.0 but in AGS3 we are probably going to keep it the way it is due to compatibility issues - age has around 17years of binary compatibility.

I recommend you instead to use an outline font - AGS3 supports this, just make a font for the outline externally and load it in ags.

Or with a plugin use the spritefont plugin - not 100% on this, but I think spritefont plugin is also embedded in the Android and Web builds, if one knows a spritefont game try running in one of those ports and see if it works.
Title: Re: Anti-aliasing WFN Font from TTF
Post by: Amir on Sat 26/02/2022 12:54:45
Quote from: eri0o on Sat 26/02/2022 11:48:11
The way AGS makes the auto-outline is just not good for high resolution usage (but it's good for pixel fonts, so changes would mean having two different strategies for auto outline), and it should partially responsible for such effect. This can be fixed more easily in 4.0 but in AGS3 we are probably going to keep it the way it is due to compatibility issues - age has around 17years of binary compatibility.

I recommend you instead to use an outline font - AGS3 supports this, just make a font for the outline externally and load it in ags.

Or with a plugin use the spritefont plugin - not 100% on this, but I think spritefont plugin is also embedded in the Android and Web builds, if one knows a spritefont game try running in one of those ports and see if it works.

Hmmmmm Do u mean by the first method that I create a TTF with the programs or tools by drawing all the characters, then load this TTF in ags as outline font and change in ags outlinestyle to the number of this loaded font?
Title: Re: Anti-aliasing WFN Font from TTF
Post by: eri0o on Sat 26/02/2022 16:39:23
uhm could you share that font? (had an idea here..)
Title: Re: Anti-aliasing WFN Font from TTF
Post by: Amir on Sat 26/02/2022 16:55:51
Quote from: eri0o on Sat 26/02/2022 16:39:23
uhm could you share that font? (had an idea here..)

Of course, I am excited  ;-D
https://www.1001fonts.com/berkshire-swash-font.html (https://www.1001fonts.com/berkshire-swash-font.html)
Title: Re: Anti-aliasing WFN Font from TTF
Post by: Snarky on Sat 26/02/2022 17:02:01
Quote from: eri0o on Sat 26/02/2022 10:47:22
Also, in the particular screenshot both look aliased. :/

ITYM anti-aliased?
Title: Re: Anti-aliasing WFN Font from TTF
Post by: Crimson Wizard on Sun 27/02/2022 06:18:31
Quote from: Amir on Sat 26/02/2022 11:06:11
1280 x 720. The outline of TTF is very thin, in some places its unreadable. I need thicker outline.

For the information, AGS 3.6.0 already supports font outline thickness and outline style (square/round) settings.
Title: Re: Anti-aliasing WFN Font from TTF
Post by: Amir on Sun 27/02/2022 09:01:49
Quote from: Snarky on Sat 26/02/2022 17:02:01
Quote from: eri0o on Sat 26/02/2022 10:47:22
Also, in the particular screenshot both look aliased. :/

ITYM anti-aliased?

Yes I think he meant that.

Quote from: Crimson Wizard on Sun 27/02/2022 06:18:31
Quote from: Amir on Sat 26/02/2022 11:06:11
1280 x 720. The outline of TTF is very thin, in some places its unreadable. I need thicker outline.

For the information, AGS 3.6.0 already supports font outline thickness and outline style (square/round) settings.

Oh cool, I didn't know that, I can try it but I dont wanna risk it because my game is commercial. I'd rather stick with 3.5.1. Maybe eri0o has really a good idea  :-X
Title: Re: Anti-aliasing WFN Font from TTF
Post by: Snarky on Wed 02/03/2022 14:35:56
It's more work, but the thicker text outline feature in AGS 3.6 (or something very much like it) can be achieved through a script function (https://www.adventuregamestudio.co.uk/forums/index.php?topic=55544.0) in 3.5.1.
Title: Re: Anti-aliasing WFN Font from TTF
Post by: eri0o on Mon 21/03/2022 01:20:59
If using script, I recommend lowering the transparency of each draw to 25% and then achieving it with only 1 thickness actually, in aliased fonts it gives a nicer result.

I meant to investigate this and looking into scripting but also the spritefont plugin but other things took priority. :/
Title: Re: Anti-aliasing WFN Font from TTF
Post by: Snarky on Mon 21/03/2022 06:14:17
Quote from: eri0o on Mon 21/03/2022 01:20:59
If using script, I recommend lowering the transparency of each draw to 25% and then achieving it with only 1 thickness actually, in aliased fonts it gives a nicer result.

Could you explain a bit more what you're talking about here? What do you mean by "achieving it with only 1 thickness"?

My best guess is that you're talking about some kind of automatic anti-aliasing where you soften the edges (of the outline?) by drawing a copy along the edge with transparency?
Title: Re: Anti-aliasing WFN Font from TTF
Post by: Amir on Mon 16/05/2022 11:11:33
Quote from: Snarky on Wed 02/03/2022 14:35:56
It's more work, but the thicker text outline feature in AGS 3.6 (or something very much like it) can be achieved through a script function (https://www.adventuregamestudio.co.uk/forums/index.php?topic=55544.0) in 3.5.1.

I tried it in 3.6.0. It looks wonderful and exactly how I want it.
I don't know why I ignored ur comment and then forgot about it but I just came up with this idea too that you do it from 3.6.0 manually in 3.5.1 and now I've come back to ur comment.
I will try the code, but where should I put it? I only need outline thichness 2.
Title: Re: Anti-aliasing WFN Font from TTF
Post by: Snarky on Mon 16/05/2022 11:19:09
Well, it depends on what you want to use it for. To display some text on an overlay is pretty easy, but if you want to use it for all the game dialog you need to hook into or recreate a lot of the AGS speech system, and that gets rather complicated. It's essentially what the SpeechBubble module does, so you could potentially use that, just without the bubble. (It should be possible to set the bubble background and outline to transparent, but I have never actually tried it.)

If the built-in support in 3.6.0 works for you, it might be easier to just use that version. I think it's getting close to official release now.
Title: Re: Anti-aliasing WFN Font from TTF
Post by: Amir on Mon 16/05/2022 15:46:44
Quote from: Snarky on Mon 16/05/2022 11:19:09
Well, it depends on what you want to use it for. To display some text on an overlay is pretty easy, but if you want to use it for all the game dialog you need to hook into or recreate a lot of the AGS speech system, and that gets rather complicated. It's essentially what the SpeechBubble module does, so you could potentially use that, just without the bubble. (It should be possible to set the bubble background and outline to transparent, but I have never actually tried it.)

If the built-in support in 3.6.0 works for you, it might be easier to just use that version. I think it's getting close to official release now.


Ok, I just tried the module, hoping to get thicker outline, but I got errors. eAlignCentre not defined, I changed it to eAlignMiddleCenter and now Im getting another error SpeechBubble_0.8.0.asc(1050): Error (line 1050): '.ViewportWidth' is not a public member of 'System'. Are you sure you spelt it correctly (remember, capital letters are important)?

I tried ur module once in AGS 3.4.3 and I had no problems.

Title: Re: Anti-aliasing WFN Font from TTF
Post by: Amir on Mon 16/05/2022 15:57:26
QuoteIf the built-in support in 3.6.0 works for you, it might be easier to just use that version. I think it's getting close to official release now.

In case of doubt I will use 3.6.0.
I don't dare that because I don't read the updates and news, I'm not sure this version is secure, but as I said in case of doubt.
Title: Re: Anti-aliasing WFN Font from TTF
Post by: Snarky on Mon 16/05/2022 16:46:02
Yeah, 3.5 broke all existing code that used System.ViewPortWidth (which was a lot). You can either set a script compatibility setting on the project, or you can make the updates Dave Gilbert lists in the last post on the module thread (https://www.adventuregamestudio.co.uk/forums/index.php?topic=55542.msg636640156#msg636640156).
Title: Re: Anti-aliasing WFN Font from TTF
Post by: newwaveburritos on Mon 16/05/2022 16:47:47
I followed those instructions and the speech bubble module is working great in 3.6.0.23
Title: Re: Anti-aliasing WFN Font from TTF
Post by: Amir on Mon 16/05/2022 19:47:43
Quote from: Snarky on Mon 16/05/2022 16:46:02
Yeah, 3.5 broke all existing code that used System.ViewPortWidth (which was a lot). You can either set a script compatibility setting on the project, or you can make the updates Dave Gilbert lists in the last post on the module thread (https://www.adventuregamestudio.co.uk/forums/index.php?topic=55542.msg636640156#msg636640156).

Quote from: newwaveburritos on Mon 16/05/2022 16:47:47
I followed those instructions and the speech bubble module is working great in 3.6.0.23

Ok thank you both, I got it, now it's thicker 2 pixels, but what about action.Text  ???  any idea how to get it the same outline too?
Title: Re: Anti-aliasing WFN Font from TTF
Post by: Snarky on Mon 16/05/2022 22:25:56
I'm not sure what action.Text is, but basically the function I linked draws text onto a sprite you have to supply. (It's actually a little bit more complicated than that: you have to create a DynamicSprite and then grab its DrawingSurface, which is what the function actually draws on.) Then you set that sprite as e.g. a button graphic, a GUI background, a Graphic Overlay, etc. in order to display it. You can see an example in this thread (https://www.adventuregamestudio.co.uk/forums/index.php?topic=59107.msg636635835#msg636635835).

This means, specifically, that if you're currently using a Label to display the text, you'll have to change it a little, since you're rendering a sprite with the text instead. If the text is the only thing on this GUI, I would suggest simply setting the GUI background graphic to this sprite. If there are multiple things on the GUI I would replace the label by a button and set its graphic to the sprite.
Title: Re: Anti-aliasing WFN Font from TTF
Post by: Amir on Tue 17/05/2022 15:13:41
Quote from: Snarky on Mon 16/05/2022 22:25:56
I'm not sure what action.Text is, but basically the function I linked draws text onto a sprite you have to supply. (It's actually a little bit more complicated than that: you have to create a DynamicSprite and then grab its DrawingSurface, which is what the function actually draws on.) Then you set that sprite as e.g. a button graphic, a GUI background, a Graphic Overlay, etc. in order to display it. You can see an example in this thread (https://www.adventuregamestudio.co.uk/forums/index.php?topic=59107.msg636635835#msg636635835).

This means, specifically, that if you're currently using a Label to display the text, you'll have to change it a little, since you're rendering a sprite with the text instead. If the text is the only thing on this GUI, I would suggest simply setting the GUI background graphic to this sprite. If there are multiple things on the GUI I would replace the label by a button and set its graphic to the sprite.

Thank u for the explanation but I think I'll do it differently which I like better. A gui with background and border over hotspots with the mouse cursor. But I have a problem. Can I post it here or in a new thread?


Edit: No problem anymore, I fixed it.  :)