Awesome

mixel

A rewrite of pixel-sprite-generator in Typescript.

Other changes:

Added ability to tint sprites
Added seedable RNG

Install

npm i mixel

Examples

See here for a list of visual examples.

Usage

Sample Usage

const SPACESHIP_MASK: Mask = {
  width: 6,
  height: 12,
  mirrorX: true,
  data: [
    0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 1, 1,
    0, 0, 0, 0, 1,-1,
    0, 0, 0, 1, 1,-1,
    0, 0, 0, 1, 1,-1,
    0, 0, 1, 1, 1,-1,
    0, 1, 1, 1, 2, 2,
    0, 1, 1, 1, 2, 2,
    0, 1, 1, 1, 2, 2,
    0, 1, 1, 1, 1,-1,
    0, 0, 0, 1, 1, 1,
    0, 0, 0, 0, 0, 0  
  ]
};

for(let i = 0; i < SPRITE_COUNT; i++) {
  const sprite = new Sprite(SPACESHIP_MASK, {
    colored: true
  });

  const canvas = createCanvas(sprite);
  document.getElementById('spaceship-default-settings').appendChild(canvas);
}

API

`Mask`

A Mask is the general shape of the generated object. It supports these parameters:

Name	Type	Default	Description
`width`	number	0	The number of pixels wide the mask should be (if `mirrorX` is set, will be doubled).
`height`	number	0	The number of pixels tall the mask should be (if `mirrorY` is set, will be doubled).
`mirrorX`	boolean	false	Whether the mask should mirror across the Y axis (from left to right).
`mirrorY`	boolean	false	Whether the mask should mirror across the X axis (from top to bottom).
`data`	SpriteStructure[]	[]	An array of values (-1..2) representing a `SpriteStructure` value.

`SpriteOptions`

SpriteOptions are specifically used in the manipulation of the sprite.

Name	Type	Default	Description
`colored`	boolean	false	Whether or not the sprite should have color.
`edgeBrightness`	number (0, 1)	0.3	How bright the edges of the sprite should be.
`colorVariations`	number (0, 1)	0.2	Higher numbers make the color variations within a sprite more frequent.
`brightnessNoise`	number (0, 1)	0.3	Higher numbers make the brightness more "fuzzy" near the edge.
`saturation`	number (0, 1)	0.5	Higher numbers make the general saturation of the image appear more colorful.
`seed`	string	none	The seed to use for random generation. Using the same seed/mask will result in the same image every time.
`tint`	`{ r: number, g: number, b: number, a: number }`	none	The tint to apply to the image when it's been generated.
`randomSampleCallback`	`(x: number, y: number) => SpriteStructure`	Randomly change 1/2 to -1/0	The callback to be applied to each individual cell of the sprite.

More Usage

Check the editor here to see more examples.