LVNAuth Tutorials - Font Sprite Sheets
The first thing is to decide which font sprite sheet you want to use for the dialog text of your characters.
LVNAuth supports fonts as images, called font sprite sheets. Font sprite sheets are not traditional fonts that you will find in a text document. Using a font sprite sheet will help your visual novel to look consistent when played on different computers. You can even use your own drawn-letters as text in LVNAuth.
If you want to use your own drawn-letters as text, check out the Trace Tool which lets you convert variable-width letters to a fixed grid layout. LVNAuth can then use the fixed grid layout of your drawn letters as dialog text.
A ready-for-use font sprite sheet is available for download (licensed under CC0). The dimensions of each letter in this font sprite sheet are 30x42 pixels.
Once you have a font sprite sheet that you want to use, go to the 'Font Sprites' tab in the editor and click on 'Add Image...' Browse and select the font sprite that you want to use. After you add the font sprite sheet, it should appear in the list. Then double-click on it.
After you double-click on the name of the font sprite, you should see this window:
Now type the width and height (dimensions) of each letter in the font sprite sheet.
If you downloaded and are using the ready-for-use font sprite sheet from this page, type 30 for the width, and 42 for the height.
Then press the Split button.
Now the font sprite sheet has been split into individual letters. If the letters don't look correct (ie: they are cut-off), then that means one of two things:
If the split worked successfully, you should see each letter clearly like in the screenshot above. Below each letter-image, type the letter that it actually is, because LVNAuth needs to know which letters the images represent. The letters are just images afterall, even though they look like letters.
The first empty spot is for the space character, so you should type a single space in the text field.
Automatically detect letter edges: This option will cause LVNAuth to remove extra spacing between letters when displaying dialog text.
For example, this is without edge detection:
You'll notice that the letters are centered within the grid box. Turning this option will work best for fixed-width letters (mono fonts). In the example above, the font is not a mono font, it's a variable-width font.
Now with edge-detection turned on:
Now the problem is obvious - the letters are too close to each other. So to fix that, there is another option:
Padding between letters (pixels): This option will add spacing between letters.
Continuing with our example, let's add 5 pixel spacing.
Font kerning is the art of spacing between letters. You can have different spacing depending on which letters are side-by-side.
For this example, we're going to use the letter 'n'
| Screenshots | Explanation |
|---|---|
 |
Choosing a negative number for the 'left' value will move that letter more towards the left. Notice how the 'n' is more to the left, but 'ame' stayed the same. The letters after 'n' remain in their original positions - they are not moved. |
 |
Choosing a positive number for the 'left' will move that letter more towards the right. Notice how the 'n' is more to the right, but 'ame' stayed the same. The letters after 'n' remain in their original positions - they are not moved. |
 |
Choosing a negative number for the 'right' value will pull letters closer to the letter. The 'n' has stayed in its original position - instead the letters to the right have been pulled towards it. |
 |
Choosing a positive number for the 'right' value will push the letters farther away fromt he letter. The 'n' has stayed in its original position - instead the letters to the right have been pushed away from it. |
Last updated: Wed 08 November 2023