react-sprite-image-atlas
v1.0.0
Published
React component to a image sprite from an atlas configuration
Downloads
5
Maintainers
Readme
react-sprite-image-atlas
React component to show a image sprite from an atlas configuration.
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