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 spriteconst 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
// 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 = winkingSpritestart // starts sprite animationwinkingSprite // stops sprite animation