pixel.js
pixel drawing and animation libraries
rationale
I use these libraries as part of my Pixel Editor and Animation suite (not yet released publicly).
Live Example
https://davidfig.github.io/pixel/
Installation
include pixel.js in your project or add to your workflow
yarn add yy-pixel
API
pixel.js
/** * create a sprite with the Pixel-Editor data * @param * @param * @param * @param * @param {number=150} animationTime in milliseconds per frame * @event stop - animation finishes and stops * @event loop - animation loops * @event link - animation link to another animation * @event frame - animation changes frame */ /** * @param * @return */ size(index) /** * adds the frames to the RenderSheet * @param */ render(force) /** * adds the frames to the RenderSheet * @param * @param */ static add(data, sheet) /** * adds an individual frame to the rendersheet * @param * @param * @param */ static addFrame(index, data, sheet) /** * find the largest width of the frames * @static * @param * @return */ static largestFrameWidth(data) /** * find the largest height of the frames * @static * @param * @return */ static largestFrameHeight(data) /** * find the largest width of the frames * @returns */ largestWidth() /** * find the largest width of the frames * @returns */ largestHeight() /** * starts a manual animation * @param * @param * @param */ animateManual(animation, reverse, time) /** * starts a named animation * @param * @param * @param */ animate(name, reverse, time) /** * stops any animation */ stop() /** * updates the pixel * @param * @return */ update(elapsed) /** * change the sprite to a certain frame * @param */ frame(index)
pixel-sheet.js
/** * sheet of pixels * @param * @param * @param * @param * @param * @param * @param * @param */module
pixelart.js
/** * draw and fill rectangle * @param * @param * @param * @param * @param */ /** * draw circle * from https://en.wikipedia.org/wiki/Midpoint_circle_algorithm * @param * @param * @param * @param * @param */ circle: function (x0, y0, radius, color, c) /** * draw arc * @param * @param * @param * @param * @param * @param * @param */ arc: function (x0, y0, radius, start, end, color, c) /** * draw and fill circle * @param * @param * @param * @param * @param */ circleFill: function (x0, y0, radius, color, c) /** * draw ellipse * from http://cfetch.blogspot.tw/2014/01/wap-to-draw-ellipse-using-midpoint.html * @param * @param * @param * @param * @param * @param */ ellipse(xc, yc, rx, ry, color, c) /** * draw and fill ellipse * @param * @param * @param * @param * @param * @param */ ellipseFill(xc, yc, rx, ry, color, c) /** * draw and fill polygon * @param * @param * @param */ polygonFill: function (vertices, color, c) /** * gets data for use with yy-pixel.Pixel file format * @param * @param * @param * @param * @param */ getPixels: function (x0, y0, width, height, c)
license
MIT License
(c) 2017 YOPEY YOPEY LLC by David Figatner