gretro
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
node.js
% npm install gretro
Usage
var canvas = 220 110; canvas ;
Rendering
browser
var gretroCanvas = 640 400; var canvas = document;var context = canvas;var imageData = context; imageDatadata; context;
draw directly to the html-canvas
var canvas = document;var context = canvas;var imageData = context; 640 400 imageDatadata; context;
node.js
use node-png npm install png
var Png = Png;var fs = ; var png = gretroCanvas 640 400 "rgb";var png_image = png; fs;
API
Canvas
Constructor
new Canvas(width:int=640, height:int=400, buffer:Uint8Array=null) : Canvas
Instance methods
Environment
Setting
getColor(index:int) : int
setColor(index:int, rgb:int) : Canvas
getTile(index:int) : int
setTile(index:int, pattern:int) : Canvas
Color
fill(color:[int|array|function]) : Canvas
noFill() : Canvas
stroke(color:[int|array|function]) : Canvas
noStroke() : Canvas
Region
clear() : Canvas
clip(x1:int, y1:int, x2:int, y2:int) : Canvas
noClip() : Canvas
mask(mask:[Uint8Array|Canvas]) : Canvas
noMask() : Canvas
Shape
arc()
(NOT IMPLEMENTED YET)circle(cx:int, cy:int, r:int) : Canvas
ellipse(cx:int, cy:int, rx:int, ry:int) : Canvas
line(x1:int, y1:int, x2:int, y2:int) : Canvas
point(x:int, y:int) : Canvas
polygon(vtx:array) : Canvas
quad(x1:int, y1:int, x2:int, y2:int, x3:int, y3:int, x4:int, y4:int) : Canvas
rect(x:int, y:int, width:int, height:int) : Canvas
triangle(x1:int, y1:int, x2:int, y2:int, x3:int, y3:int) : Canvas
Image
clone() : Canvas
copy(x1:int, y1:int, x2:int, y2:int) : Canvas
paste(cnv:Canvas, x:int, y:int) : Canvas
Output
toMask() : Uint8Array
toRGB() : Uint8Array
toRGBA(alpha:int=255) : Uint8Array
toIndexedColor() : Uint8Array
Utility
Color
You can use 16 colors on a canvas. It is possible to select from 4096 colors.
default color palette
customize color
canvas ;
color generator
set a function that returns a calculated color number instead of a color number.
canvas ;
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;
default tile palette
custom tile
TileIndex 16-31 are customizable.
canvas ;/* 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
- Fork (https://github.com/mohayonao/gretro/fork)
- Create a feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'add some feature'
) - Run test suite with the
gulp travis
command and confirm that it passes - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request
License
Gretro is available under the The MIT License.