June 18, 2019, 06:45:06 AM

Author Topic: How to make anti-aliased bitmap font?!  (Read 1379 times)

Online sphinx

  • Full Member
  • ***
  • Posts: 186
    • Ancientsoft
How to make anti-aliased bitmap font?!
« on: September 18, 2017, 05:51:40 PM »
I use the Pink color as my background (255,0,255), when I type any letter, say, in Photoshop it fine tunes the edges color to the shade from my font color to the pink color!!

So when I try my bitmap font it is surrounded by pink pixels every where!!

Any tips?!!

Thanks in advance.
Kind regards,
Maher F. Farag
www.ancientsoft.com
www.osakit.com

Offline Steve Elliott

  • Hero Member
  • *****
  • Posts: 1802
Re: How to make anti-aliased bitmap font?!
« Reply #1 on: September 18, 2017, 05:54:03 PM »
You're not using PNG's??  They have an alpha channel built-in so you can smooth out the edges.
Windows 10, 64-bit, 16Gb RAM, CPU Intel i5, 3.2 GHz, Nvidia GeForce GTX 1050 (2Gb).
MacOS Mojave, 64-bit, 8Gb RAM, CPU Intel i5, 2.3 Ghz, Intel Iris Plus Graphics 640 1536 MB.
Linux Mint 19.1, 64-bit, 16Gb RAM, CPU Intel i5, 3.2 GHz, Nvidia GeForce GTX 1050 (2Gb).

Offline dawlane

  • Jr. Member
  • **
  • Posts: 84
Re: How to make anti-aliased bitmap font?!
« Reply #2 on: September 18, 2017, 06:02:05 PM »
If you're using one of the Type tools you can turn off aliasing by setting the anti-aliasing drop-down to NONE. But your text will look ugly and you will have to fix it manually.
If you are doing any resizing, then set Sample Image to Nearest Neighbor (preserve hard edge).
An other way would be to make a layer-mask of the font.

Online sphinx

  • Full Member
  • ***
  • Posts: 186
    • Ancientsoft
Re: How to make anti-aliased bitmap font?!
« Reply #3 on: September 18, 2017, 06:10:21 PM »
You're not using PNG's??  They have an alpha channel built-in so you can smooth out the edges.
I tried that but it shows white pixels around the black outline!!!!

I am afraid I am doing something wrong!!!
Kind regards,
Maher F. Farag
www.ancientsoft.com
www.osakit.com

Online sphinx

  • Full Member
  • ***
  • Posts: 186
    • Ancientsoft
Re: How to make anti-aliased bitmap font?!
« Reply #4 on: September 18, 2017, 06:13:01 PM »
If you're using one of the Type tools you can turn off aliasing by setting the anti-aliasing drop-down to NONE. But your text will look ugly and you will have to fix it manually.
If you are doing any resizing, then set Sample Image to Nearest Neighbor (preserve hard edge).
An other way would be to make a layer-mask of the font.
I think the layer-mask is the key, I am not sure how but the name gives a hint :)
I will see what uncle Google will tell me about it :D
Kind regards,
Maher F. Farag
www.ancientsoft.com
www.osakit.com

Offline Steve Elliott

  • Hero Member
  • *****
  • Posts: 1802
Re: How to make anti-aliased bitmap font?!
« Reply #5 on: September 18, 2017, 06:23:45 PM »
Quote
You're not using PNG's??  They have an alpha channel built-in so you can smooth out the edges.

I tried that but it shows white pixels around the black outline!!!!

I am afraid I am doing something wrong!!!

Yes, there's something wrong with your png file.

png's are the only 2d format I use for games.  You can get smooth edges on sprites or bitmapped fonts - remember they are the same thing!

Just load and display a png.  Now, depending on the software you're using, it's a case of treating an individual letter like a sprite - or much better, selecting a section of your png to grab a letter.
Windows 10, 64-bit, 16Gb RAM, CPU Intel i5, 3.2 GHz, Nvidia GeForce GTX 1050 (2Gb).
MacOS Mojave, 64-bit, 8Gb RAM, CPU Intel i5, 2.3 Ghz, Intel Iris Plus Graphics 640 1536 MB.
Linux Mint 19.1, 64-bit, 16Gb RAM, CPU Intel i5, 3.2 GHz, Nvidia GeForce GTX 1050 (2Gb).

Online sphinx

  • Full Member
  • ***
  • Posts: 186
    • Ancientsoft
Re: How to make anti-aliased bitmap font?!
« Reply #6 on: September 18, 2017, 09:06:20 PM »
Quote
You're not using PNG's??  They have an alpha channel built-in so you can smooth out the edges.

I tried that but it shows white pixels around the black outline!!!!

I am afraid I am doing something wrong!!!

Yes, there's something wrong with your png file.

png's are the only 2d format I use for games.  You can get smooth edges on sprites or bitmapped fonts - remember they are the same thing!

Just load and display a png.  Now, depending on the software you're using, it's a case of treating an individual letter like a sprite - or much better, selecting a section of your png to grab a letter.

You are right, I have the habit to display each PNG file in, believe it or not, Paint. I used to edit/enhance bad pixels and save from there after changing the white background into pink!

What a stupid habit!!!!!!
Kind regards,
Maher F. Farag
www.ancientsoft.com
www.osakit.com

Offline Steve Elliott

  • Hero Member
  • *****
  • Posts: 1802
Re: How to make anti-aliased bitmap font?!
« Reply #7 on: September 18, 2017, 09:13:50 PM »
lol old skool!!  ;)
Windows 10, 64-bit, 16Gb RAM, CPU Intel i5, 3.2 GHz, Nvidia GeForce GTX 1050 (2Gb).
MacOS Mojave, 64-bit, 8Gb RAM, CPU Intel i5, 2.3 Ghz, Intel Iris Plus Graphics 640 1536 MB.
Linux Mint 19.1, 64-bit, 16Gb RAM, CPU Intel i5, 3.2 GHz, Nvidia GeForce GTX 1050 (2Gb).

Offline IanMartin

  • Full Member
  • ***
  • Posts: 122
    • Retrolutionary.com
Re: How to make anti-aliased bitmap font?!
« Reply #8 on: September 18, 2017, 11:08:40 PM »
I make pretty much everything with 32 bit .pngs made in Paint.net.  ( http://www.getpaint.net )
They have an alpha channel so anything transparent or semi-transparent works fine.  I used to use pink masks for the background but cine I switched to transparency in the .pngs I haven't looked back.  No more aliased pinkish whitish grey for me!  heheh
Platfinity (made with BlitzMax) on Steam:
http://store.steampowered.com/app/365440/Platfinity/

Online sphinx

  • Full Member
  • ***
  • Posts: 186
    • Ancientsoft
Re: How to make anti-aliased bitmap font?!
« Reply #9 on: September 19, 2017, 03:45:10 AM »
I make pretty much everything with 32 bit .pngs made in Paint.net.  ( http://www.getpaint.net )
They have an alpha channel so anything transparent or semi-transparent works fine.  I used to use pink masks for the background but cine I switched to transparency in the .pngs I haven't looked back.  No more aliased pinkish whitish grey for me!  heheh
I'll give it a try, thanks IanMartin!
Kind regards,
Maher F. Farag
www.ancientsoft.com
www.osakit.com