react-sprite-image-atlas

React component to show a image sprite from an atlas configuration.

Gammafp outil

Installation

npm i react-sprite-image-atlas

React

Declaration

import { AtlasType, ObjectSize } from "./types";
declare type ImageSpriteProps = {
  imageSrc: string;
  atlasConfig: AtlasType;
  frameName: string;
  center?: boolean;
  responsive?: boolean;
  blockAtMaxSize?: boolean;
  blockAtMinSize?: boolean;
  minSize?: ObjectSize;
};
export declare type ImageSpriteComponentProps = React.DetailedHTMLProps<
  React.HTMLAttributes<HTMLDivElement>,
  HTMLDivElement
> &
  ImageSpriteProps;
declare const ImageSpriteComponent: React.FC<ImageSpriteComponentProps>;
export default ImageSpriteComponent;
export { ImageSpriteProps, AtlasType };

Usages with file config

In this example Sprite Image and Atlas file is generated by https://gammafp.com/tool/atlas-packer/

import ImageSpriteComponent from "react-sprite-image-atlas";
import atlas from "./configFiles/mario_sprites_atlas.json";

function App() {
  return (
    <div style={{ width: "400px", height: "400px" }}>
      <AnimationComponent
        imageSrc="sprites/mario_sprites.png"
        atlasConfig={atlas}
        frameName="tile001"
      />
      <AnimationComponent
        imageSrc="sprites/mario_sprites.png"
        atlasConfig={atlas}
        frameName="tile002"
      />
      <AnimationComponent
        imageSrc="sprites/mario_sprites.png"
        atlasConfig={atlas}
        frameName="tile003"
      />
    </div>
  );
}

Usages with constants

import ImageSpriteComponent, { AtlasType } from "react-sprite-image-atlas";

const marioAtlas: AtlasType = {
  frames: [
    {
      filename: "tile001",
      frame: {
        w: 16,
        h: 32,
        x: 0,
        y: 0,
      },
    },
    {
      filename: "tile003",
      frame: {
        w: 16,
        h: 32,
        x: 16,
        y: 0,
      },
    },
    {
      filename: "tile002",
      frame: {
        w: 16,
        h: 32,
        x: 32,
        y: 0,
      },
    },
    {
      filename: "tile004",
      frame: {
        w: 16,
        h: 32,
        x: 48,
        y: 0,
      },
    },
  ],
};
const frames = ["tile001", "tile002", "tile003", "tile004"];
function App() {
  return (
    <div style={{ width: "400px", height: "400px" }}>
      {frames.map((frame) => (
        <Fragment key={frame}>
          <ImageSpriteComponent
            imageSrc="sprites/mario_sprites.png"
            atlasConfig={marioAtlas}
            frameName={frame}
          />
        </Fragment>
      ))}
    </div>
  );
}

Example

git clone https://github.com/joazco/react-sprite-image-atlas.git
cd example
npm install
npm start