README
react-spritesheet
Spritesheets for React
Installation
npm install react-spritesheet
Usage
This module exports three components:
Sprite
This component is for displaying a part of a bigger image - a rectangular cutout as you will.
<Sprite filename="hello.png" x={40} y={40} width={40} height={40} />
Props
filename
String
Type: The filename of the image to be displayed
x
Number
Type: The x offset of the image
y
Number
Type: The y offset of the image
width
Number
Type: The width of the image that will be displayed
height
Number
Type: The height of the image that will be displayed
SpriteSheet
Providing an image and a spritesheet object, this will display an image from the pre-defined object.
const spriteSheet = {
image1: {
x: 0,
y: 0,
width: 100,
height: 100,
},
image2: {
x: 100,
y: 0,
width: 100,
height: 100,
},
};
<SpriteSheet filename="myimage.png" data={spriteSheet} sprite="image1" />
For generating a spritesheet object, take a look at TexturePacker or spritesmith.
Props
filename
String
Type: The filename of the image to be displayed
data
Object
Type: The spritesheet object, to be in the form of:
{
"<name>": {
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
}
sprite
String
Type: The name of the sprite that should be displayed
AnimatedSpriteSheet
Similar to Sprite
, but displays one sprite after another at a particular speed.
<AnimatedSpriteSheet
filename="myimage.png"
initialFrame={0}
frame={{ width: 120, height: 120 }}
bounds={{ x: 0, y: 0, width: 480, height: 120 }}
isPlaying
loop
speed={300}
/>
Props
filename
String
Type: The filename of the image to be displayed
initialFrame
Number
Type: 0
Default: The initial frame of the image
frame
Object
Type: The dimensions of a single frame
bounds
Object
Type: The bounds of the image that will be used for displaying one frame after another.
isPlaying
Boolean
Type: true
Default: Determines if the spritesheet is actually playing.
loop
Boolean
Type: true
Default: Loops through the animation
speed
Number
Type: 300
Default: The speed (in milliseconds) of displaying one frame after another
Example
See example/index.html
.
License
MIT