Gretro NPM | npm.io

gretro

Gretro (grétrou, グレトロ) is a JavaScript graphic library for retro CG.

npm.io

Features

16 colors chosen from available 4096 colors
16 default tile patterns and 16 custom tile patterns
drawing in pixels, no anti aliasing
plugin architecture for extending gretro.Canvas

Online Playground

http://mohayonao.github.io/gretro/

Install

browser

<script src="/path/to/gretro.js"></script>

node.js

% npm install gretro

Usage

var canvas = new gretro.Canvas(220, 110);

canvas
  .stroke(13).circle( 40, 40, 30)
  .stroke( 7).circle(110, 40, 30)
  .stroke(10).circle(180, 40, 30)
  .stroke(14).circle( 75, 70, 30)
  .stroke(12).circle(145, 70, 30);

npm.io

Rendering

browser

var gretroCanvas = new gretro.Canvas(640, 400).draw(fn);

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var imageData = context.createImageData(640, 400);

imageData.data.set(gretroCanvas.toRGBA());

context.putImageData(imageData, 0, 0);

draw directly to the html-canvas

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var imageData = context.getImageData(0, 0, 640, 400);

new gretro.Canvas(640, 400, imageData.data).draw(fn);

context.putImageData(imageData, 0, 0);

node.js

use node-png npm install png

var Png = require("png").Png;
var fs  = require("fs");

var png = new Png(new Buffer(gretroCanvas.toRGB()), 640, 400, "rgb");
var png_image = png.encodeSync();

fs.writeFileSync("./image.png", png_image.toString("binary"), "binary");

API

Canvas

Constructor

new Canvas(width:int=640, height:int=400, buffer:Uint8Array=null) : Canvas

Instance methods

Environment

Setting

Color

Region

Shape

Image

Output

Utility

draw(fn:function) : Canvas

Color

You can use 16 colors on a canvas. It is possible to select from 4096 colors.

default color palette

npm.io

customize color

canvas
  .setColor(0, 0x44dd77).setColor(1, 0x22aa88)
  .fill(1).rect(20, 20, 60, 60);

npm.io

color generator

set a function that returns a calculated color number instead of a color number.

canvas
  .fill(function(x, y) {
    return 16 * Math.random();
  }).rect(20, 20, 60, 60);

npm.io

Tile

A tile is a 4 x 4 dot pattern with 2 colors that is used to express gradation in generally.

usage

Set array that contains color1, color2 and tile-index instead of a color number.

canvas.fill([ color1, color2, tileIndex ]);

default tile palette

npm.io

custom tile

TileIndex 16-31 are customizable.

canvas
  .setTile(16, 0x4a12)
  .stroke(13).fill([ 0, 13, 16 ])
  .circle(50, 50, 40, 40);
/* 1 2 4 8
   □ ■ □ □ = 2
   ■ □ □ □ = 1
   □ ■ □ ■ = a
   □ □ ■ □ = 4
            0x */

npm.io