ww-psg

Procedural Sprite Generation for Web Workers.

Installation

Using A Package Manager

If you have npm installed, you can add the ww-psg to your project using the following command.

$ npm i ww-psg

or, if you prefer yarn.

$ yarn add ww-psg

Using the package

It's a bit tricky, but you can manage, I believe in you!

Firstly, we need to create a new canvas.

const c = document.createElement('canvas');
const ctx = c.getContext('2d');

c.width = 8; // Sprite width
c.height = 8; // Sprite height

const pixels = ctx.createImageData(c.width * 2, c.height * 2);
// ... pass `c` and `pixels` to worker.

Next - I figure you know how to import packages - create a sprite.

const mask = new ww_psg.Mask([
    0, 0, 0, 1,
    0, 0, 0, 1,
    0, 0, 0, 1,
    0, 0, 0, 1,
], c.width, c.height, true, true);

Now for the fun part!

const sprite = new ww_psg.Sprite(mask, pixels); // And some options, if desired.
// ... pass `sprite` back from worker.

const imageData = new ImageDate(
    new Uint8ClampedArray(Object.values(sprite.pixels.data)),
    c.width,
    c.height,
);

ctx.putImageData(imageData, 0, 0);

BAM! You now have a beautiful sprite. Thanks!

Ports/Other Languages

• Dart pixel-sprite-generator port by tobbel
• Haxe pixel-sprite-generator port by Zielak
• C# pixel-sprite-generator port by BenMcLean
• libGDX pixel-sprite-generator port by BenMcLean
• Unity3d pixel-sprite-generator port by Shogan
• JavaScript pixel-sprite-generator port by zfedoran
• Node.js pixel-sprite-generator port by blipn

Algorithm

The sprites are generated by using a two dimensional mask. The values in the mask are then randomized and mirrored. The resulting template is rendered to a canvas element.

The algorithm is explained in more detail on Dave Bollinger's website.