SDF Font Generator

アトラスプレビュー

アトラスを生成するとプレビューが表示されます

右下をドラッグして高さを変更

アトラスを生成すると WebGL プレビューが有効になります

50%
140px
0.500
0.040
0.000
// アトラスを生成するとメタデータが表示されます
// Atlas parameters (from metadata.json / generator settings):
//   metadata.cutoff          = 0.5
//   metadata.distanceRange   = 16
//   metadata.atlas.glyphSize = 128
//   metadata.atlas.width     = (generate atlas)
//   metadata.atlas.height    = (generate atlas)
//   layout.padding           = 16
//   preview.textScale        = 0.5
//   preview.smoothing        = 0.04
// layoutText() from metadata.ts — used by WebGL preview
export function layoutText(
  text: string,
  metadata: AtlasMetadata,
  x: number,
  baselineY: number,
  scale: number
) {
  let cursorX = x
  const glyphSize = metadata.atlas.glyphSize // 128

  return Array.from(text).flatMap((char) => {
    const glyph = metadata.glyphs[char]
    if (!glyph) return []

    const w = glyphSize * scale
    const h = glyphSize * scale
    const quadTop = baselineY - glyph.offsetY * scale

    const instance = {
      x: cursorX,
      y: quadTop,
      w,
      h,
      u0: glyph.uv.u0,
      v0: glyph.uv.v0,
      u1: glyph.uv.u1,
      v1: glyph.uv.v1,
    }

    cursorX += glyph.advance * scale
    return [instance]
  })
}

// WebGL preview usage:
const padding = 16
const textScale = 0.5
const baselineY = padding + (metadata.atlas.glyphSize * textScale) / 2
const instances = layoutText(previewText, metadata, padding, baselineY, textScale)

WebGL プレビューで使う layoutText() と、metadata / padding / textScale を用いた配置例です。

エクスポート