game-tile
In a tileset, this record contains row-major pixel palette indices. In a tilemap, its index references one pattern-bank entry. Native atlas rendering uses CSS image positions. A hardware interpreter can read the same index and palette data.
Examples
Indexed cells
An index can occur more than once. Here each index shares an authored CSS color.
<game-screen width="80" height="48">
<game-tilemap columns="2" rows="2" role="img" aria-label="Indexed terrain tiles">
<game-tile index="0" style="background:#265c67"></game-tile>
<game-tile index="1" style="background:#398f85"></game-tile>
<game-tile index="1" style="background:#398f85"></game-tile>
<game-tile index="0" style="background:#265c67"></game-tile>
</game-tilemap>
</game-screen>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>
API
| Name | Type or default | Behavior |
|---|---|---|
index |
number
Default 0 |
Zero-based pattern-bank index. |
Emitted events
None.
Listened-for events
None.
| Name | Type or default | Behavior |
|---|---|---|
--tile-x |
Pattern-bank column for CSS atlas rendering. | |
--tile-y |
Pattern-bank row for CSS atlas rendering. |