Repository navigation
Commit 66909ae
Examples: Jungle Rabbit draws every label from a baked atlas (#1752)
* Examples: Jungle Rabbit draws every label from a baked atlas
The text was soft where every sprite was crisp, and differently soft in each
browser. That was never the scale factor: `Text` draws through `fillText`,
which anti-aliases glyph edges into partial alpha before any scaling happens,
and the upscale from the 480x270 frame magnifies each grey edge pixel into a
grey block. Measured on the display face, every size from 6 to 40 leaves
between 18% and 80% of its ink on partial alpha, so no setting was going to
make it crisp. Engines ship different font rasterizers, which is the rest of
the answer: the same label, the same size, a different texture.
So every label is now a `BitmapText` drawn from an atlas baked to two colours
and nothing in between, with the ramp and the outline baked in. Three sizes,
each baked AT the size it is drawn and used at a ratio of 1, because doubling
a smaller atlas halves the detail and this face loses its counters first. The
combo label is a second PAGE against the same descriptor rather than a second
font, since `fillStyle` on a bitmap face is a flat tint and no single
multiplier maps one ramp's two ends onto another's.
The title and the game-over heading ride a `glyphEffect` wave, and the death
banner takes a decaying shake. Both are offsets inside the batch the label
already draws, so they cost no draw call and no re-layout. Neither was
available before: `glyphEffect` is a `BitmapText` feature with no equivalent
on `Text`, so this is something the conversion bought rather than a cost of
it.
Also here, because the conversion is what surfaced them:
- The files are grouped the way Earth Defender's are, into `entities`, `fx`,
`lib`, `scenes`, `shaders` and `ui`, with the bootstrap left at the root.
- The per-line menu helper is gone. It existed because `Text` re-anchors a
gradient to every line box and re-rasterizes its whole canvas on `setText`;
a baked atlas does neither, and `BitmapText` aligns each line itself.
- The display face is credited on the title screen. It is the one asset in
this example whose licence makes attribution a condition rather than a
courtesy, and it was the only one missing. The comment next to the credits
claimed the opposite, that the music required it, which it does not.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NGvtaUNATVCVxD2qcbiY4t
* Docs: what makes a per-glyph effect read as motion
The `glyphEffect` docs described the API accurately and still led to a wave
that looks like a mechanism, because the example took its phase from
`ctx.index`. A per-glyph step advances the wave as far across a narrow glyph
as a wide one, so its wavelength stretches and squashes with whatever the line
spells, and the eye reads that unevenness as machinery. `ctx.x` gives the wave
one length in pixels and lets it travel at a constant rate.
Two more that only show up once something is built with it. Offsets are added
to the glyph destination unchanged, so on an upscaled low-resolution frame a
fractional offset makes the glyph's OWN pixels come out uneven, differently
each frame, which is a shimmer rather than movement; rounding them fixes it,
for the same reason `subPixel` defaults to false. And a shake is not a sine: a
sine moves the whole line as one body however fast it runs, where a shake
wants each glyph thrown somewhere unrelated to its neighbours.
Fixes the example in both the API docs and the skill, documents the two
gotchas on the fields they belong to, and adds a complete wave and shake that
can be pasted and run, with starting values given as fractions of the font
size so they carry across sizes.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NGvtaUNATVCVxD2qcbiY4t
---------
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>1 parent d82b867 commit 66909ae
28 files changed
Lines changed: 910 additions & 299 deletions
File tree
- packages
- examples
- public/assets/jungleRabbit/font
- src/examples/jungleRabbit
- entities
- fx
- lib
- scenes
- shaders
- ui
- melonjs
- skills/melonjs-ui-and-text
- src/renderable/text
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
188 | 188 | | |
189 | 189 | | |
190 | 190 | | |
191 | | - | |
| 191 | + | |
| 192 | + | |
192 | 193 | | |
193 | 194 | | |
194 | 195 | | |
| |||
199 | 200 | | |
200 | 201 | | |
201 | 202 | | |
202 | | - | |
| 203 | + | |
| 204 | + | |
| 205 | + | |
| 206 | + | |
| 207 | + | |
| 208 | + | |
| 209 | + | |
| 210 | + | |
| 211 | + | |
| 212 | + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
| 1 | + | |
| 2 | + | |
| 3 | + | |
| 4 | + | |
| 5 | + | |
| 6 | + | |
| 7 | + | |
| 8 | + | |
| 9 | + | |
| 10 | + | |
| 11 | + | |
| 12 | + | |
| 13 | + | |
| 14 | + | |
| 15 | + | |
| 16 | + | |
| 17 | + | |
| 18 | + | |
| 19 | + | |
| 20 | + | |
| 21 | + | |
| 22 | + | |
| 23 | + | |
| 24 | + | |
| 25 | + | |
| 26 | + | |
| 27 | + | |
| 28 | + | |
| 29 | + | |
| 30 | + | |
| 31 | + | |
| 32 | + | |
| 33 | + | |
| 34 | + | |
| 35 | + | |
| 36 | + | |
| 37 | + | |
| 38 | + | |
| 39 | + | |
| 40 | + | |
| 41 | + | |
| 42 | + | |
| 43 | + | |
| 44 | + | |
| 45 | + | |
| 46 | + | |
| 47 | + | |
| 48 | + | |
| 49 | + | |
| 50 | + | |
| 51 | + | |
| 52 | + | |
| 53 | + | |
| 54 | + | |
| 55 | + | |
| 56 | + | |
| 57 | + | |
| 58 | + | |
| 59 | + | |
| 60 | + | |
| 61 | + | |
| 62 | + | |
| 63 | + | |
| 64 | + | |
| 65 | + | |
| 66 | + | |
| 67 | + | |
| 68 | + | |
| 69 | + | |
| 70 | + | |
| 71 | + | |
| 72 | + | |
| 73 | + | |
| 74 | + | |
| 75 | + | |
| 76 | + | |
| 77 | + | |
| 78 | + | |
| 79 | + | |
| 80 | + | |
| 81 | + | |
| 82 | + | |
| 83 | + | |
| 84 | + | |
| 85 | + | |
| 86 | + | |
| 87 | + | |
| 88 | + | |
| 89 | + | |
| 90 | + | |
| 91 | + | |
| 92 | + | |
| 93 | + | |
| 94 | + | |
| 95 | + | |
| 96 | + | |
| 97 | + | |
| 98 | + | |
| 99 | + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
| 1 | + | |
| 2 | + | |
| 3 | + | |
| 4 | + | |
| 5 | + | |
| 6 | + | |
| 7 | + | |
| 8 | + | |
| 9 | + | |
| 10 | + | |
| 11 | + | |
| 12 | + | |
| 13 | + | |
| 14 | + | |
| 15 | + | |
| 16 | + | |
| 17 | + | |
| 18 | + | |
| 19 | + | |
| 20 | + | |
| 21 | + | |
| 22 | + | |
| 23 | + | |
| 24 | + | |
| 25 | + | |
| 26 | + | |
| 27 | + | |
| 28 | + | |
| 29 | + | |
| 30 | + | |
| 31 | + | |
| 32 | + | |
| 33 | + | |
| 34 | + | |
| 35 | + | |
| 36 | + | |
| 37 | + | |
| 38 | + | |
| 39 | + | |
| 40 | + | |
| 41 | + | |
| 42 | + | |
| 43 | + | |
| 44 | + | |
| 45 | + | |
| 46 | + | |
| 47 | + | |
| 48 | + | |
| 49 | + | |
| 50 | + | |
| 51 | + | |
| 52 | + | |
| 53 | + | |
| 54 | + | |
| 55 | + | |
| 56 | + | |
| 57 | + | |
| 58 | + | |
| 59 | + | |
| 60 | + | |
| 61 | + | |
| 62 | + | |
| 63 | + | |
| 64 | + | |
| 65 | + | |
| 66 | + | |
| 67 | + | |
| 68 | + | |
| 69 | + | |
| 70 | + | |
| 71 | + | |
| 72 | + | |
| 73 | + | |
| 74 | + | |
| 75 | + | |
| 76 | + | |
| 77 | + | |
| 78 | + | |
| 79 | + | |
| 80 | + | |
| 81 | + | |
| 82 | + | |
| 83 | + | |
| 84 | + | |
| 85 | + | |
| 86 | + | |
| 87 | + | |
| 88 | + | |
| 89 | + | |
| 90 | + | |
| 91 | + | |
| 92 | + | |
| 93 | + | |
| 94 | + | |
| 95 | + | |
| 96 | + | |
| 97 | + | |
| 98 | + | |
| 99 | + | |
0 commit comments