SyntaxBomb - Indie Coders

Media => Graphics => Topic started by: sphinx on September 18, 2017, 17:51:40

Title: How to make anti-aliased bitmap font?!
Post by: sphinx on September 18, 2017, 17:51:40
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.
Title: Re: How to make anti-aliased bitmap font?!
Post by: 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.
Title: Re: How to make anti-aliased bitmap font?!
Post by: 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.
Title: Re: How to make anti-aliased bitmap font?!
Post by: sphinx on September 18, 2017, 18:10:21
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!!!
Title: Re: How to make anti-aliased bitmap font?!
Post by: sphinx on September 18, 2017, 18:13:01
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
Title: Re: How to make anti-aliased bitmap font?!
Post by: 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.
Title: Re: How to make anti-aliased bitmap font?!
Post by: sphinx on September 18, 2017, 21:06:20
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!!!!!!
Title: Re: How to make anti-aliased bitmap font?!
Post by: Steve Elliott on September 18, 2017, 21:13:50
lol old skool!!  ;)
Title: Re: How to make anti-aliased bitmap font?!
Post by: 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
Title: Re: How to make anti-aliased bitmap font?!
Post by: sphinx on September 19, 2017, 03:45:10
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!