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} />

The filename of the image to be displayed

The x offset of the image

The y offset of the image

The width of the image that will be displayed

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.

The filename of the image to be displayed

The spritesheet object, to be in the form of:

{
  "<name>": {
    "x": 0,
    "y": 0,
    "width": 0,
    "height": 0
  }
}

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}
/>

The filename of the image to be displayed

The initial frame of the image

The dimensions of a single frame

The bounds of the image that will be used for displaying one frame after another.

Determines if the spritesheet is actually playing.

Loops through the animation

The speed (in milliseconds) of displaying one frame after another

See example/index.html.

MIT