itch.io Community » Game Development » General Development

how to make a colored pixel font ? (.png - any font type at this point)

A topic by nabrappy created Jan 27, 2022 Views: 573 Replies: 9

Viewing posts 1 to 4

i made a new pixel font (8x11 pixels) that uses colors instead of just black andi cannot get it to work anymore with the pixel font program i was using.

the font is on a .png spritesheet template with a transparent background.

after lots of googling and digging, i found only one single program that could do what i needed to finish making the font.

with my luck, the program depends on defunct software from adobe called adobe air.

i could probably just find this program and torrent it somewhere, but there literally has to be an easier way.

i noticed adobe has a program add on for indesign and photoshop or something for making fonts - but of course its paid and im not looking to shell out just to make this font.

is there not some way to take my already made .png font tilesheet and plug and play it into some program and make a font??

my key problem seems to be that the font is colored instead of black and white.

Like Reply

quou2 years ago(+1)

So you’ve made a bitmap font and you’re trying to turn it into a TrueType font, yes?

That’s a little wasteful, since TrueType fonts work based on mathematical curves that get rasterized at runtime, not pixels like image formats do. Turning the pixels in your PNG image into curve descriptions will make the font file rather large and the font will not scale well.

Generally TrueType isn’t the best format to use for pixel art fonts. You’re better off keeping it as a bitmap font. The only reason you might want it to be TrueType is if you’re trying to use it with a program that only loads TrueType fonts.

About the colour: Having it be black and white is pretty standard. Normally the colour is chosen later on when the font is rendered by a text renderer.

Like Reply

nabrappy2 years ago

the file is png not bmp, im not sure if that matters but i made it in a pixel art program specifically.

im not necessarily trying to turn it into a TTF, really, any type of font format is fine as long as it would actually work.

i know that fonts usually are black and white and so forth, however i really don't want to remake the font all over in another program that i dont know how to use.

i will probably end up using the program i found, i was just hoping to find an easier way

Like Reply

PaulsGames2 years ago

What veridis_quo_t said is completely correct. You don't need to do anything to your png. Just tell us what you're trying to do exactly and which engine you are using (for instance: are you trying to render the font in Unity?), and then someone will point you to the right tool. Which is probably a sprite based text renderer / bitmap font renderer, which is sometimes part of the engine, but you can also create it yourself in any environment that can render sprites. (Just make sure the symbols in the sprite sheet follow the ASCII table.)

Like Reply

nabrappy2 years ago (1 edit)

i'm not actually trying to use the font myself, it's a font i intended to release for sale.

so as for the engine, it would mainly be geared towards rpg maker, but not necessarily.

ideally i'd want it to work with things like windows, rpg maker, unity etc or at least allow the users to convert it themselves with a commercial license. the base font just needs to work on something like windows and / or rpg maker.

the problem is i don't want to learn a whole program to convert the font since i already created it.

i was trying to find intructions for importing what i have and going from there, but i tried to figure out the import options on several different free font maker programs to no avail. though that's most likely just me being impatient with them.

as i said above, i do have the entire font created on a .png file that i made in aseprite, but i cant figure out how to convert it into a font without a giant headache.

i thought there would be some way to do it with adobe programs, but they seem to only be for editing, not saving as any kind of font format.

Like Reply

PaulsGames2 years ago(+1)

Ah. Well, you say the font is 8x11, so that sounds like a monospace font. Do you have most of the ASCII table covered? In that case, you can just distribute it as a png sprite sheet, layed out correctly, similar to this: https://opengameart.org/content/bitmap-font-pack (that's what I just used last weekend for a pixel art game.) I guess many developers will know how to use that. You can also do that if you don't have most of the ASCII table covered, but then include sufficient white space in your sprite sheet, or replace them by random custom symbols.

I also read that you can convert it to angelcode .fnt font format, which can be used in Unity, but I'm no expert there. Some links:

https://www.angelcode.com/products/bmfont/

https://github.com/litefeel/Unity-BitmapFontImporter

In any case, don't try to make a true type font (.ttf file) out of it - that's a waste. Bitmap fonts have disadvantages (fixed size), but also advantages (can be colored, fit with "pixel art" look).

Like Reply

nabrappy2 years ago (1 edit)

i do have the full sprite sheet, thanks this is actually a great idea !

i will most definitely release the font this way, next time i'll maybe learn a font program for colored fonts but for this,

it's better to not have to start over in a program i'm not familiar with

i will also probably go through my released fonts and add the .png files as they are all in ttf, that way people can use or convert them however.

i did eventually notice the scaling issue with ttf, i had not previously known about it until i had already created several fonts that way.

now i know lol

Like Reply

Eldwood2 years ago

TTF fonts do support embedded color bitmaps (encoded as png). This is usually used for emoji, but I don't think there's any reason why it wouldn't work for other characters.

Usually game developers go the other direction. We start with a ttf font file, use a tool like BMFont to create a spritesheet, and use the spritesheet to render text in our games.

Like Reply

nabrappy2 years ago

the program i was using to make fonts previously specifically does not recognize colored fonts.

with using that program, i always start with an .ase file in aseprite and then export a .png that the program would recognize and convert into a ttf.

Like Reply

Tadgames2 years ago(+1)

You can use GIMP to make a font from the png. And also to make it black and white.
I think most developers would be able to use a transparent .png of a straight line of the font.
What I do is copy letter by letter from a straight line of the font in a spritesheet, and things are typed out that way.
That is actually better than a trying to use a .ttf especially in a html5 situation.

Like Reply