Skip to content

README.md

Latest commit

 

History

History
171 lines (124 loc) · 6.41 KB

README.md

File metadata and controls

171 lines (124 loc) · 6.41 KB

SnowBamboo Logo

SnowBamboo BMF

Bitmap font generator that runs in your browser

Web App • Documentation • 中文

MIT License Version

Overview

SnowBamboo BMF is a free, open-source bitmap font generator for game developers and digital creators. Create, edit, and export bitmap fonts directly in your browser — no install, no sign-up, nothing leaves your machine. SDF/MSDF rendering is built in, so text stays sharp at any scale.

Try it now at snowb.org

SnowBamboo Bitmap Font Generator Preview

Why this one

  • Zero setup. Open your browser and start working.
  • Cross-platform. Windows, Mac, Linux, ChromeOS, same behavior everywhere.
  • Privacy-first. Everything runs locally. No tracking, no uploads.
  • Smaller textures. Packing algorithms cut memory use by 30–50%.
  • SDF/MSDF built in. msdfgen compiled to WASM; text stays sharp at any scale.
  • Tabbed workspace. Work on several font projects at once.
  • Engine-ready. Exports drop into Unity, Unreal, Godot, Cocos2d, Phaser, PixiJS.
  • Littera migration. Import .ltr files and bring old projects over.

Features

Editing and design

  • Live preview. WYSIWYG editing with a text preview mode.
  • Typography. Kerning, letter spacing, baseline, per-glyph metrics.
  • Fills. Solid, gradient (linear/radial, 10 presets), image textures.
  • Strokes. Width, position (outer/middle/inner), cap/join; solid, gradient, or image fill.
  • Shadows. Multi-layer, all parameters adjustable.
  • Custom glyphs. Drag in images for icons or special characters; filenames map to character codes.
  • Project tabs. Manage multiple fonts, double-click to create or rename.
  • Character input. Unicode block picker, custom character sets.
  • Canvas. Space+drag to pan, Ctrl+scroll to zoom (25%–1,000%).
  • Sharpness. Font rendering sharpness is adjustable.

SDF/MSDF rendering

  • Five modes. SDF, PSDF, MSDF, MTSDF, standard bitmap.
  • msdfgen WASM. Emscripten-compiled, near-native distance field generation.
  • Tunable. Distance range, angle threshold, coloring strategy (Simple/Ink Trap/Distance), error correction, fill rule.
  • Channel output. White/Black, Black/White, White/Alpha, Black/Alpha.
  • Scale-independent. Sharp at any size if the engine supports SDF shaders.

File formats

Import: .sbf, .ltr, TTF/OTF/WOFF/TTC

Export: AngelCode BMFont Text, XML, Binary, JSON, C Header, PNG atlases, MSDF Atlas JSON

Engine support

Exports work with Unity (TextMesh Pro/legacy), Unreal Engine (Slate/UMG), Godot, Cocos2d/Creator, Phaser 3/PixiJS. Standard BMFont format, so custom engines can read the files too.

Under the hood

  • Rendering. React 19 + Canvas API. Heavy work runs in Web Workers.
  • Packing. Worker pool runs MaxRects/Guillotine/Shelf. Auto, Fixed, and Adaptive modes. Multi-page.
  • PWA. Works offline. In-app update prompts.
  • Type safe. TypeScript strict mode, Legend State v2 for reactive state.

Stack

Category Technology
Framework React 19, TypeScript 5.8+
Build Vite 7
State Management Legend State v2
UI Components Material-UI v7, Emotion CSS-in-JS
WASM msdfgen (SDF/MSDF generation), FreeType (font parsing)
Testing Vitest, React Testing Library
Graphics Canvas API, Web Workers
Serialization Protocol Buffers (.sbf format)
PWA Workbox service worker
Monitoring Sentry

Quick Start

Prerequisites

  • Node.js 18+ and Yarn package manager

Install and run

# Clone the repository
git clone https://github.com/SilenceLeo/snowb-bmf.git
cd snowb-bmf

# Install dependencies
yarn install

# Start development server
yarn start

Open http://localhost:3000.

Production build

yarn build
yarn preview        # check locally before deploying

Development

Commands

# Development
yarn start                    # Start Vite dev server (port 3000)
yarn test                     # Run Vitest tests

# Code quality
yarn lint                     # Run ESLint
yarn lint:fix                 # Auto-fix linting issues
yarn lint:check               # Check with zero warnings
yarn format                   # Format with Prettier

# Build and deploy
yarn build                    # Build production bundle
yarn build:all                # Complete build pipeline (app + docs + sitemap)
yarn preview                  # Preview production build locally
yarn deploy                   # Deploy to GitHub Pages

# Utilities
yarn pb                       # Generate Protocol Buffer definitions
yarn find-unused              # Find unused files
yarn find-unused:cleanup      # Remove unused files

Architecture

  • State: Legend State v2 observables (src/store/legend/)
  • Packing: Web Worker pool, MaxRects/Guillotine (src/utils/PackingEngine.ts)
  • Persistence: IndexedDB via Dexie, Protocol Buffers for serialization
  • SDF: msdfgen compiled to WASM via Emscripten
  • Lint/format: ESLint 9 flat config, Prettier with import sorting, Husky pre-commit

License

MIT. See LICENSE.

Third-party licenses: THIRD_PARTY_LICENSES.md.

Acknowledgments

  • msdfgen by Viktor Chlumsky — multi-channel signed distance field generator
  • FreeType — font rendering library
  • fontkit by Devon Govett — font engine supporting OpenType, TrueType, WOFF, WOFF2, TTC