PixelartJS is a small tool which allows you to generate canvas images from characters. It's purpose is to be customizable as well, for the moment you change parameters like color, set a color map (by character), and specify the size of the pixels in the generated image.
I'm open to any suggestions, feel free to ask / pull request !
bower install pixelart --save
Add dependency:
<script src="bower_components/pixelart/dist/pixelart.min.js"></script>Basic
<div id="myImage"></div>var target = document.getElementById('myImage');
var ascii = [
'oooo o o',
'o o o o',
'o o o o',
'oooo o o'
];
new Pixelart(target, ascii, {
// options here (optional)
});Pass an array of ascii for cool animated sprites :)
// ultra basic pixelart loader
new Pixelart(
target,
[
['o'],
[' o'],
[' o']
],
{ speed: 200, loop: true }
);Type: Number
Size in pixels of each square.
new Pixelart(target, ascii, { pixelSize: 2 });Type: String (hex color)
Default color for all non-blank characters.
new Pixelart(target, ascii, { color: '#FF0000' });Type: Object
Specify color for specific characters.
new Pixelart(
target,
ascii,
{
colorMap: {
a: '#FF0000',
b: '#00FF00',
c: '#0000FF'
}
}
});Type: Number (of milliseconds)
"Animate" drawing by putting delay between each block draw.
new Pixelart(
target,
ascii,
{
stagger: 50
}
});Type: Number (of milliseconds)
Delay between each frame, when passing an array of sprites. (default 1000ms)
new Pixelart(
target,
[
[
'o',
' o',
'o',
],
[
' o',
' o',
' o',
],
],
{
speed: 50
}
});BSD