Skip to content

Add a TilemapGPULayer example covering a tileset with margin != spacing#410

Open
moufmouf wants to merge 1 commit into
phaserjs:masterfrom
moufmouf:example/tilemapgpulayer-margin-spacing
Open

Add a TilemapGPULayer example covering a tileset with margin != spacing#410
moufmouf wants to merge 1 commit into
phaserjs:masterfrom
moufmouf:example/tilemapgpulayer-margin-spacing

Conversation

@moufmouf

@moufmouf moufmouf commented Jul 17, 2026

Copy link
Copy Markdown

Adds a new test: tilemaps/tilemap gpu layer/gpu tiles with margin and spacing.js.

Every current TilemapGPULayer example uses a tileset whose margin equals its
spacing, so any confusion between the two renders identically to a correct
implementation:

Example Tileset margin spacing
copy gpu tiles.js tmw_desert_spacing 1 1
animated gpu tiles.js MedievalRTS/sample.json 32 32
cpu versus gpu.js super-mario.json 0 0

Tiled does not couple the two, and margin=1/spacing=2 is common in the wild, so
this is a gap in example coverage rather than an exotic edge case.

This example builds a tileset texture procedurally (no new binary asset) with
margin=1, spacing=2 and 32 rows. Each tile carries its own index and hue, and the
gutters between tiles are black. It renders tiles taken from sheet rows 0, 8, 16, 24
and 31 with a GPU TilemapGPULayer and a CPU TilemapLayer side by side, so the two
can be compared directly. A per-tile stride error accumulates with the tile index, so
sampling deep rows makes it visible — row 0 looks correct under any stride.

It also demonstrates the fix in phaserjs/phaser#7339: on v4.2.1 the GPU side
renders the wrong tiles from row 8 downwards, and matches the CPU side once that
lands.

Here is a demonstration of the bug in action:
image

phaserjs/phaser#7339 fixes the issue

Covers a tileset where margin != spacing (margin=1, spacing=2), which no
existing TilemapGPULayer example does - desert is 1/1, MedievalRTS 32/32 and
super-mario 0/0, so a stride computed from margin instead of spacing renders
identically to a correct one.

The sheet is built procedurally and is 32 rows tall; tiles are drawn from rows
0, 8, 16, 24 and 31 with both a GPU TilemapGPULayer and a CPU TilemapLayer, so
any per-tile stride error accumulates visibly with the row index.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant