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;const ctx = c; cwidth = 8; // Sprite widthcheight = 8; // Sprite height const pixels = ctx;// ... pass `c` and `pixels` to worker.
Next - I figure you know how to import packages - create a sprite.
const mask = 0 0 0 1 0 0 0 1 0 0 0 1 0 0 0 1 cwidth cheight true true;
Now for the fun part!
const sprite = mask pixels; // And some options, if desired.// ... pass `sprite` back from worker. const imageData = Object cwidth cheight; ctx;
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.