Sprite Maker

This package helps you create pixel art image sprites.

Quickstart

Install: npm install --save spritemaker

Require: const spritemaker = require("spritemaker")

Use: makeSprite({ sprite, name, interval, pixelSize, parentId }).start()

Usage

Designing your sprite

First, you must create a representation of your sprite as array of image frames.

Each image frame is an array of rows, each cell is a hex color code.

The example below is a 3x3 image that alternates between black and white.

// template of 2 image, 3 x 3 sprite
const mySprite =
  [ // images
    [ // image
      [#FFFFF, #FFFFF, #FFFFF], // row
      [#FFFFF, #FFFFF, #FFFFF], // row
      [#FFFFF, #FFFFF, #FFFFF], // row
    ],
    [ // image
      [#000000, #000000, #000000], // row
      [#000000, #000000, #000000], // row
      [#000000, #000000, #000000], // row
    ],
  ]

Image frames can be any dimension but all image frames within a sprite must have the same dimensions.

There is no limit on number of frames.

Creating your sprite

  makeSprite({
    sprite, // required 3d array, the array representation of your sprite (see above)
    pixelSize, // optional number, the height and width of each pixel in px, defaults to 1
    interval, // optional number, milliseconds between frames
    parentId, // optional string, id of desired parent element of sprite
    name, // optional string, class name of sprite
  })
 
  // returns
  {
    sprite, // DOM node of sprite
    start, // function to start sprite
    stop, // function to stop sprite
  }

Example

const winkingFace = [
  [
    ["#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#050505", "#050505", "#FFF200", "#FFF200", "#050505", "#050505", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#050505", "#050505", "#FFF200", "#FFF200", "#050505", "#050505", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#050505", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#050505", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#050505", "#050505", "#050505", "#050505", "#050505", "#050505", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200"],
  ],
  [
    ["#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#050505", "#050505", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#050505", "#050505", "#FFF200", "#FFF200", "#050505", "#050505", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#050505", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#050505", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#050505", "#050505", "#050505", "#050505", "#050505", "#050505", "#FFF200", "#FFF200"],
    ["#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200", "#FFF200"],
  ],
]
 
const winkingSprite = makeSprite({
  sprite: winkingFace,
  name: "winking-face",
  interval: 500,
  pixelSize: 20,
  parentId: "container", // sprite gets attached to existing div with id="container"
})
 
winkingSprite.start() // starts sprite animation
winkingSprite.stop() // stops sprite animation