Put a shader on a text and draw pixel fonts sharp (#169)
A text could not wear a shader, and a pixel font was always smoothed. Pixi's Text takes no custom shader. It also shares one texture between texts of the same content and style, and the filter is not part of that key, so two equal texts with different filters would overwrite each other. - TextPicture rasters a text into a texture of its own and draws it like a sprite. Shader, time animation and edge mode work without a special path. A new text, font or size rasters again and keeps the shader. - The old texture is dropped only after the shader holds the new one. Before, Pixi warned about a destroyed texture that was still bound. - A text has a Shader row with the shader's property rows below, as a sprite has. Overrides, saving, animation and the Properties node (type Text) know them. A shader parameter named like an own row of the text loses to that row, as on the particle source. - The font asset has a Filter row, Linear or Nearest. The row existed three times already (texture, vector art, pixel art) and is now one helper filterRow. - Nearest rasters the text 8 times finer and cuts every 8x8 block to one texel: at least half covered is full, else empty. Chrome on Windows smooths canvas text sideways through DirectWrite whatever filter we set later. The cut removes those half pixels on every system, and the texture stays one texel per world unit. Found on the way: - On a font that is no pixel font thin strokes break apart under Nearest. For a pixel font at its own size this does not matter. Not done: - The preview in the Shader tab does not take a selected text as its picture, it shows the test picture then. Tests: - ./check.sh: 189 files, 2759 tests, CHECK EXIT 0. - text-shader.test.ts with 10 tests: rows and name precedence, a clamped override, save and load, animation, the font filter, and sharpCoverage on a smoothed edge and at the texture border. - e2e 30 has 7 new checks: red glyphs through the shader picked with the mouse, the shader survives a new text, red in the game, soft edges under Linear, clean 4x4 blocks under Nearest, and half covered texels (Linear 238, Nearest 0). - Full local run before the Nearest cut: all passed, 1543 checks. GM_STEPS=1,30 on the final bundle: all passed, 32 checks. The sum 1544 in the README is counted from these two runs, not measured. - Counter-checks fail as expected: in the browser no shader on a text fails 30h-30j, an always linear sampler fails the Nearest check, the old 1:1 raster leaves 107 half covered texels and fails 30k-ii. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
ef2600493f
commit
89aa92d2e3
13 files changed
+578
-101
No files matched your search
@@ -379,7 +379,7 @@ export function animatableDefsOf(
|
||||
const declared =
|
||||
asset.type === 'behavior'
|
||||
? asset.variables
|
||||
: asset.type === 'sprite'
|
||||
: asset.type === 'sprite' || asset.type === 'text'
|
||||
? shaderParamRows(project, shaderOf(bag))
|
||||
: [];
|
||||
const taken = new Set(own.map((d) => d.key));
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { findAsset, type Project } from './Project';
|
||||
import { textOf } from './Properties';
|
||||
|
||||
/** Mirrors `FontStore::isValidName` on the server, where the name is derived from the bytes. */
|
||||
const FILE_PATTERN = /^[a-f0-9]{64}\.(ttf|otf|woff|woff2)$/;
|
||||
@@ -16,6 +17,15 @@ export function fontFamilyOf(file: string): string {
|
||||
return `gm-font-${file.slice(0, 16)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the face a `font` property points at is drawn smoothed, the font asset's Filter row the
|
||||
* way it is a texture's. The editor's own typeface, and a dangling id, are smooth.
|
||||
*/
|
||||
export function fontSmoothOf(project: Project, id: string): boolean {
|
||||
const asset = id === '' ? undefined : findAsset(project, id);
|
||||
return asset?.type !== 'font' || textOf(asset.props.filter ?? 'linear') !== 'nearest';
|
||||
}
|
||||
|
||||
/** The file a `font` property points at, empty when the id is unset or no longer resolves. */
|
||||
export function fontFileOf(project: Project, id: string): string {
|
||||
if (id === '') return '';
|
||||
|
||||
Reference in new issue
Block a user