Create Pixel Art from input pictures
The purpose of this Typescript node.js library is to transform pictures by adding a Pixel-Art touch.
The library has only one dependency on Jimp (used to import/export picture files).
Try the test web page hosted through GitHub pages to use the features of Pixel Artist without development.
Different operations are available, which can be combined in a single rendering.
All transformations use colors exclusively from an arbitrary palette. The palette can be defined as a list of colors and/or as RGB bit depths.
Some well-known predefined palettes are available:
| Name | #Colors |  |
|---|---|---|
| CPC | 27 |  |
| AAP64 | 64 |  |
| Apple2 | 15 |  |
| CGA | 16 |  |
| C64 | 16 |  |
| Fantasy24 | 24 |  |
| Jewel15 | 15 |  |
| MSX | 15 |  |
| NES | 53 |  |
| RGB | 16777216 |  |
| RGB332 | 256 |  |
| RGB444 | 4096 |  |
| RGB565 | 65536 |  |
| Spectrum | 15 |  |
| Steam16 | 16 |  |
| Sweetie16 | 16 |  |
| Tandy | 59 |  |
| Teletext | 8 |  |
| VIC20 | 16 |  |
An outline can be added around the non-transparent part of the image. The outline has a single color and is always drawn on transparent pixels.
The outline can be defined according to 2 variants. The first variant creates a single-pixel outline:
The second variant creates a thicker outline (corner pixels are added in the diagonals):
In addition, the number of layers of such an outline can be set, as well as the color, e.g. 3 layers on first variant in brown:
An edge is similar to an outline but it is drawn on the interior, non-transparent pixels:
The complete API of the library is available in doc. The main classes are:
Color: RGBA color in sRGB space with CIELAB distancePalette: Palette based on bit depth and/or list of colorsPixelArtist: Picture transformation object
The library is distributed primarily as an CommonJS module in an npm package. First of all, install the module in your project:
npm install pixel-art --save to use the library as part of the project at run-time
or
npm install pixel-art --save-dev to use it as development dependency
A typical Typescript usage looks like:
import Jimp from 'jimp';
import {PixelArtist, palettes} from 'pixel-artist';
Jimp.read('source.png').then(image =>
{
let pa = new PixelArtist(palettes["AAP64"]);
pa.setOutline(1, "Black", false);
pa.render(image).write('result.png');
});A webpack bundle is provided in dist to used directly with a <script> tag:
<!DOCTYPE html>
<html lang="en">
<head><script src="dist/pixel-artist.bundle.js"></script></head>
<body>
<script>
Jimp.read("pics/duck.png").then(function (img)
{
// Processes picture
var pa = (new pixart.PixelArtist(pixart.palettes["AAP64"]));
pa.setOutline(1, "Black", false);
pa.setFinalFrame(2);
let res = pa.render(img);
// Adds processed picture to end of document
res.getBase64(Jimp.AUTO, function (err, src)
{
var elem = document.createElement("img");
elem.setAttribute("src", src);
document.body.appendChild(elem);
});
});
</script>
</body>
</html>To build the library, start by cloning the repository:
git clone https://github.com/bfxdev/pixel-artist.git
Change to directory pixel-artist and then download the dependencies:
npm install
Then start the compilation:
npm start
Several targets defined in package.json can be chosen to build only a part of the library.
During the compilation, the following folder are used:
lib: CommonJS moduleses6: ES6 modules for packagingdist: Packaged modulesdoc: Documentation generated bytypedoc