Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I can use a sprite sheet to automatically use a custom font. What I'd like to do though is to have several versions of each letter, such that the letters can be varied and more natural looking (a la handwriting). I don't know precisely how fonts are internally implemented, but I assume there's some function mapping chars to images. It seems like if that function isn't sealed, it wouldn't be difficult to make that function randomly choose one of "equal" images (that have slight variations).

Anyone know the plausibility of this/what code I'd want to overload to make this work with existing font infrastructure in xna?

share|improve this question
If you're using someone's existing font rendering code, then the difficulty is going to depend entirely on the complexity of that code and your access to it. If you're implementing it yourself however, then Tim Holt's answer covers the basics. – Kylotan Jan 19 '13 at 0:37
+1 this is an awesome question. – ashes999 Jan 19 '13 at 2:40
up vote 3 down vote accepted

Basically this is just a programming question if you abstract this out. If you really want to do this with sprite sheets, here's how I might do it in some quick JavaScript-style pseudocode...

// -------------------------------------------------------------------------
// --- Array of sprite sheet offset for letter variants, indexed by letter
// --- Note that it would be pretty easy to dynamically generate sprite 
// --- coordinates if you are certain your sheet has all the symbols you
// --- are looking for.
// -------------------------------------------------------------------------
var font_variants = [
  {'a' : {x:0,y:0}, 'b' :  {x:16, y:0},  'c':{x:32, y:0}, ...,  'z':{x:400, y:0}},
  {'a' : {x:0,y:16}, 'b' : {x:16, y:16}, 'c':{x:32, y:16}, ..., 'z':{x:400, y:16}},
  {'a' : {x:0,y:32}, 'b' : {x:16, y:32}, 'c':{x:32, y:32}, ..., 'z':{x:400, y:32}}

// -------------------------------------------------------------------------
// --- Call this function with a string to render randomized style text
// -------------------------------------------------------------------------
function render_it (text) {
    // --- Step through each letter in the text
    for (var i=0; i<text.length; i++) {
        // --- Randomly pick one of 3 variants
        var r = Math.random(3);
        // --- If letter is in our set, show it
        if font_variants[r].hasOwnProperty(text[i]) {
            // --- We have the letter
            letter_sprite = get_letter_sprite(font_variants[r][text[i]].x, font_variants[r][text[i]].y);
            // --- Display the letter here however you want to
        } else {
            // --- Requested letter not found
            // --- Handle as you see fit

I've only put in an example of lower case letters so you'd have to add more as needed. It also assumes some function "get_letter_sprite", which when passed an X and Y offset returns a sprite at the given location from some sprite sheet (of letters).

share|improve this answer
This only works for monospace, not handwriting. It may also cause keming. – Anko Jan 19 '13 at 5:51
I'm comfortable with programming it, but do you know what one would override in the XNA framework to work with the existing font code? As in, this is more or less what I had, I'm just not sure where to put. (I can easily make my own renderer, but I thought there might be a more elegant option) – akroy Jan 19 '13 at 15:33

I haven't tried this out, so some experimentation would be needed to see if it actually works.

What I would do:

Start from a vectorized format that follows the drawing direction. As an example, the hershey fonts - the "scripts" and "scriptc" fonts might be a good starting point:

enter image description here

Next, instead of drawing the fonts as line segments, render them as splines. Estimate the velocity of the pen, and over/undershoot by random (or periodic) amounts. Try to correct mistakes, like you would when doing actual writing (so the errors in the text don't accumulate into random mess).

If you try this out, I'd love to see the results =)

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.