Creating Fonts
When working with VTerminal, fonts are comprised of one PNG file and one FNT file. The PNG file must be called bitmap.png and the FNT file must be called data.fnt.
- PNG - A sprite sheet of character or graphic sprites.
- FNT - A data file containing the position, size, and Unicode character ID of every sprite in the PNG file.
Links
- JavaDoc documentation for the Tile class.
- JavaDoc documentation for the GraphicTile class.
- A guide on how to load a Font.
Font Generation
To generate a font for use with VTerminal, you must use BMFont. As a general rule, only monospace fonts and fonts with square dimensions should be used. All other types of fonts currently have limited support and may not render correctly. Support for non-monospace and non-square fonts may come in a future release.
After installing BMFont, you must adjust your Font Settings and Export Options as shown below. They can be reached from the Options button on the menu bar.
When you're ready to generate a font, press CTRL+S and save it to your filesystem.
- If the resulting PNG file has a lot of empty horizontal space, then it is recommended that you either adjust the height value in the Export Options and re-generate the font or that you crop the image in an editor of your choice.
- If the resulting PNG file has aliased characters, then you must adjust your Font Settings until the characters generate without aliasing. All characters must have a transparent background with solid white pixels for the character itself. Any partially transparent pixels will cause issues during the font loading process.
- If the font exports with multiple PNG files, then the width and/or height values must be adjusted in the Export Options. Each font should have one PNG and one FNT file.
Font Settings
Your Font Settings should be set as follows.
The Size (px), Match char height, Bold, Italic, and Font smoothing options can be set to whatever you desire. Although these settings are what I recommend using, you may need to play around and adjust a few things to get some fonts to render nicely. Beware, the Font smoothing setting can cause aliasing when rendering fonts with small Size (px) values.
Export Options
Your Export Options should be set as follows.
Additional Characters
To include all characters, available to your chosen font, when generating the font:
- Click the first option in the right-hand list of Unicode blocks.
- Hold SHIFT and click the last option in list.
- Right-click anywhere in the list.
- Click Select marked subset(s)
Graphic Tiles
Unlike character-based fonts, graphic fonts must be created either by hand or by a program such as TexturePacker. As with character-based fonts, graphic fonts require a PNG sprite sheet and a FNT file that defines the location of each sprite in the sheet.
Notes:
- All pixels that are not fully transparent (alpha < 255) are a part of the foreground.
- All pixels that are fully transparent (alpha = 255) are a part of the background.
- Partially transparent foreground pixels will blend with the chosen background color of the GraphicTile when drawn in VTerminal.
- It is recommended that all sprites have the same dimensions.
- When using GraphicTiles, ensure that you call the screen.getTiles().convertToGraphicTileGrid(); function when initializing your Screen.
FNT File Format
Each line of a FNT file defines the Unicode character ID, coordinates, and dimensions of a sprite on the PNG sprite sheet. An example FNT file can be found here and the corresponding PNG file can be found here.
| Value | Description |
|---|---|
| char id | A Unicode integer value used to reference the sprite. |
| x | The x-axis pixel location, on the sprite sheet, of the top-left pixel of the sprite. |
| y | The y-axis pixel location, on the sprite sheet, of the top-left pixel of the sprite. |
| width | The width of the sprite. |
| height | The height of the sprite. |
In a FNT file generated by BMFont, all of the xoffset, yoffset, xadvance, page, and chnl data is ignored. All lines that do not start with "char id=# x=# y=# width=# height=#" are also ignored.
The following function generates a valid FNT file. If you're going to use a FNT file generated by this function, you'll want to manually set the char id values to match-up with the sprites in your PNG file. You must also set the image and sprite dimensions to match those used by your PNG file.
Example
Imagine a PNG file with two sprites and a FNT file with two lines defining the sprites.
The first sprite is defined by char id=32 x=0 y=0 width=32 height=32.
- The sprite is represented by the ' ' whitespace character (char id=32).
- The sprite's top-left pixel is at (0, 0) because (x=0) and (y=0).
- The sprite is 32x32 pixels because (width=32) (height=32).
The second sprite is defined by char id=33 x=32 y=0 width=32 height=32.
- The sprite is represented by the '!' exclamation character (char id=33).
- The sprite's top-left pixel is at (32, 0) because (x=32) and (y=0).
- The sprite is 32x32 pixels because (width=32) (height=32).