Skip to content
Web tool for creation of MSDF bitmap font spritesheets and JSON
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
client Add texture size config. (fixes #11, fixes #5) Jul 14, 2018
data/tasks Initial commit. Jan 30, 2018
fonts Initial commit. Jan 30, 2018
public Add texture size config. (fixes #11, fixes #5) Jul 14, 2018
.dockerignore
.gitignore Add VueJS, preview, loading spinner, SkeletonCSS. Feb 10, 2018
Dockerfile
README.md Move from GCP to Now. Feb 11, 2018
package-lock.json Update msdf-bmfont-xml. Feb 17, 2018
package.json Update msdf-bmfont-xml. Feb 17, 2018
server.js Add texture size config. (fixes #11, fixes #5) Jul 14, 2018

README.md

msdf-bmfont-web

Web tool for creation of MSDF bitmap font spritesheets and JSON, using msdf-bmfont-xml.

Overview

The A-Frame text component, based on three-bmfont-text, use multi-channel signed distance (MSDF) fonts. MSDF helps to preserve sharp corners and edges in WebGL.

Bitmap font rendering limits you to the characters included in the font (Unicode this is not), and in languages like Chinese, the number of possible characters is very large. So, as best practice, developers should load only the characters needed for a particular experience.

This web tool provides a simple interface for creating MSDF fonts. It does not (yet) expose any of the msdfgen options, but those may be added to the UI in the future.

Using MSDF fonts with A-Frame

This tool uses a newer version of msdfgen, and to use them with A-Frame it is necessary to set text.negate=false. This flag is currently available on A-Frame master and will be released with A-Frame 0.8.0.

<a-text value="你好,世界"
        font="custom-msdf.json"
        color="#33C3F0"
        negate="true">
</a-text>

Alternatives

MSDF fonts may be generated with Hiero. See this guide for generating SDF fonts.

Screenshot

screenshot

Local development

npm install
npm run dev
You can’t perform that action at this time.