This package exports a component named <Spritulus/> that adds animated sprites from Spritulus to your web apps.
This requires the following to use the component:
• Node.js 22+ • React 16+
Install via npm:
npm install spritulusImport and use the Spritulus component in your React application:
import Spritulus from 'spritulus';
function App() {
return (
<div>
<h1>My Game Character</h1>
<Spritulus
id="cpt-misfortune-44"
animationName="idle"
/>
</div>
);
}| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
id |
string |
Yes | - | The sprite identifier (e.g., "sprite-captain-misfortune-44") |
animationName |
string |
Yes | - | The animation to play (e.g., "idle", "run", "bow") from the sprite's JSON file |
flipped |
boolean |
No | false |
Whether to flip the sprite horizontally |
import { useState } from 'react';
import Spritulus from 'spritulus';
function GameCharacter() {
const [animation, setAnimation] = useState('Idle');
const [flipped, setFlipped] = useState(false);
return (
<div>
<Spritulus
id="cpt-misfortune-44"
animationName={animation}
flipped={flipped}
/>
<div>
<button onClick={() => setAnimation('idle')}>Idle</button>
<button onClick={() => setAnimation('run')}>Run</button>
<button onClick={() => setAnimation('bow')}>Bow</button>
<button onClick={() => setFlipped(!flipped)}>Flip</button>
</div>
</div>
);
}Want to see Spritulus in action? This repository includes an interactive demo showcasing the component with Captain Misfortune.
To run the demo locally:
npm run demoThis will launch a development server where you can test different animations and see the component working in real-time. The demo includes controls to switch between animations (Idle, Walk, Run) and flip the sprite horizontally.