game-palette

Palette RAM record. Whitespace-separated colors define the indexed pattern colors. CSS variables --palette-0 through --palette-3 provide the native rendering values. The sample cycles the two grid entries using step-end keyframes.

Examples

Preview the ground palette

These are the four Emerald Reach colors. The first two fill alternating ground tiles and the last two alternate on the grid lines. The palette element records the indices and cycle rate. Aether Wing also assigns those colors to CSS properties on the ground layer.

Preview the ground palette HTML

<game-palette id="reach-colors" colors="#265c67 #398f85 #64c2a1 #a7debd"
	cycle-start="2" cycle-rate="5"></game-palette>
<game-screen width="128" height="24">
	<game-tilemap palette="reach-colors" columns="4" rows="1" role="img" aria-label="Emerald Reach palette swatches">
		<game-tile index="0" style="background:#265c67"></game-tile>
		<game-tile index="1" style="background:#398f85"></game-tile>
		<game-tile index="2" style="background:#64c2a1"></game-tile>
		<game-tile index="3" style="background:#a7debd"></game-tile>
	</game-tilemap>
</game-screen>

Alternate sector colors

The same palette indices give Amber Expanse its warmer colors.

Alternate sector colors HTML

<game-palette id="amber-colors" colors="#825658 #b17c65 #e1aa7a #f7d59c"
	cycle-start="2" cycle-rate="7"></game-palette>
<game-screen width="128" height="24">
	<game-tilemap palette="amber-colors" columns="4" rows="1" role="img" aria-label="Amber Expanse palette swatches">
		<game-tile index="0" style="background:#825658"></game-tile>
		<game-tile index="1" style="background:#b17c65"></game-tile>
		<game-tile index="2" style="background:#e1aa7a"></game-tile>
		<game-tile index="3" style="background:#f7d59c"></game-tile>
	</game-tilemap>
</game-screen>

API

Attributes
Name	Type or default	Behavior
`id`	`string`	Document-unique bank reference.
`colors`	`string`	Whitespace-separated #rrggbb colors.
`cycle-start`	`number` Default `2`	First rotating palette entry.
`cycle-rate`	`number` Default `5`	Palette changes per second, reflected in the authored CSS --cycle-rate.

Emitted events

None.

Listened-for events

None.

CSS custom properties

None.

View the Game Kit manifest