Anti-aliasing WFN Font from TTF

Started by Amir, Sat 26/02/2022 10:24:55

Previous topic - Next topic

Amir

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.

Truly, truly, I say to you, blessed are those who play adventure games, for theirs is the kingdom of heaven.

eri0o

#1
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. :/

Amir

#2
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)






Truly, truly, I say to you, blessed are those who play adventure games, for theirs is the kingdom of heaven.

eri0o

#3
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.

Amir

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?
Truly, truly, I say to you, blessed are those who play adventure games, for theirs is the kingdom of heaven.

eri0o

uhm could you share that font? (had an idea here..)

Amir

Truly, truly, I say to you, blessed are those who play adventure games, for theirs is the kingdom of heaven.

Snarky

Quote from: eri0o on Sat 26/02/2022 10:47:22
Also, in the particular screenshot both look aliased. :/

ITYM anti-aliased?

Crimson Wizard

#8
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.

Amir

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
Truly, truly, I say to you, blessed are those who play adventure games, for theirs is the kingdom of heaven.

Snarky

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 in 3.5.1.

eri0o

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. :/

Snarky

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?

Amir

#13
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 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.
Truly, truly, I say to you, blessed are those who play adventure games, for theirs is the kingdom of heaven.

Snarky

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.

Amir

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.

Truly, truly, I say to you, blessed are those who play adventure games, for theirs is the kingdom of heaven.

Amir

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.
Truly, truly, I say to you, blessed are those who play adventure games, for theirs is the kingdom of heaven.

Snarky

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.

newwaveburritos

I followed those instructions and the speech bubble module is working great in 3.6.0.23

Amir

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.

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?
Truly, truly, I say to you, blessed are those who play adventure games, for theirs is the kingdom of heaven.

Snarky

#20
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.

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.

Amir

#21
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.

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.  :)
Truly, truly, I say to you, blessed are those who play adventure games, for theirs is the kingdom of heaven.

SMF spam blocked by CleanTalk