game-tilemap

A viewport-filling CSS grid. Use one element per cell, in row-major order, and style the cell or include an image. Cells beyond the declared grid are clipped. Layout uses typed CSS attr(). In a world, child game-tile elements name bank indices. Background maps use CSS atlas positions and may provide background-image, --sheet-columns and --sheet-rows for native rendering. Indexed ground maps repeat in the projected layer.

Examples

Tilemap

The map fills the screen. Cells appear in row-major order, from left to right and then top to bottom.

Tilemap HTML

<game-screen width="64" height="32">
	<game-tilemap columns="4" rows="2" role="img" aria-label="Two rows of wall and floor tiles">
		<span style="background:#263956"></span><span style="background:#263956"></span>
		<span style="background:#79b5ad"></span><span style="background:#263956"></span>
		<span style="background:#79b5ad"></span><span style="background:#79b5ad"></span>
		<span style="background:#79b5ad"></span><span style="background:#263956"></span>
	</game-tilemap>
</game-screen>

Two-by-two terrain

Ordinary cells can carry colors or images. Fill a layer by sizing its map to match the viewport.

Two-by-two terrain HTML

<game-screen width="80" height="48">
	<game-layer>
		<game-tilemap columns="2" rows="2" role="img" aria-label="Two-by-two terrain">
			<span style="background:#265c67"></span><span style="background:#398f85"></span>
			<span style="background:#398f85"></span><span style="background:#265c67"></span>
		</game-tilemap>
	</game-layer>
</game-screen>

API

Attributes
Name	Type or default	Behavior
`columns`	`number` Default `16`	Positive integer number of tile columns.
`rows`	`number` Default `12`	Positive integer number of tile rows.
`tileset`	`string`	Pattern-bank ID for tile references.
`palette`	`string`	Palette ID for indexed patterns.
`encoding`	`string`	Optional indices means whitespace-separated row-major tile indices. Otherwise use child game-tile cells.

Emitted events

None.

Listened-for events

None.

CSS custom properties
Name	Type or default	Behavior
`--sheet-columns`		Pattern-bank column count.
`--sheet-rows`		Pattern-bank row count.

View the Game Kit manifest