Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/donmccurdy/msdf-bmfont-web
Web tool for creation of MSDF bitmap font spritesheets and JSON
https://github.com/donmccurdy/msdf-bmfont-web
Last synced: 2 days ago
JSON representation
Web tool for creation of MSDF bitmap font spritesheets and JSON
- Host: GitHub
- URL: https://github.com/donmccurdy/msdf-bmfont-web
- Owner: donmccurdy
- Created: 2018-01-30T06:36:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-06-26T00:21:15.000Z (over 3 years ago)
- Last Synced: 2023-11-07T18:21:23.093Z (11 months ago)
- Language: JavaScript
- Homepage: http://msdf-bmfont.donmccurdy.com/
- Size: 237 KB
- Stars: 122
- Watchers: 9
- Forks: 15
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# msdf-bmfont-web
Web tool for creation of MSDF bitmap font spritesheets and JSON, using [msdf-bmfont-xml](https://github.com/soimy/msdf-bmfont-xml).
## Overview
The A-Frame `text` component, based on [three-bmfont-text](https://github.com/Jam3/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.
```html
```
## Alternatives
MSDF fonts may be generated with [Hiero](https://github.com/libgdx/libgdx/wiki/Hiero). [See this guide for generating SDF fonts](https://github.com/libgdx/libgdx/wiki/Distance-field-fonts).
## Screenshot
![screenshot](https://user-images.githubusercontent.com/1848368/36068226-18e1c3ec-0e85-11e8-81a6-b83cde3dcdd1.png)
## Local development
```
npm install
npm install --global nownow dev
```