### Install Dependencies with pnpm

Source: https://github.com/lightning-js/msdf-generator/blob/main/README.md

Installs project dependencies using the pnpm package manager. Ensure Node.js is installed before running.

```bash
pnpm install
```

--------------------------------

### Install and Generate SDF Fonts (Bash)

Source: https://context7.com/lightning-js/msdf-generator/llms.txt

This snippet demonstrates the installation of the generator using pnpm, setting up the font source directory, and initiating the SDF font generation process.

```bash
pnpm install
cp -R font-src-sample font-src
cp /path/to/MyFont.ttf font-src/
pnpm generate
```

--------------------------------

### Example Font Metrics JSON

Source: https://github.com/lightning-js/msdf-generator/blob/main/README.md

An example of the JSON file containing font metrics (ascender, descender, lineGap, unitsPerEm) generated for a font. These metrics are crucial for consistent text rendering.

```json
{
  "ascender": 776,
  "descender": -185,
  "lineGap": 56,
  "unitsPerEm": 1000
}
```

--------------------------------

### SdfFontInfo Interface and Example Usage

Source: https://context7.com/lightning-js/msdf-generator/llms.txt

Defines the `SdfFontInfo` interface, which represents the return type from the `genFont()` function. It includes paths to the generated font assets (JSON and PNG) and metadata such as the font name, field type, source font path, and destination directory. An example demonstrates how to use this interface after generating a font.

```typescript
interface SdfFontInfo {
  fontName: string;           // Font name without extension: "Ubuntu-Regular"
  fieldType: 'ssdf' | 'msdf'; // SDF type generated
  fontPath: string;           // Source font path: "font-src/Ubuntu-Regular.ttf"
  jsonPath: string;           // Generated JSON: "font-dst/Ubuntu-Regular.msdf.json"
  pngPath: string;            // Generated atlas: "font-dst/Ubuntu-Regular.msdf.png"
  dstDir: string;             // Destination directory: "font-dst"
}

// Example usage
const info = await genFont('MyFont.otf', 'msdf');
if (info) {
  console.log(`Generated ${info.fieldType} font: ${info.fontName}`);
  console.log(`Atlas: ${info.pngPath}`);
  console.log(`Metadata: ${info.jsonPath}`);
}
```

--------------------------------

### Override Font Size and Distance Range

Source: https://github.com/lightning-js/msdf-generator/blob/main/README.md

An example JSON configuration for overriding default SDF font generation parameters. It specifies different 'fontSize' and 'distanceRange' values for 'msdf' and 'ssdf' outputs for a specific font.

```json
{
  "Ubuntu-Regular": {
    "msdf": {
      "fontSize": 45,
      "distanceRange": 6
    },
    "ssdf": {
      "fontSize": 50,
      "distanceRange": 6
    }
  }
}
```

--------------------------------

### Copy Font Source Sample

Source: https://github.com/lightning-js/msdf-generator/blob/main/README.md

Copies the sample font source directory to the active font source directory. This sets up the initial structure for font conversion.

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

--------------------------------

### Configure Font Generation Paths (TypeScript)

Source: https://context7.com/lightning-js/msdf-generator/llms.txt

Configures the source and destination directories for SDF font generation. This function must be called before `genFont()` to establish working paths and load configuration files. It allows for custom charset file locations.

```typescript
import { setGeneratePaths, genFont } from '@lightningjs/msdf-generator';
import { adjustFont } from '@lightningjs/msdf-generator/adjustFont';

// Basic setup with default charset location
setGeneratePaths('font-src', 'font-dst');

// Custom charset file location
setGeneratePaths('fonts/input', 'fonts/output', 'config/custom-charset.json');

// After setting paths, generate fonts
const msdfFont = await genFont('Ubuntu-Regular.ttf', 'msdf');
if (msdfFont) {
  await adjustFont(msdfFont);
  console.log('Generated:', msdfFont.jsonPath, msdfFont.pngPath);
}
```

--------------------------------

### Configure SdfTrFontFace in CoreExtension.ts

Source: https://github.com/lightning-js/msdf-generator/blob/main/README.md

Shows the configuration for an SdfTrFontFace, including atlas URLs, stage reference, and optional metrics. The metrics are optional as they are encoded within the atlas data.

