# How do I implement variation in font letters, like handwriting?

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?

• 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

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 {
// --- 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).

• 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) – Cannoliopsida 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:

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 =)