gretro

Gretro is a JavaScript library for retro CG


Keywords
graphics, vintage, retro
License
MIT
Install
bower install gretro

Documentation

gretro

NPM Version Bower Build Status Coverage Status Dependency Status devDependency Status

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

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

Install

browser
$ bower install gretro
<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);

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

Color

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

default color palette

customize color

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

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);

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

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 */

Plugins

gretro-text

plugin to draw a text

gretro-paint

plugin to paint a region

Contribution

  1. Fork (https://github.com/mohayonao/gretro/fork)
  2. Create a feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'add some feature')
  4. Run test suite with the gulp travis command and confirm that it passes
  5. Push to the branch (git push origin my-new-feature)
  6. Create new Pull Request

License

Gretro is available under the The MIT License.