```typescript
// ...
stage.fontManager.addFontFace(
  new SdfTrFontFace('msdf', {
    fontFamily: 'Ubuntu',
    descriptors: {},
    atlasUrl: '/fonts/Ubuntu-Regular.msdf.png',
    atlasDataUrl: '/fonts/Ubuntu-Regular.msdf.json',
    stage,
    // NOTE: Providing these metrics for SDF fonts is optional because
    // they are encoded by this tool into the atlas data JSON data
    // itself (see the `lightningMetrics` key). If you decide to use
    // values that are different from the generated default you can
    // insert them here.
    metrics: {
      ascender: 776,
      descender: -185,
      lineGap: 56,
      unitsPerEm: 1000,
    },
  }),
);
// ...
```

--------------------------------

### Generate SDF Textures

Source: https://github.com/lightning-js/msdf-generator/blob/main/README.md

Executes the SDF font generation process using pnpm. This command converts font files in the 'font-src' directory to SDF formats and places them in 'font-dst'.

```bash
pnpm generate
```

--------------------------------

### Integrate SDF Fonts with Lightning 3 Font Manager

Source: https://context7.com/lightning-js/msdf-generator/llms.txt

Demonstrates how to register generated SDF fonts with Lightning 3's font manager. This involves creating `WebTrFontFace` for standard fonts and `SdfTrFontFace` for MSDF and SSDF variants, providing necessary URLs for atlas and metadata, and optionally overriding embedded font metrics.

```typescript
// CoreExtension.ts - Lightning 3 font registration
import { WebTrFontFace, SdfTrFontFace } from '@lightningjs/renderer';

// Register Canvas Web font with extracted metrics
stage.fontManager.addFontFace(
  new WebTrFontFace({
    fontFamily: 'Ubuntu',
    descriptors: {},
    fontUrl: '/fonts/Ubuntu-Regular.ttf',
    metrics: {
      ascender: 776,
      descender: -185,
      lineGap: 56,
      unitsPerEm: 1000,
    },
  }),
);

// Register MSDF font (metrics embedded in JSON via lightningMetrics)
stage.fontManager.addFontFace(
  new SdfTrFontFace('msdf', {
    fontFamily: 'Ubuntu',
    descriptors: {},
    atlasUrl: '/fonts/Ubuntu-Regular.msdf.png',
    atlasDataUrl: '/fonts/Ubuntu-Regular.msdf.json',
    stage,
    // Optional: override embedded metrics if needed
    metrics: {
      ascender: 776,
      descender: -185,
      lineGap: 56,
      unitsPerEm: 1000,
    },
  }),
);

// Register SSDF font
stage.fontManager.addFontFace(
  new SdfTrFontFace('ssdf', {
    fontFamily: 'Ubuntu-SSDF',
    descriptors: {},
    atlasUrl: '/fonts/Ubuntu-Regular.ssdf.png',
    atlasDataUrl: '/fonts/Ubuntu-Regular.ssdf.json',
    stage,
  }),
);
```

--------------------------------

### Batch Generate MSDF and SSDF Fonts

Source: https://context7.com/lightning-js/msdf-generator/llms.txt

Processes all font files in a source directory, generating both MSDF and SSDF variants with automatic adjustments. It requires setting the source and destination paths before calling the generateFonts function. The output includes PNG atlases and JSON metadata for each font.

```typescript
import { generateFonts } from '@lightningjs/msdf-generator';
import { setGeneratePaths } from '@lightningjs/msdf-generator';

// Process all fonts in font-src directory
setGeneratePaths('font-src', 'font-dst');
await generateFonts();

// Output structure:
// font-dst/
//   Ubuntu-Regular.msdf.json
//   Ubuntu-Regular.msdf.png
//   Ubuntu-Regular.ssdf.json
//   Ubuntu-Regular.ssdf.png
//   metrics/
//     Ubuntu-Regular.metrics.json
```

--------------------------------

### Configure WebTrFontFace in CoreExtension.ts

Source: https://github.com/lightning-js/msdf-generator/blob/main/README.md

Demonstrates how to add a WebTrFontFace to the stage's font manager in Lightning 3. It includes font family, URL, and crucially, the metrics object for layout consistency.

```typescript
// ...
stage.fontManager.addFontFace(
  new WebTrFontFace({
    fontFamily: 'Ubuntu',
    descriptors: {},
    fontUrl: '/fonts/Ubuntu-Regular.ttf',
    metrics: {
      ascender: 776,
      descender: -185,
      lineGap: 56,
      unitsPerEm: 1000,
    },
  }),
);
// ...
```

--------------------------------

### Configure Character Sets for SDF Fonts

Source: https://context7.com/lightning-js/msdf-generator/llms.txt

