libgdx-bitmap-font-text
npx machina-cli add skill kyu-n/gdx-claude-skills/libgdx-bitmap-font-text --openclawlibGDX BitmapFont, Text & NinePatch
Quick reference for BitmapFont text rendering, GlyphLayout measurement, BitmapFontCache, NinePatch, DistanceFieldFont, and color markup. Covers com.badlogic.gdx.graphics.g2d.BitmapFont, GlyphLayout, BitmapFontCache, NinePatch, DistanceFieldFont.
BitmapFont
Pre-rendered font stored as texture(s) + .fnt descriptor. Created with Hiero, BMFont, or at runtime via FreeType (see libgdx-freetype skill).
Default Font
BitmapFont font = new BitmapFont(); // Built-in 15px Liberation Sans
Useful for prototyping only. The default font is bundled in the libGDX JAR.
Constructors
new BitmapFont() // default 15px Liberation Sans
new BitmapFont(boolean flip) // default font, flipped
new BitmapFont(FileHandle fontFile) // load from .fnt
new BitmapFont(FileHandle fontFile, boolean flip)
new BitmapFont(FileHandle fontFile, FileHandle imageFile, boolean flip)
new BitmapFont(FileHandle fontFile, FileHandle imageFile, boolean flip, boolean integer)
new BitmapFont(FileHandle fontFile, TextureRegion region) // custom texture
new BitmapFont(FileHandle fontFile, TextureRegion region, boolean flip)
new BitmapFont(BitmapFontData data, TextureRegion region, boolean integer)
new BitmapFont(BitmapFontData data, Array<TextureRegion> pageRegions, boolean integer)
- flip: If
true, Y=0 is top (top-down coordinates). Defaultfalse(Y-up, libGDX standard). Scene2D uses unflipped fonts. - integer: If
true, positions are rounded to integers to reduce filtering artifacts. Defaulttrue.
draw() Methods — CRITICAL
The y parameter is the top of capital letters (cap height), NOT the baseline, NOT the bottom of text.
// All return GlyphLayout except the GlyphLayout overload which returns void
GlyphLayout draw(Batch batch, CharSequence str, float x, float y)
GlyphLayout draw(Batch batch, CharSequence str, float x, float y,
float targetWidth, int halign, boolean wrap)
GlyphLayout draw(Batch batch, CharSequence str, float x, float y,
int start, int end, float targetWidth, int halign, boolean wrap)
GlyphLayout draw(Batch batch, CharSequence str, float x, float y,
int start, int end, float targetWidth, int halign, boolean wrap, String truncate)
void draw(Batch batch, GlyphLayout layout, float x, float y) // pre-computed layout
x— left edge of text.y— top of most capital letters (cap height position). The GlyphLayout height is the distance fromydown to the baseline.targetWidth— max width for wrapping/alignment/truncation.halign—Align.left,Align.center, orAlign.right(lowercase! NOTAlign.CENTER).wrap— word wrap withintargetWidth.truncate— if non-null, truncate with this suffix (e.g.,"...") instead of wrapping.
Gotchas:
draw()must be called betweenbatch.begin()/batch.end().- All
draw()calls clear the internal cache. For static text drawn every frame, useBitmapFontCacheinstead. - The returned
GlyphLayoutis owned by the font's internal cache and will be overwritten on the nextdraw()call. Copy metrics immediately if needed.
Color and Scaling
font.setColor(Color.RED); // affects subsequent draws
font.setColor(1, 0, 0, 1); // r, g, b, a
Color c = font.getColor(); // returns mutable Color — modify in place
font.getData().setScale(2f); // uniform scale (on BitmapFontData, NOT BitmapFont)
font.getData().setScale(2f, 3f); // scaleX, scaleY (throws if 0)
float sx = font.getScaleX(); // convenience getters on BitmapFont
float sy = font.getScaleY();
DO NOT use font.setScale() — no such method exists on BitmapFont. Use font.getData().setScale().
DO NOT use font.setSize() — no such method exists. Scale is the only option, and it causes blurriness. For clean multi-size text, generate separate BitmapFonts at each size (or use FreeType at runtime).
Metrics
All metric methods are on BitmapFont (convenience delegates to BitmapFontData):
font.getLineHeight() // distance between baselines of consecutive lines
font.getCapHeight() // top of capitals to baseline
font.getXHeight() // top of lowercase to baseline
font.getAscent() // cap height to top of tallest glyph
font.getDescent() // baseline to bottom of lowest descender (NEGATIVE value)
font.getSpaceXadvance() // width of space character
Other Methods
font.getData() // returns BitmapFontData
font.getData().markupEnabled // public boolean field, default false
font.getRegions() // Array<TextureRegion> — texture pages
font.getRegion() // first TextureRegion (convenience)
font.getCache() // internal BitmapFontCache (expert use)
font.newFontCache() // creates new independent BitmapFontCache
font.setFixedWidthGlyphs("0123456789") // make digits fixed-width for score display
font.ownsTexture() // true if font created the texture (dispose will free it)
font.setOwnsTexture(boolean) // control texture ownership
font.dispose() // disposes texture(s) IF font owns them
DO NOT use font.getBounds() — removed in libGDX 1.5.6. Use GlyphLayout for text measurement.
GlyphLayout (Text Measurement)
Computes text metrics without drawing. Implements Pool.Poolable.
Constructors
new GlyphLayout()
new GlyphLayout(BitmapFont font, CharSequence str)
new GlyphLayout(BitmapFont font, CharSequence str, Color color,
float targetWidth, int halign, boolean wrap)
new GlyphLayout(BitmapFont font, CharSequence str, int start, int end, Color color,
float targetWidth, int halign, boolean wrap, String truncate)
setText() — Reuse Without Allocating
layout.setText(font, str)
layout.setText(font, str, color, targetWidth, halign, wrap)
layout.setText(font, str, start, end, color, targetWidth, halign, wrap, truncate)
Public Fields (NOT methods)
layout.width // actual rendered width (float)
layout.height // actual rendered height (float) — distance from y to baseline
layout.runs // Array<GlyphRun> — one per line segment
layout.glyphCount // total glyphs
Centering Example
GlyphLayout layout = new GlyphLayout(font, "Hello");
float x = (screenWidth - layout.width) / 2;
float y = (screenHeight + layout.height) / 2; // y is TOP of text, so add height
font.draw(batch, layout, x, y);
Pooling
GlyphLayout layout = Pools.obtain(GlyphLayout.class);
layout.setText(font, "text");
// ... use layout.width, layout.height ...
Pools.free(layout); // calls reset(), returns to pool
Gotchas:
widthandheightare public fields, not methods.layout.widthnotlayout.getWidth().- Reuse layouts with
setText()to avoid per-frame allocation.
BitmapFontCache
Pre-computes vertex data for static text. Avoids recomputing glyph positions every frame.
BitmapFontCache cache = new BitmapFontCache(font);
BitmapFontCache cache = new BitmapFontCache(font, boolean integer);
// Or get the font's internal cache:
BitmapFontCache cache = font.getCache();
Key Methods
// setText clears then adds (returns GlyphLayout)
GlyphLayout setText(str, x, y)
GlyphLayout setText(str, x, y, targetWidth, halign, wrap)
GlyphLayout setText(str, x, y, start, end, targetWidth, halign, wrap)
GlyphLayout setText(str, x, y, start, end, targetWidth, halign, wrap, truncate)
void setText(GlyphLayout layout, x, y) // from pre-computed layout, returns VOID
// addText appends without clearing (returns GlyphLayout)
GlyphLayout addText(str, x, y)
GlyphLayout addText(str, x, y, targetWidth, halign, wrap)
GlyphLayout addText(str, x, y, start, end, targetWidth, halign, wrap)
GlyphLayout addText(str, x, y, start, end, targetWidth, halign, wrap, truncate)
void addText(GlyphLayout layout, x, y) // returns VOID
// Drawing
void draw(Batch batch) // Batch interface, not SpriteBatch
void draw(Batch batch, int start, int end) // character range
void draw(Batch batch, float alphaModulation) // alpha multiplier
// Positioning (without recomputing glyphs)
void setPosition(float x, float y)
void translate(float xAmount, float yAmount)
float getX()
float getY()
// Color
void setColor(Color color) // for FUTURE text
void setColor(float r, float g, float b, float a)
Color getColor() // color for future text
void setColors(Color tint) // overwrites ALL cached text to flat color
void setColors(float r, float g, float b, float a)
void tint(Color tint) // multiplies tint with each glyph's existing color (preserves markup colors)
void setAlphas(float alpha) // changes only alpha, preserves RGB
void clear()
Key distinction: setColor()/getColor() affect subsequently added text. setColors() and tint() affect already cached text. tint() preserves per-glyph color variation from markup; setColors() overwrites to flat color.
Color Markup
Inline color tags in text strings. Color only — no size, bold, or italic markup.
Enable
font.getData().markupEnabled = true; // default is false
Or in Skin JSON:
{ "com.badlogic.gdx.graphics.g2d.BitmapFont": {
"default-font": { "file": "myfont.fnt", "markupEnabled": true }
}}
Syntax
| Tag | Effect |
|---|---|
[RED] | Named color (case-sensitive, ALL_CAPS for built-in) |
[#FF0000] | Hex RRGGBB (alpha defaults to FF) |
[#FF0000AA] | Hex RRGGBBAA with explicit alpha |
[] | Pop to previous color (stack-based) |
[[ | Escaped literal [ character |
font.draw(batch, "[RED]Warning:[] normal text", x, y);
font.draw(batch, "[#00FF00]green [#FF000080]translucent red", x, y);
font.draw(batch, "Array index [[0]", x, y); // displays: Array index [0]
Built-in Color Names (35 total, from Colors class)
CLEAR, CLEAR_WHITE, BLACK, WHITE, LIGHT_GRAY, GRAY, DARK_GRAY, BLUE, NAVY, ROYAL, SLATE, SKY, CYAN, TEAL, GREEN, CHARTREUSE, LIME, FOREST, OLIVE, YELLOW, GOLD, GOLDENROD, ORANGE, BROWN, TAN, FIREBRICK, RED, SCARLET, CORAL, SALMON, PINK, MAGENTA, PURPLE, VIOLET, MAROON
Custom Colors
Colors.put("PERU", Color.valueOf("CD853F"));
// Then use: font.draw(batch, "[PERU]custom color[]", x, y);
Gotchas:
- Unknown color names and malformed hex codes are rendered as literal text (silently ignored).
- When using markup with Scene2D Labels, remove
fontColorfromLabelStylein skin JSON — it overrides markup colors. []is a pop operation, not "reset to default." Excess pops are silently ignored.
NinePatch
Scalable image preserving corners and edges. Used for UI backgrounds (buttons, panels).
Constructors
new NinePatch(TextureRegion region, int left, int right, int top, int bottom) // border widths in px
new NinePatch(Texture texture, int left, int right, int top, int bottom)
new NinePatch(TextureRegion... patches) // 9 explicit regions (TOP_LEFT..BOTTOM_RIGHT)
new NinePatch(TextureRegion region) // degenerate: center-only, stretches uniformly
new NinePatch(Texture texture) // degenerate: center-only
new NinePatch(NinePatch ninePatch) // copy
new NinePatch(NinePatch ninePatch, Color color)
Constructor border parameters are int, not float. Order is left, right, top, bottom.
Drawing
ninePatch.draw(Batch batch, float x, float y, float width, float height)
ninePatch.draw(Batch batch, float x, float y, float originX, float originY,
float width, float height, float scaleX, float scaleY, float rotation)
Parameter type is Batch (interface), not SpriteBatch.
Dimensions
ninePatch.getTotalWidth() // leftWidth + middleWidth + rightWidth (minimum width)
ninePatch.getTotalHeight() // topHeight + middleHeight + bottomHeight (minimum height)
ninePatch.getLeftWidth() // all six patch dimensions have getters AND setters
ninePatch.getRightWidth()
ninePatch.getTopHeight()
ninePatch.getBottomHeight()
ninePatch.getMiddleWidth()
ninePatch.getMiddleHeight()
Padding (for content insets)
ninePatch.getPadLeft() // returns padLeft if set, else getLeftWidth()
ninePatch.getPadRight() // same pattern for right/top/bottom
ninePatch.setPadding(left, right, top, bottom)
Color
ninePatch.setColor(Color color) // tint (blended with Batch color at draw time)
ninePatch.getColor() // returns mutable Color, default WHITE
From TextureAtlas
NinePatch patch = atlas.createPatch("panel"); // reads split/pad data from .atlas file
Returns null if region not found. Throws IllegalArgumentException if region has no split data. Cache the result — this method does string lookup + new allocation each call.
NinePatchDrawable (Scene2D wrapper)
NinePatchDrawable drawable = new NinePatchDrawable(ninePatch);
drawable.setPatch(ninePatch); // also sets minWidth/minHeight/padding from patch
NinePatchDrawable tinted = drawable.tint(Color.GRAY); // returns NEW drawable with tinted copy
DistanceFieldFont
Resolution-independent text using signed distance field textures. Extends BitmapFont.
DistanceFieldFont font = new DistanceFieldFont(Gdx.files.internal("myfont.fnt"));
Has 8 constructors mirroring most BitmapFont overloads (missing: no-arg default font and flip-only). Automatically sets TextureFilter.Linear on load.
Shader Setup — REQUIRED
ShaderProgram shader = DistanceFieldFont.createDistanceFieldShader(); // static method
batch.setShader(shader);
// ... draw distance field font ...
batch.setShader(null); // restore default shader for non-SDF rendering
The shader uses a u_smoothing uniform. The font's internal DistanceFieldFontCache sets this uniform automatically before/after each draw, flushing the batch as needed. This means you only need to set the shader on the batch — smoothing is handled internally.
Smoothing Control
font.setDistanceFieldSmoothing(float smoothing) // on DistanceFieldFont, NOT BitmapFont
font.getDistanceFieldSmoothing()
Smoothing is automatically scaled by getScaleX() internally.
Generating SDF Fonts
Use Hiero with the "Distance field" effect, or external tools like msdf-atlas-gen. The .fnt file format is standard BMFont; only the texture is different (stores distance values in alpha channel).
Align Constants
All lowercase. com.badlogic.gdx.utils.Align:
Align.center // 1 DO NOT use Align.CENTER (doesn't exist)
Align.top // 2
Align.bottom // 4
Align.left // 8
Align.right // 16
Align.topLeft // top | left
Align.topRight // top | right
Align.bottomLeft // bottom | left
Align.bottomRight // bottom | right
Integration Notes
- FreeType (see
libgdx-freetypeskill): Generates BitmapFont at runtime from.ttf/.otf. The result IS a BitmapFont — all APIs here apply. - Scene2D (see
libgdx-scene2d-uiskill):Labelwraps BitmapFont. Skin loads BitmapFont from.fntfiles and supportsmarkupEnabledin JSON. - AssetManager (see
gdx-assetmanagerskill): Loads BitmapFont asynchronously. Do NOT manually dispose AssetManager-loaded fonts.
Common Mistakes
- Expecting y to be the bottom of text —
yindraw()is the top of capital letters (cap height), not the baseline or bottom. To position text at a bottom y, usey + layout.height. - Using
font.getBounds()— Removed in libGDX 1.5.6. UseGlyphLayoutto measure text. - Using
font.setScale()orfont.setSize()— Neither exists on BitmapFont. Usefont.getData().setScale(). Scaling causes blurriness — generate fonts at the needed size instead. - Using
Align.CENTER— Does not exist. Align constants are lowercase:Align.center,Align.left,Align.right. - Allocating GlyphLayout every frame — Reuse with
setText()or useBitmapFontCachefor static text. GlyphLayout implementsPoolablefor pool-based reuse. - Forgetting
markupEnabledbefore using color tags — Tags render as literal text like[RED]if markup is not enabled. - Disposing AssetManager-loaded font — Causes double-dispose crash. Only dispose fonts you created with
new BitmapFont(...). - Calling
draw()outside batch.begin()/end() — Same rules as SpriteBatch. Will throw or produce no output. - Confusing NinePatch constructor parameter order — It is
left, right, top, bottom(NOT left, top, right, bottom). - Not caching
atlas.createPatch()result — Does string lookup and allocates a new NinePatch each call. Call once and store the result. - Using
draw(Batch, GlyphLayout, x, y)and expecting a return value — This overload returnsvoid. The otherdraw()overloads returnGlyphLayout. - Setting DistanceFieldFont shader but not
setDistanceFieldSmoothing()— The default smoothing value of 0 disables the SDF effect. Set a positive value (typically the font's spread value divided by the texture scale).
Source
git clone https://github.com/kyu-n/gdx-claude-skills/blob/master/skills/libgdx-bitmap-font-text/SKILL.mdView on GitHub Overview
This skill is a quick reference for rendering text with libGDX, covering BitmapFont, GlyphLayout, BitmapFontCache, NinePatch, DistanceFieldFont, and color markup. It helps you render text accurately, measure layout, and troubleshoot issues like wrong positioning, blurry scales, or NinePatch stretching.
How This Skill Works
BitmapFont is a pre-rendered font with a .fnt descriptor and texture pages. Draw methods compute layout and return a GlyphLayout; ensure batch.begin() / batch.end() surrounds draws, and use BitmapFontCache for static text when needed. The y parameter represents the top of capital letters (cap height), with metrics usable by copying from the layout if needed.
When to Use It
- Debugging wrong text position (baseline vs. cap height) in rendered text.
- Addressing blurry or scaled fonts due to filtering or scaling issues.
- Measuring text dimensions for layout and alignment using GlyphLayout.
- Diagnosing NinePatch stretching or padding issues.
- Working with DistanceFieldFont or color markup in libGDX text rendering.
Quick Start
- Step 1: Load or create a BitmapFont (e.g., new BitmapFont()) or load from a .fnt file.
- Step 2: Create a GlyphLayout if you need measurements, or draw directly with font.draw(batch, text, x, y).
- Step 3: Ensure batch.begin() / batch.end() wraps your draw calls; consider BitmapFontCache for static text.
Best Practices
- Measure with GlyphLayout before drawing when layout decisions matter.
- Remember that the draw() y coordinate is the cap height; adjust accordingly.
- Prefer integer positioning to reduce filtering artifacts by rounding positions.
- Use BitmapFontCache for static text drawn every frame to avoid per-frame layout.
- Always wrap draw calls between batch.begin() and batch.end(); copy metrics from GlyphLayout if you need them later.
Example Use Cases
- Measuring string width with GlyphLayout before placing UI elements.
- Drawing wrapped text with a targetWidth and center/right alignment.
- Rendering DistanceFieldFont for scalable, crisp text at different sizes.
- Diagnosing NinePatch stretching by comparing with and without patches.
- Applying color markup within text to highlight words using libGDX font color changes.