React Component for Spritulus Sprites

This package exports a component named <Spritulus/> that adds animated sprites from Spritulus to your web apps.

Requirements

This requires the following to use the component:

• Node.js 22+ • React 16+

Installation

Install via npm:

npm install spritulus

Usage

Import 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>
  );
}

Props

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

Example with Animation Control

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>
  );
}

Demo

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 demo

This 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.