Defines which characters to include in the generated SDF font atlas using a `charset.config.json` file. This configuration supports custom character sets and predefined presets for common character groups like accents, numerics, and symbols. Presets can be extended from `src/presets.json`.

```json
// font-src/charset.config.json
{
  "charset": "!\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~'"",
  "presets": ["accents", "numeric", "symbols"]
}
```

```json
// Custom charset for specific languages
// font-src/charset.config.json
{
  "charset": "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",
  "presets": []
}
```

--------------------------------

### Configure Font Overrides for SDF Generation

Source: https://context7.com/lightning-js/msdf-generator/llms.txt

Allows customization of font size and distance range values per font to optimize quality and atlas texture size. Higher font sizes result in clearer glyphs but larger textures. The `distanceRange` affects SDF quality and typically requires less adjustment. Default values are `fontSize: 42` and `distanceRange: 4`.

```json
// font-src/overrides.json
{
  "Ubuntu-Regular": {
    "msdf": {
      "fontSize": 45,
      "distanceRange": 6
    },
    "ssdf": {
      "fontSize": 50,
      "distanceRange": 6
    }
  },
  "Comic-Sans-MS": {
    "msdf": {
      "fontSize": 50,
      "distanceRange": 6
    },
    "ssdf": {
      "fontSize": 70,
      "distanceRange": 8
    }
  }
}
```

```typescript
// Default values when no override specified:
// fontSize: 42 (pixels rendered into atlas)
// distanceRange: 4 (must be multiple of 2)

// Higher fontSize = clearer fonts, larger atlas texture
// distanceRange affects SDF quality, rarely needs adjustment
```

--------------------------------

### Generate MSDF and SSDF Fonts (TypeScript)

Source: https://context7.com/lightning-js/msdf-generator/llms.txt

Generates either Multi-Channel Signed Distance Field (MSDF) or Single-Channel Signed Distance Field (SSDF) fonts from a source font file. It returns information about the generated font, including paths to the JSON metadata and PNG texture atlas.

```typescript
import { setGeneratePaths, genFont, SdfFontInfo } from '@lightningjs/msdf-generator';

setGeneratePaths('font-src', 'font-dst');

// Generate MSDF font (multi-channel, higher quality)
const msdfResult: SdfFontInfo | null = await genFont('Ubuntu-Regular.ttf', 'msdf');
if (msdfResult) {
  console.log('Font name:', msdfResult.fontName);      // "Ubuntu-Regular"
  console.log('Field type:', msdfResult.fieldType);    // "msdf"
  console.log('JSON path:', msdfResult.jsonPath);      // "font-dst/Ubuntu-Regular.msdf.json"
  console.log('PNG path:', msdfResult.pngPath);        // "font-dst/Ubuntu-Regular.msdf.png"
  console.log('Source:', msdfResult.fontPath);         // "font-src/Ubuntu-Regular.ttf"
}

// Generate SSDF font (single-channel, smaller file size)
const ssdfResult = await genFont('Ubuntu-Regular.ttf', 'ssdf');
if (ssdfResult) {
  console.log('SSDF JSON:', ssdfResult.jsonPath);      // "font-dst/Ubuntu-Regular.ssdf.json"
  console.log('SSDF PNG:', ssdfResult.pngPath);        // "font-dst/Ubuntu-Regular.ssdf.png"
}
```

--------------------------------

### Adjust and Embed Font Metrics (TypeScript)

Source: https://context7.com/lightning-js/msdf-generator/llms.txt

Applies corrections to generated SDF font data to fix baseline and y-offset issues. It also extracts and embeds font metrics (ascender, descender, lineGap, unitsPerEm) into the JSON metadata and creates a separate metrics file.

```typescript
import { setGeneratePaths, genFont } from '@lightningjs/msdf-generator';
import { adjustFont } from '@lightningjs/msdf-generator/adjustFont';

setGeneratePaths('font-src', 'font-dst');

const fontInfo = await genFont('Ubuntu-Regular.ttf', 'msdf');
if (fontInfo) {
  // Apply corrections and extract metrics
  await adjustFont(fontInfo);

  // After adjustment, the JSON file contains:
  // - Corrected baseline (common.base)
  // - Corrected y-offsets for all characters
  // - lightningMetrics object with font metrics

  // A separate metrics file is also created:
  // font-dst/metrics/Ubuntu-Regular.metrics.json
  // {
  //   "ascender": 776,
  //   "descender": -185,
  //   "lineGap": 56,
  //   "unitsPerEm": 1000
  // }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.