Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NodeJS version / Doc Updates / JSON Adjustments #1

Merged
merged 1 commit into from
Apr 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@

node_modules
node_modules
font-src
font-dst
dist
72 changes: 58 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,71 @@
# Generate MSDF Textures
# Lightning 3 SDF Font Generator

### Installation
This tool converts font files (.ttf, .otf, .woff, woff2) to Signed Distance Field (SDF) fonts for use with the Lightning 3's SDF text renderer.

Make sure you have Node.js installed on your system. Then, run the following command to install dependencies:
Both multi-channel (MSDF) and single-channel (SSDF) font files are generated.

`pnpm install`
See the following resources for more information about SDF font rendering:
- https://lightningjs.io/blogs/lng3FontRendering.html
- https://github.com/Chlumsky/msdfgen?tab=readme-ov-file#multi-channel-signed-distance-field-generator

### Instructions
This tool uses [msdf-bmfont-xml](https://github.com/soimy/msdf-bmfont-xml) to generate the font JSON data and texture atlases. And also applies some adjustments to that JSON data.

1. Copy Fonts: Place all the font files you want to convert to (m)sdf fonts into the `public/fonts` directory.
2. Generate MSDF Textures: Run the following command to generate MSDF textures from the font files:
## Setup

1. Make sure you have Node.js installed on your system. Then, run the following command to install dependencies:

```
pnpm install
```

2. Copy the `font-src-sample` directory to `font-src`:

```
cp -R font-src-sample font-src
```

## Instructions

1. Copy Fonts: Place all the font files you want to convert to SDF fonts into the `font-src` directory.

2. Generate SDF Textures: Run the following command to generate SDF textures from the font files:

```
pnpm generate
```

3. Access Generated Files: The generated (m)sdf font files will be available in the `public/sdf-fonts` folder.
3. Access Generated Files: The generated SDF font files will be available in the `font-dst` directory.

## Adjusting the Charset

The contents of `font-src/charset.txt` can be modified to adjust the characters
that are included into the SDF font.

## Supported Font Extensions
## Overrides (Advanced)

The script supports the following font file extensions:
By default this tool will generate SDF fonts with these properties:
- Font Size (pixels): 42
- This is the size of the font that is rendered into the atlas texture PNG.
- Generally bigger values result in clearer fonts with less potential of artifacts. However, bigger values can also dramatically increase the size of the texture so keep this value as small as possible if you make adjustments.
- Distance Range: 4
- The distance range defines number of pixels of used in rendering the actual signed-distance field of the atlas texture.
- Generally this value shouldn't have to be adjusted, but feel free to tweak along with the font size in order to get the highest quality text rendering with the smallest atlas texture size. It **must** be a multiple of 2.

- .ttf
- .otf
- .woff
- .woff2
For each font file in the `font-src` directory you can define overrides for these values in the `font-src/overrides.json` file.

Below is an example of overriding font size and distance range for the Ubuntu-Regular font.

```
{
"Ubuntu-Regular": {
"msdf": {
"fontSize": 45
"distanceRange": 6
},
"ssdf": {
"fontSize": 50
"distanceRange": 6
}
}
}
```
File renamed without changes.
12 changes: 12 additions & 0 deletions font-src-sample/overrides.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"Comic-Sans-MS": {
"msdf": {
"fontSize": 50,
"distanceRange": 6
},
"ssdf": {
"fontSize": 70,
"distanceRange": 8
}
}
}
12 changes: 10 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,22 @@
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"generate":"bash ./scripts/gen-fonts.sh",
"start": "tsc && node dist/index.js",
"generate": "pnpm run start",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"msdf-bmfont-xml": "^2.7.0"
"@types/node": "^20.12.7",
"msdf-bmfont-xml": "^2.7.0",
"typescript": "^5.4.5"
},
"dependencies": {
"chalk": "^5.3.0",
"execa": "^8.0.1"
}
}
Loading