Spritesheets for React
npm install react-spritesheet
This module exports three components:
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} />
String
The filename of the image to be displayed
Number
The x offset of the image
Number
The y offset of the image
Number
The width of the image that will be displayed
Number
The height of the image that will be displayed
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.
String
The filename of the image to be displayed
Object
The spritesheet object, to be in the form of:
{
"<name>": {
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
}
String
The name of the sprite that should be displayed
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}
/>
String
The filename of the image to be displayed
Number
0
The initial frame of the image
Object
The dimensions of a single frame
Object
The bounds of the image that will be used for displaying one frame after another.
Boolean
true
Determines if the spritesheet is actually playing.
Boolean
true
Loops through the animation
Number
300
The speed (in milliseconds) of displaying one frame after another
See example/index.html
.
MIT