pixel-art-gen

Generate a pixel art from a simple pattern string. (based on pixel-sprite-generator)

Demo

ships

recoil

vader

How to use

See the sample code.

Include build/index.js script,

  <script src="https://unpkg.com/pixel-art-gen/build/index.js"></script>

or install from npm.

> npm i pixel-art-gen

import * as pag from "pixel-art-gen";

pag.generate function returns a generated pixel art in a Pixel array ([rotated pattern index][x][y]),

// generate a pixel art
// (with the default options {isMirrorY: true, rotationNum: 16, scale: 2})
// each character in the string array of the 1st arg represents a pixel type
// 'x': a body or an edge
// '-': a body or an empty
// 'o': an edge
// '*': a body
player.pixels = pag.generate([" x", "xxxx"]);

use pag.generateImages to get images,

player.images = pag.generateImages([" x", "xxxx"]);

or generateImagesPromise to wait for loading images.

player.images = await pag.generateImagesPromise([" x", "xxxx"]);

Pixel instance consists of rgb colors, an isEmpty boolean value and a style string.

class Pixel {
  r = 0;
  g = 0;
  b = 0;
  isEmpty = true;
  style: string;
}

Use the pag.draw function to draw the generated pixel art,

// draw a generated pixels
function drawPixels(actor) {
  var a = actor.angle;
  if (a < 0) {
    a = Math.PI * 2 - Math.abs(a);
  }
  const ri = Math.round(a / ((Math.PI * 2) / rotationNum)) % rotationNum;
  pag.draw(context, actor.pixels, actor.pos.x, actor.pos.y, ri);
}

or use pag.drawImages to draw images.

pag.drawImage(context, actor.images, actor.pos.x, actor.pos.y, ri);

Options can be specified in the 2nd arg of the pag.generate (or pag.generateImages) function.

// specify the options in the 2nd arg
enemy.pixels = pag.generate([" x", "xx"], { isMirrorX: true });

Options described below are available.

  isMirrorX: false, // mirror the pattern in the x-axis
  isMirrorY: false, // mirror the pattern in the y-axis
  seed: 0, // random seed
  hue: null, // base color (hue changes randomly when hue = null)
  saturation: 0.8,
  value: 1,
  rotationNum: 1, // create rotated patterns
  scale: null, // scaling
  scaleX: null,
  scaleY: null,
  scalePattern: 1, // scale the pattern
  scalePatternX: null,
  scalePatternY: null,
  isRotatingRight: false, // rotate the pattern
  isRotatingLeft: false,
  isReverseX: false, // reverse the pattern
  isReverseY: false,
  isAddingEdgeFirst: false, // add an edge before randomize
  isInnerEdge: false, // add an edge inside
  colorNoise: 0.1, // how often the color changes randomly
  colorLighting: 1, // lighting effect for the color
  edgeDarkness: 0.4, // darkness of the edge pixels
  isShowingEdge: true, // show the edge pixels
  isShowingBody: true, // show the body pixels
  isLimitingColors: false, // limit the using colors
  isUsingLetterForm: false, // using the letter form for the pattern
  letterFormChar: "x", // the pattern letter for the letter form
  letterFormFontFamily: "monospace", // font for the letter form
  letterFormFontSize: 16,
  letterWidthRatio: 0.8, // for adjusting letter spacing
  letterHeightRatio: 0.9

You can set the default options of the library.

// set the default options
pag.setDefaultOptions({
  isMirrorY: true,
  rotationNum,
  scale: 2
});

Set the random seed by the pag.setSeed function to change a generated pixel art.

// set the random seed to change a generated pixel art
pag.setSeed(seed);