limestone/Sprite

A "sprite" is an animated sequence of cells.

Cells, like a filmstrip, are pre-arranged in one or more rows and one or more columns. This component steps through those cells to create an animation.

Example:

<Sprite
	src="images/sprite-sheet.png"
	height={60}
	width={60}
	rows={5}
	columns={10}
/>

Import Usage

import Sprite from '@enact/limestone/Sprite';

Members

Sprite   Component

Renders a Sprite animation.

Import Usage

import Sprite from '@enact/limestone/Sprite';

Properties

columns

Number

The amount of animation cells spread across the X (horizontal) axis.

Default: 1

---

duration

Number

The length of the animation in milliseconds.

Default: 1000

---

height

Number

The height of a single cell in pixels.

This value is scaled automatically based on the "base" screen resolution for this theme. All measurements should be with respect to a 4k UHD display.

Default: 120

---

iterations

Number

The number of times the animation should repeat.

The JavaScript reserved word Infinity is a valid option here (set by default) that means "repeat indefinitely".

Default: Infinity

---

offsetLeft

Number

Sets the left distance that the first cell is from the top left corner.

This can be useful if you have several sprite animations in one image file.

This value is scaled automatically based on the "base" screen resolution for this theme. All measurements should be with respect to a 4k UHD display.

Default: 0

---

offsetTop

Number

Sets the top distance that the first cell is from the top left corner.

This can be useful if you have several sprite animations in one image file.

This value is scaled automatically based on the "base" screen resolution for this theme. All measurements should be with respect to a 4k UHD display.

Default: 0

---

onSpriteAnimation

Function

Event callback for when animation events occur.

This callback can be used for more fine-grained control of the sprite animation. The arguments payload contains an object with the following keys:

• animation: the animate handle https://developerhttps://developer.mozilla.org/en-US/docs/Web/API/Element/animate

• playing: boolean representing the "playing" vs "stopped" state

• paused: boolean representing whether the animation has paused

Note: Playing and paused are handled separately, since a paused animation is still in a playing state, while a stopped animation is both not paused and not playing.

---

orientation

'horizontal''vertical'

Sets the orientation of the frames on the sprite sheet (src).

A horizontal setting would indicate that the cells are arranged left to right with the next row starting below the first row. A vertical setting would indicate that the cells are arranged top to bottom with the next column starting to the right of the first column.

Default: 'horizontal'

---

rows

Number

The amount of animation cells spread across the Y (vertical) axis.

Default: 1

---

src

StringObject

The sprite-sheet image with all the cells on it.

See: ui/Imageui/Image.ImageBase.src

---

stopped

Boolean

Stops the animation from playing, resetting to the beginning.

---

width

Number

The width of a single cell in pixels.

This value is scaled automatically based on the "base" screen resolution for this theme. All measurements should be with respect to a 4k UHD display.

Default: 120