Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

How to make a bitmap font


MadalinV
 Share

Recommended Posts

Ok, first, get Codehead's bitmap font generator:

[![](http://i1236.photobucket.com/albums/ff450/darkgray/Download.png)](http://www.codehead.co.uk/cbfg/download/CBFG.zip)

And open the program.

![](http://i1236.photobucket.com/albums/ff450/darkgray/sc1.png)

Now, i'll work with Ubuntu Mono Bold. You will first set the image size to 256x256, cell size 16x16, and because i use a mono font, i'll not use Anti-Aliasing:

![](http://i1236.photobucket.com/albums/ff450/darkgray/sc2.png)

The font doesn't look too good:

![](http://i1236.photobucket.com/albums/ff450/darkgray/sc3.png)

So we will now set the Font height (from the bottom settings) to a number that fits it, and the Start Character has to be 0 (zero) for the font to work right:

![](http://i1236.photobucket.com/albums/ff450/darkgray/sc4.png)

and make the spaces not too big, so the font will look all right, if they don't do. (at mine it looks good, so i will not change it)

And now, we save the .dat file:

![](http://i1236.photobucket.com/albums/ff450/darkgray/sc5.png)

and the .bmp:

![](http://i1236.photobucket.com/albums/ff450/darkgray/sc6.png)

and put them in the font folder, and overwrite the other ones, and you are done!

Now, in most cases, the font bmp needs to be .png with transparency… to do that, i mostly put two negative colours at the font bmp:

![](http://i1236.photobucket.com/albums/ff450/darkgray/sc7.png)

and save it as bmp.

Now, i use Photoshop, so this is how i do it:

![](http://i1236.photobucket.com/albums/ff450/darkgray/sc8.png)

![](http://i1236.photobucket.com/albums/ff450/darkgray/sc9.png)

![](http://i1236.photobucket.com/albums/ff450/darkgray/sc10.png)

![](http://i1236.photobucket.com/albums/ff450/darkgray/sc11.png)

and save it.

Now you are done, put the .dat you made before and the .png you made now in the font folder, and rename them corespondly, or overwrite the other ones.

Here is how it looks like in a game (ER in example)

![](http://i1236.photobucket.com/albums/ff450/darkgray/sc12.png)
Link to comment
Share on other sites

> nice. thank you ![:)](http://www.touchofdeathforums.com/community/public/style_emoticons/<#EMO_DIR#>/smile.png)

I was asked to do one, and i made one, well, mostly because i had some free time xD ![:)](http://www.touchofdeathforums.com/community/public/style_emoticons/<#EMO_DIR#>/smile.png)
Link to comment
Share on other sites

> then how to add in source? ![:)](http://www.touchofdeathforums.com/community/public/style_emoticons/<#EMO_DIR#>/smile.png) there are two font the Georgia and textdefault already in the source, but i need another one. do you know how?

umm… no, i know that texdefault is the default text used in chat, menu, items and others, the georgia font is used for the chat bubbles, and Georgia Bold, idk what for o.O
Link to comment
Share on other sites

> Nice tutorial, it's relatively easy to follow and informative. Good job.

Yeah, mostly i made my tutorials with a text and images, so it's easy even for a kid to follow it. ![:)](http://www.touchofdeathforums.com/community/public/style_emoticons/<#EMO_DIR#>/smile.png)
Link to comment
Share on other sites

  • 2 weeks later...
  • 4 weeks later...
  • 2 weeks later...
  • 2 months later...
great work. besides normal image editing tool, i perfer [c# image to bitmap](http://www.rasteredge.com/how-to/csharp-imaging/bitmap/) to do what we are talking about. here is a sample , not sure whether it will satisfy you or not.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...