How to make anti-aliased bitmap font?!

Started by sphinx, September 18, 2017, 17:51:40

Previous topic - Next topic

sphinx

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

Steve Elliott

You're not using PNG's??  They have an alpha channel built-in so you can smooth out the edges.
Win11 64Gb 12th Gen Intel i9 12900K 3.2Ghz Nvidia RTX 3070Ti 8Gb
Win11 16Gb 12th Gen Intel i5 12450H 2Ghz Nvidia RTX 2050 8Gb
Win11  Pro 8Gb Celeron Intel UHD Graphics 600
Win10/Linux Mint 16Gb 4th Gen Intel i5 4570 3.2GHz, Nvidia GeForce GTX 1050 2Gb
macOS 32Gb Apple M2Max
pi5 8Gb
Spectrum Next 2Mb

dawlane

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

sphinx

Quote from: Steve Elliott on September 18, 2017, 17:54:03
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

sphinx

Quote from: dawlane on September 18, 2017, 18:02:05
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

Steve Elliott

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.
Win11 64Gb 12th Gen Intel i9 12900K 3.2Ghz Nvidia RTX 3070Ti 8Gb
Win11 16Gb 12th Gen Intel i5 12450H 2Ghz Nvidia RTX 2050 8Gb
Win11  Pro 8Gb Celeron Intel UHD Graphics 600
Win10/Linux Mint 16Gb 4th Gen Intel i5 4570 3.2GHz, Nvidia GeForce GTX 1050 2Gb
macOS 32Gb Apple M2Max
pi5 8Gb
Spectrum Next 2Mb

sphinx

Quote from: Steve Elliott on September 18, 2017, 18:23:45
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

Steve Elliott

Win11 64Gb 12th Gen Intel i9 12900K 3.2Ghz Nvidia RTX 3070Ti 8Gb
Win11 16Gb 12th Gen Intel i5 12450H 2Ghz Nvidia RTX 2050 8Gb
Win11  Pro 8Gb Celeron Intel UHD Graphics 600
Win10/Linux Mint 16Gb 4th Gen Intel i5 4570 3.2GHz, Nvidia GeForce GTX 1050 2Gb
macOS 32Gb Apple M2Max
pi5 8Gb
Spectrum Next 2Mb

IanMartin

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/

sphinx

Quote from: IanMartin on September 18, 2017, 23:08:40
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