Fonts deal

Previous topic - Next topic

DmitryK

Hi all

Tryind to use fonts produced with a native GLBasic font tool DiNGSFont and after some external font builders usage I finally IMHO descovered a good solution to get nice looking fonts:
1. Make a font in DiNGSFont with ANY proper background color,  with anti alias (and shadow or outline if you want)
2. Save a file as .png
3. Open the file in GIMP (I have 2.6.6) and convert your image's background color to alpha (color\color to alpha-channel), save it to the same .png (or another if you like :) )

that's all :)

Dmitry
Our life is just a Game!

DmitryK

maybe..., but I'm not a theorist and my goal was a result (good looking fonts inside GLBasic) and I've got it :)
Our life is just a Game!

MrTAToad

I dont see why just enabling anti-aliasing wouldn't work...

erico

I figure saving a TGA+alpha (32bits) from photoshop does not work on glbasic, either mask.
Using one layer with no background, saving png will work.

You usually have 2 types of alphas, premultiplied with a color or straight.
I guess glbasic does better on the premultiplied with white...
...but I will have to check it.

Moru

Try the fonts on both a black and a white background, if both looks smooth, you have found a simple way of making the alphachannel work properly.

Moebius

#5
From my experience it works.  I've done it in Photoshop though so it's a bit more complicated than "Click convert colour to alpha"  :(
With Photoshop at least you should must use white text on a black background for the alpha to come out right, but you can effectively choose your font colour later.  GIMP might scale the alpha to a 0-100% range depending on what the background and foreground colours are, but I don't have it so I can't know...
...Anyway this is how I do it - a long way of effectively using the image as a mask to a coloured layer (because I have trouble using masks):

-> Open antialiased font image in Photoshop.
-> Select all (Ctrl-A) then Copy (Ctrl-C).
-> Go into channels.  Create a new channel.
-> Select the channel.  Paste.
-> Click on RGB in channels to return to normal editing.
-> Go back to layers.  Create a new layer.  Fill layer with whatever colour you want your text to be.
-> Delete the font image layer that you opened at the beginning (Double click it to turn it from a background layer into normal layer then delete).
-> In the menu, click "Select" >> "Load Selection"
-> Change the channel to the channel you created (again, probably 'Alpha 1').
-> Tick the box 'Invert'.  Make sure it's set to create a new selection.
-> Hit OK.
-> Click on your white layer.  You should now have a selection that is the opposite of the font you want.
-> Press delete.
-> Marvel.

Every time I've done this I've also pasted the boxes that are originally at the top of the image back on to the finished transparent text, so I'm not sure if it will work without it.

Anyway, GIMP = 1 step, Photoshop > 10 steps.
Endless Loop: n., see Loop, Endless.
Loop, Endless: n., see Endless Loop.
- Random Shack Data Processing Dictionary

DmitryK

Serpent, thank you for sharing your experience
I didn't try your way before since GIMP and Paint.net are usually enough for me
But I will try and this way to compare results
Our life is just a Game!

Moebius

Your way sounds a lot easier, and it seems like GIMP does the same thing.
Endless Loop: n., see Loop, Endless.
Loop, Endless: n., see Endless Loop.
- Random Shack Data Processing Dictionary

BdR

Some interesting info in this thread, thanks I found it very usefull :good:. I'm busy finishing my second big iphone game, working on better fonts at the moment. Btw the kerning option added to the PRINT function is great (helpfile says "kernel"?). Anyway, I wanted to try to get a font with alpha channel so it will look good on any background color.

I found that it's very easy when you use Paint Shop Pro:

1) Open a PNG file in Paint Shop Pro (preferably white font on black background)
2) Select from the menu "Layer" -> "New Mask Layer" -> "From Image"
3) Select the "Source luminance" option and uncheck "Invert mask data", press OK

And the font is ready to use. Works perfectly for white font on black background, but not so well for other colors fonts, especially blue becomes semi-transparant. But if you start with white, then you can adjust it to a different color later. I don't know PhotoShop or paint.net, but in Paint Shop Pro it's "Adjust" -> "Color balance" -> "Red/green/blue". For example set Red -100%, Green +100%, Blue -100% for a green font.

Still, I think alpha channel support in DiNGSFont would certainly be a nice-to-have.

BdR

Just now, I also tried Photoshop and there's an easier way to convert black-white font to alpha channel transparency, I found an explanation here

1) In Photoshop, open smallfont.png
2) In the Layers tab, double click on Background layer and press OK to make it a new layer
3) Again double click on the new layer to open layer style
4) In Blending options, look for a slide that says "This Layer"
5) Hold ALT and click once on the left slider (the black one) to split it into two sliders
6) Drag the right part of the slider all the way to the right, and press OK

blastar

#10
two weeks ago i shared my app to create bitmap-fonts in the german forum (GLBasic forum » Deutsch » GLBasic - de). i call it UO_DingsFont because it is an unofficial replacement. it can do alpha (antialiasing & shadow), gradients and texture...

UO DiNGSFont

Edit: Fixed URL, is working now :-) /Moru

spicypixel

If you don't mess with the background colour in DingsFont it's transparent anyway. Why all the hassle?
http://www.spicypixel.net | http://www.facebook.com/SpicyPixel.NET

Comps Owned - ZX.81, ZX.48K, ZX.128K+2, Vic20, C64, Atari-ST, A500.600.1200, PC, Apple Mini-Mac.

Moru

Spicypixel: what you describe is one bit transparency. Not very useful if you have more than one background-color and use antialias or cleartype on the font.

Blastar: I can't get Antialias working in your tool, the characters still have sharp edges. And cleartype is missing too, is it because I have XP?

blastar

#13
Quote from: Moru on 2011-Jun-19Blastar: I can't get Antialias working in your tool, the characters still have sharp edges. And cleartype is missing too, is it because I have XP?

it's like official dingsfont, you have to increase the fontsize because it uses window-api for antialiasing but you're right, there is a better function if you run >=winxp - i will add this with next update.

spicypixel

Quote from: Moru on 2011-Jun-19
Spicypixel: what you describe is one bit transparency. Not very useful if you have more than one background-color and use antialias or cleartype on the font.

Blastar: I can't get Antialias working in your tool, the characters still have sharp edges. And cleartype is missing too, is it because I have XP?

I get full alpha transparency here with the normal dingsfont too?
http://www.spicypixel.net | http://www.facebook.com/SpicyPixel.NET

Comps Owned - ZX.81, ZX.48K, ZX.128K+2, Vic20, C64, Atari-ST, A500.600.1200, PC, Apple Mini-Mac.