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.