Click here to Skip to main content
15,796,025 members
Articles / Programming Languages / Visual Basic

Smooth graphical fonts for your games or DirectX apps!

Rate me:
Please Sign up or sign in to vote.
3.55/5 (9 votes)
4 Jan 20043 min read 73.2K   804   32   4
Smooth graphical fonts for your games or DirectX apps!

Sample Image - graphicFont_picture.gif


This is another major and final update to my graphicFonts class. New in this version are shadowing, color adjustments, padding, spacing, user interface and more...

First off, you need to be able to make font files. You can get the app I have been using here.

Important: Stay away from converting font files to GIFs. During GIF compression, the colors in the image are shifted to achieve compression and as a result, they will not work properly.

Just use PNG :-)

Class Updates

  • Shadowing
  • Adjustable Foreground Colors
  • Optimized Code
  • Adjustable Shadow Offsets
  • Adjustable Render Size
  • Adjustable Left and Right Padding
  • Adjustable space size
  • More comments and Cleaner code

Interface Updates

  • Hi-Res Timer for performance tuning
  • New User Interface
  • Separate preview window
  • Ability to save rendered fonts

Sample Bitmap file

Image 2

Coding Challenge

If you can shave time off the rendering process, you will be forever known as the code guru. I have the rendering time pretty good but I think it could be better. If you think you can improve performance, update the class with your ideas and email it to me. I will update this article and give you credit at the end. So are you a coding guru?

Render "abcdefghijklmnopqrstuvwxyz" with font1.png, my times are between .6 - .552.

Times may vary by system.

Class Constructor

Dim fntFromBmp As cGraphicFont = New cGraphicFont(fontFile, bgColor.Color)

This initializes the cGraphicFont object and passes the active form, bitmap image of the fontFile and the background color of the font file.

Updated: Got rid of the need to reference the parent form.

Class Properties

  • LetterSpacing, SpaceSize, LeftPadding and RightPadding

    This specifies spacing. LetterSpacing is the space between letters, SpaceSize is the number of pixels to use if your string has a space in it, LeftPadding and RightPadding adjust the spacing on ether side of the output bitmap.

    object.LetterSpacing = 5
    object.SpaceSize = 15
    object.LeftPadding = 15
    object.RightPadding = 15
  • CellsAcross

    This specifies the number of horizontal cells in your image file.

  • CellsDown

    This specifies the number of vertical cells in your image file.

    object.CellsAcross = 16
    object.CellsDown = 16
  • Offset

    This is the cell number in the image you want to start reading from. Suppose your file has 2 different fonts in it. With this method, you can control the position (Cell) in the bitmap where you want to start.

    Updated: Renamed this property from "FontNumber"

    object.Offset = 128
  • FirstLetter

    FirstLetter is the letter your font bitmap starts with. Most font bitmaps start with a space.

    object.FirstLetter = " "
  • renderSize

    This is the size to ether grow or shrink the resulting image. (E.g. bitmap.width * txtSize, bitmap.height * txtSize).

    So a value of 1 will render the image in the normal size. A value of 2 will double the resulting image size. Conversely, a value of .5 will shrink the resulting bitmap.

    Updated: Renamed property from txtSize.

    object.txtSize = 1 ' Normal Size
    object.txtSize = 2 ' Double Size
    object.txtSize = 3 ' Triple Size
    object.txtSize = .5 ' Half size
    object.txtSize = .25 ' Quorter size
  • Shadow & ShadowOffset

    With this property, you can cast a shadow on your rendered text.

    object.Shadow = true
    object.ShadowOffset = 2
  • Background, Foreground and Recolor

    These are the colors you want your final image to be. You need to set the Recolor flag if you wish to force a new Foreground color on your image.

    object.Background = color.transparent
    object.Recolor = true
    object.Foreground = red

Class Methods

picturebox1.image = fntFromBmp.getString(RenderText.Text)

This returns a Bitmap object with your string. The first parameter is the text you want and the next parameter is the background color you want.

Updated: Don't specify the color anymore.

picturebox1.image = fntFromBmp.getCell(celNumber)

This returns a FORMATTED cell as a bitmap.

Updated: Now returns a formatted cell.


Dim fntFromBmp As cGraphicFont = _
    New cGraphicFont(new bitmap("font.bmp"),
fontFromBMP.ShadowOffset = 2
fntFromBmp.LetterSpacing = 5
fntFromBmp.CellsAcross = 16
fntFromBmp.CellsDown = 16
fntFromBmp.FontNumber = 0
fntFromBmp.FirstLetter = " "
fntFromBmp.RenderSize = 1
fntFromBmp.Background = color.Navy
fntFromBmp.foreground =
fntFromBmp.Recolor = true

Rendered.Image = fntFromBmp.getString("Hello world")

Example #2

Dim fntFromBmp As cGraphicFont = _
   New cGraphicFont(new bitmap("font.bmp"),
Rendered.Image = fntFromBmp.getString("Hello world")


The private variable ScanLines in the class controls how many points are used to scan the bitmap. Setting it lower will speed things up but, if you set it to low, you will cause an error in the class.


That's about it for now, hope you enjoy this!


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Written By
Web Developer
United States United States
I started programming for fun when I was about 10 on an Franklin Ace 1000.

I still do it just for fun but it has gotten me a few jobs over the years. More then I can say for my Microsoft Certifications. Smile | :)

The way I learned was by example, now its time to give back to the next generation of coders.

Comments and Discussions

GeneralMessy messy Pin
DanWalker1-Sep-05 14:20
DanWalker1-Sep-05 14:20 
GeneralSpeed Pin
Matthew Hazlett7-Jan-04 0:25
Matthew Hazlett7-Jan-04 0:25 
GeneralNext bersion Pin
Anonymous6-Jan-04 9:07
Anonymous6-Jan-04 9:07 
GeneralRe: Next bersion Pin
Matthew Hazlett6-Jan-04 22:14
Matthew Hazlett6-Jan-04 22:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.