アトラスプレビュー
アトラスを生成するとプレビューが表示されます
—
—
右下をドラッグして高さを変更
アトラスを生成すると 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 を用いた配置例です。
エクスポート