Shader: Shader auf Text-Objekten #169

Closed
opened 2026-09-19 11:41:52 +02:00 by meleki · 3 comments
Owner

Aus #62 („Not in this step: … text objects“).

Befund

  • Die Property Shader gibt es an Sprites und Partikel-Quellen (src/core/properties/PropertySchema.ts, Abschnitte sprite und particles), nicht an Text-Objekten.
  • Leuchtender, wabernder oder eingefärbter Text (Titel, Schadenszahlen) geht damit nicht.

Zu bauen (Vorschlag)

  • Property Shader samt Shader-Parametern auch am Text-Objekt, derselbe Weg wie beim Sprite.
  • Die UV beziehen sich auf das Rechteck des gerenderten Texts.
  • Tests: Pixelwert eines Texts mit Farb-Shader; Textänderung zur Laufzeit behält den Shader.

Offen (mit Vorschlag)

  1. Welcher Text-Renderer? Pixi zeichnet Text in eine Textur, damit sollte der Weg aus #77 (Fragment im Zeichenweg) greifen — vor dem Bau kurz prüfen, ob BitmapText/HTMLText ausgeschlossen werden müssen.
Aus #62 („Not in this step: … text objects“). ## Befund - Die Property **Shader** gibt es an Sprites und Partikel-Quellen (`src/core/properties/PropertySchema.ts`, Abschnitte `sprite` und `particles`), nicht an Text-Objekten. - Leuchtender, wabernder oder eingefärbter Text (Titel, Schadenszahlen) geht damit nicht. ## Zu bauen (Vorschlag) - Property **Shader** samt Shader-Parametern auch am Text-Objekt, derselbe Weg wie beim Sprite. - Die UV beziehen sich auf das Rechteck des gerenderten Texts. - Tests: Pixelwert eines Texts mit Farb-Shader; Textänderung zur Laufzeit behält den Shader. ## Offen (mit Vorschlag) 1. **Welcher Text-Renderer?** Pixi zeichnet `Text` in eine Textur, damit sollte der Weg aus #77 (Fragment im Zeichenweg) greifen — vor dem Bau kurz prüfen, ob `BitmapText`/`HTMLText` ausgeschlossen werden müssen.
meleki added the new label 2026-09-19 11:41:52 +02:00
admin added low-priority and removed new labels 2026-09-19 11:53:21 +02:00
admin added this to the Development project 2026-09-19 11:53:24 +02:00
admin added the shader label 2026-09-19 12:33:39 +02:00
admin added the question label 2026-09-20 13:37:15 +02:00
admin moved this to Next in Development on 2026-09-28 21:22:55 +02:00

ja, dem vorschlag nachgehen bevor du loslegst. zusätzlich wäre es noch unabhängig von shader, auch hier neben "linear" auch der filter "nearest" verfügbar sein beim font selbst (wie bei texture)

ja, dem vorschlag nachgehen bevor du loslegst. zusätzlich wäre es noch unabhängig von shader, auch hier neben "linear" auch der filter "nearest" verfügbar sein beim font selbst (wie bei texture)
image.png

wenn ich auf nearest stelle beim filter, dann sieht das pixel font so aus wie im screenshot

<img width="470" alt="image.png" src="attachments/84316830-3f7b-4e6a-9bf2-2766be843c80"> wenn ich auf nearest stelle beim filter, dann sieht das pixel font so aus wie im screenshot
4.7 KiB
Author
Owner

Done in 89aa92d.

Shader on a text: A text has a Shader row with the shader's property rows below, like a sprite. Overrides, saving, animation and Properties (type Text) know them. The UV run over the rectangle of the rendered text. A new text, font or size rasters again and keeps the shader.

Which renderer: The game drew text only through Pixi's Text (no BitmapText, no HTMLText). That one takes no custom shader and shares textures between equal texts regardless of the filter. So text is now rastered by TextPicture into a texture of its own and drawn like a sprite.

Font filter: The font asset has a Filter row (Linear / Nearest).

Why Nearest was not pixel perfect (your second comment): The grey edges come from Chrome on Windows. It rasters canvas text through DirectWrite and smooths it sideways, whatever filter is set afterwards. On Linux the same texture is clean, which is why CI never saw it. Nearest now rasters 8 times finer and cuts every 8x8 block to one texel (at least half covered = full, else empty). There are no half pixels on any system, and the texture stays one texel per world unit. The workaround (64 px at scale 0.125) is no longer needed: Nearest, size 8 (for Silkscreen), scale 1.

Not measured on Windows myself, please check in your browser.

Tests: ./check.sh 2759 tests green, e2e 30 with 7 new checks, counter-checks fail as expected.

Done in 89aa92d. **Shader on a text:** A text has a Shader row with the shader's property rows below, like a sprite. Overrides, saving, animation and `Properties` (type Text) know them. The UV run over the rectangle of the rendered text. A new text, font or size rasters again and keeps the shader. **Which renderer:** The game drew text only through Pixi's `Text` (no BitmapText, no HTMLText). That one takes no custom shader and shares textures between equal texts regardless of the filter. So text is now rastered by `TextPicture` into a texture of its own and drawn like a sprite. **Font filter:** The font asset has a Filter row (Linear / Nearest). **Why Nearest was not pixel perfect (your second comment):** The grey edges come from Chrome on Windows. It rasters canvas text through DirectWrite and smooths it sideways, whatever filter is set afterwards. On Linux the same texture is clean, which is why CI never saw it. Nearest now rasters 8 times finer and cuts every 8x8 block to one texel (at least half covered = full, else empty). There are no half pixels on any system, and the texture stays one texel per world unit. The workaround (64 px at scale 0.125) is no longer needed: Nearest, size 8 (for Silkscreen), scale 1. Not measured on Windows myself, please check in your browser. Tests: `./check.sh` 2759 tests green, e2e 30 with 7 new checks, counter-checks fail as expected.
admin moved this to Done in Development on 2026-09-29 06:25:23 +02:00
admin removed the question label 2026-10-03 19:44:09 +02:00
Sign in to join this conversation.
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: meleki/feuerwerk#169