game-tileset
Pattern bank shared by background tilemaps and sprites. A direct image stores equal-sized tiles in row-major order. Alternatively, child game-tile records contain whitespace-separated palette indices. Pattern banks are data and are hidden visually.
Examples
Read a bitmap pattern bank
The bank describes a single row of five 32 × 32 pilot frames. The map reads frames 0, 2, and 4 from the same image using CSS background positions. The visible image inside the bank is useful when inspecting an atlas.
<game-tileset id="pilot-bank" tile-width="32" tile-height="32" style="display:block">
<img src="/games/aether-wing/pilot.png" width="160" height="32" alt="Pilot frame sheet">
</game-tileset>
<game-screen width="96" height="32">
<game-tilemap tileset="pilot-bank" columns="3" rows="1" style="--sheet-columns:5"
role="img" aria-label="Left, center, and right pilot frames">
<game-tile index="0" style="background-image:url('/games/aether-wing/pilot.png')"></game-tile>
<game-tile index="2" style="background-image:url('/games/aether-wing/pilot.png')"></game-tile>
<game-tile index="4" style="background-image:url('/games/aether-wing/pilot.png')"></game-tile>
</game-tilemap>
</game-screen>
Indexed pixel patterns
An indexed bank records the pixel colors by number. It is source data for the renderer or an exporter. This small map visualizes the four indices with authored cell styles.
<game-tileset id="indexed-ground" tile-width="2" tile-height="2">
<game-tile index="0">3 3
3 0</game-tile>
</game-tileset>
<game-screen width="48" height="48">
<game-tilemap tileset="indexed-ground" columns="2" rows="2" role="img" aria-label="Indexed ground pattern">
<span style="background:#a7debd"></span><span style="background:#a7debd"></span>
<span style="background:#a7debd"></span><span style="background:#265c67"></span>
</game-tilemap>
</game-screen>API
| Name | Type or default | Behavior |
|---|---|---|
id |
string
|
Document-unique bank reference. |
tile-width |
number
Default 8 |
Pattern width in pixels, integer 1–64. |
tile-height |
number
Default 8 |
Pattern height in pixels, integer 1–64. |
Emitted events
None.
Listened-for events
None.
CSS custom properties
None.