Procedural Sprite Generation for Web Workers.
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 heightconst 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 10 0 0 10 0 0 10 0 0 1cwidth cheight true true;
Now for the fun part!
const sprite = mask pixels; // And some options, if desired.// ... pass `sprite` back from worker.const imageData =Objectcwidthcheight;ctx;
BAM! You now have a beautiful sprite. Thanks!
- 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
- Node.js pixel-sprite-generator port by blipn
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.