<sprite>

<sprite> draws an image from the game’s art, or an item’s icon.

src/inventory.ts2

<sprite x={44} y="center" w={18} h={18} sprite={Icons.COINS} />

Reference

<sprite>

Props

<sprite> accepts all common props, plus:

• sprite: A sprite reference. The image to draw.
• item: An item reference. Draws that item’s icon instead of a sprite.
• itemCount: A number. The stack size drawn over an item, and what picks the heap sprite for a stackable item. -1 draws no number.
• itemCountMode: "auto", "never" or "always". Whether the number is drawn: "auto" draws it for a stackable item only, "never" draws none, "always" draws it whatever the item. Independent of itemCount, which is the quantity itself.
• tiling: A boolean. Repeats the sprite to fill the component instead of stretching it.
• transparency: A number from 0 to 255, where 0 is opaque.
• angle2d: A number. Rotation in the plane of the screen.
• hflip, vflip: Booleans. Mirror the sprite horizontally or vertically — the right-hand half of a frame drawn from the left-hand art.
• outline: A number. Draws an outline around the sprite’s shape.
• shadowColor: A number, as 0xRRGGBB. Draws a drop shadow behind the sprite.
• clickMask: A sprite reference. Restricts which pixels respond to the pointer to the opaque parts of that mask.
• deferred: A boolean. Leave the definition’s value for this sprite’s state-reading props until the state first moves — see common props.

Caveats

• sprite and item are alternatives. Set one.
• An item with no itemCount and no itemCountMode draws a 0 over itself. Write itemCountMode="never" for an icon with no number on it, or itemCount={-1}, or the real count.
• A sprite with no sprite and no item draws nothing, silently.
• A component’s size is whatever you give it; the sprite is stretched to fit. Use w="aspect" or h="aspect" to keep the natural proportions, or tiling to repeat rather than stretch.
• Through a ref, item and itemCount are written together as ref.props = { item, itemCount } — see useRef.

Usage

Drawing an image

src/inventory.ts2

<sprite x={44} y="center" w={18} h={18} sprite={Icons.COINS} />

Drawing an item with its stack size

src/inventory.ts2

<sprite x="center" y="center" w={36} h={32} item={item} itemCount={count}

Drawing an item with no number

src/menu.ts2

<sprite x="center" y="center" w={36} h={32} item={Items.RUNE_SCIMITAR} itemCountMode="never" />

Tiling a background

src/chrome.ts2

<sprite w="fill" h="fill" sprite={Chrome.BACKDROP} tiling />

Mirroring art

src/armoury.ts2

<sprite x={{ center: -14 }} y="center" w={25} h={30} sprite={Chrome.CORNER_TOP_LEFT} />
<sprite x={{ center: 14 }} y="center" w={25} h={30} sprite={Chrome.CORNER_TOP_LEFT} hflip />

Swapping the image on hover

src/chrome.ts2

<sprite x={{ right: 3 }} y={6} w={26} h={23} sprite={Chrome.CLOSE}
        hover={{ sprite: Chrome.CLOSE_HOVER }} tiling options={['Close']} />

Drawing an item from a game variable

src/status.ts2

<sprite x="right" y="center" w={36} h={32} item={shown} itemCountMode="never" />

Troubleshooting

My sprite is stretched

Give one axis "aspect", or use tiling if it is a texture rather than a picture.

There is a yellow 0 over my item icon

Write itemCountMode="never" to draw no number, or the real count to draw that.

Clicks register outside the visible shape

A component’s clickable area is its rectangle. Set clickMask to the sprite’s own art so only the opaque pixels respond.