https://github.com/frostney/react-spritesheet
Spritesheets for React
https://github.com/frostney/react-spritesheet
react sprite sprites spritesheet
Last synced: 8 days ago
JSON representation
Spritesheets for React
- Host: GitHub
- URL: https://github.com/frostney/react-spritesheet
- Owner: frostney
- License: mit
- Created: 2016-03-13T13:34:16.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-23T11:38:07.000Z (about 8 years ago)
- Last Synced: 2025-04-12T20:47:35.564Z (10 days ago)
- Topics: react, sprite, sprites, spritesheet
- Language: JavaScript
- Size: 11.7 KB
- Stars: 34
- Watchers: 2
- Forks: 9
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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.
```jsx
```
#### Props
##### filename
###### Type: `String`
The filename of the image to be displayed
##### x
###### Type: `Number`
The x offset of the image
##### y
###### Type: `Number`
The y offset of the image
##### width
###### Type: `Number`
The width of the image that will be displayed
##### height
###### Type: `Number`
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.
```jsx
const spriteSheet = {
image1: {
x: 0,
y: 0,
width: 100,
height: 100,
},
image2: {
x: 100,
y: 0,
width: 100,
height: 100,
},
};
```
For generating a spritesheet object, take a look at [TexturePacker](https://www.codeandweb.com/texturepacker) or [spritesmith](https://github.com/Ensighten/spritesmith).
#### Props
##### filename
###### Type: `String`
The filename of the image to be displayed
##### data
###### Type: `Object`
The spritesheet object, to be in the form of:
```json
{
"": {
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
}
```
##### sprite
###### Type: `String`
The name of the sprite that should be displayed
### AnimatedSpriteSheet
Similar to `Sprite`, but displays one sprite after another at a particular speed.
```jsx
```
#### Props
##### filename
###### Type: `String`
The filename of the image to be displayed
##### initialFrame
###### Type: `Number`
###### Default: `0`
The initial frame of the image
##### frame
###### Type: `Object`
The dimensions of a single frame
##### bounds
###### Type: `Object`
The bounds of the image that will be used for displaying one frame after another.
##### isPlaying
###### Type: `Boolean`
###### Default: `true`
Determines if the spritesheet is actually playing.
##### loop
###### Type: `Boolean`
###### Default: `true`
Loops through the animation
##### speed
###### Type: `Number`
###### Default: `300`
The speed (in milliseconds) of displaying one frame after another
## Example
See `example/index.html`.
## License
MIT