enact logoEnact
Edit on GitHub

sandstone/Sprite

A "sprite" is an animated sequence of cells.

Cells, like a film-strip, 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 Sprite from '@enact/sandstone/Sprite';

Members

SpriteComponent

Renders a Sprite animation.

import Sprite from '@enact/sandstone/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:

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 of the cells on it.

See: ui/Image.Image.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
ArrayBooleanFunctionModuleNumberObjectString