sprite2bitmap

Convert sprite images to 16×16 binary bitmap arrays for embedded systems, game development, and low-level code (Rust, C, etc.).

Installation

npm install sprite2bitmap

Usage

Core API (Framework-agnostic)

import { convertToBitmap, imageToBitmap } from 'sprite2bitmap';

// From URL or File
const result = await convertToBitmap('sprite.png', {
  threshold: 128,    // Brightness threshold (0-255)
  format: 'binary'   // 'binary' | 'hex' | 'array'
});

console.log(result.formatted);
// [
//     0b0000001111000000,
//     0b0000011111100000,
//     ...
// ]

// From HTMLImageElement
const img = document.querySelector('img');
const result = imageToBitmap(img, { threshold: 100 });

React Component

import { ImageToBinaryConverter } from 'sprite2bitmap';
import { Upload, Copy, Check } from 'lucide-react';

function App() {
  return (
    <ImageToBinaryConverter
      defaultThreshold={128}
      format="binary"
      icons={{ Upload, Copy, Check }}
      onConvert={(result) => console.log(result.bitmap)}
    />
  );
}

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | threshold | number | 128 | Brightness threshold (0-255) | | size | number | 16 | Output grid size | | borderless | boolean | true | Set border pixels to 0 | | format | string | 'binary' | 'binary', 'hex', or 'array' |

Note: Border pixels (first/last row and column) are automatically set to 0, creating a 14×14 active area within the 16×16 grid.

Example

Input

Output

Piece::Bishop => [
    0b0000000000000000,
    0b0000001111000000,
    0b0000001111000000,
    0b0000000110000000,
    0b0000000110000000,
    0b0000001111000000,
    0b0000011110100000,
    0b0001111101111000,
    0b0001111111111000,
    0b0001111111111000,
    0b0001111111111000,
    0b0000111111110000,
    0b0000111111110000,
    0b0001111111111000,
    0b0011111111111100,
    0b0000000000000000,
],

In Action

Chess Telegram bot (Rust) using the generated bitmap arrays:

License

MIT