Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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 {object} data
     * @param {RenderSheet} sheet
     * @param {object} data imported from .json (from Pixel-Editor)
     * @param {RenderSheet} sheet - rendersheet for rendering pixel sprite
     * @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
     */
    constructor(data, sheet, animationTime)

    /**
     * @param {number} index of frame
     * @return {object} returns {width: n, height: m }
     */
    size(index)

    /**
     * adds the frames to the RenderSheet
     * @param {boolean} force the render even if sheet already contains these sprites
     */
    render(force)

    /**
     * adds the frames to the RenderSheet
     * @param {object} data from Pixel-Editor
     * @param {RenderSheet} sheet
     */
    static add(data, sheet)

    /**
     * adds an individual frame to the rendersheet
     * @param {number} index
     * @param {object} data
     * @param {RenderSheet} sheet
     */
    static addFrame(index, data, sheet)

    /**
     * find the largest width of the frames
     * @static
     * @param {object} data
     * @return {number} largest width
     */
    static largestFrameWidth(data)

    /**
     * find the largest height of the frames
     * @static
     * @param {object} data
     * @return {number} largest height
     */
    static largestFrameHeight(data)

    /**
     * find the largest width of the frames
     * @returns {number} largest width
     */
    largestWidth()

    /**
     * find the largest width of the frames
     * @returns {number} largest height
     */
    largestHeight()

    /**
     * starts a manual animation
     * @param {array} animation
     * @param {boolean} reverse
     * @param {number} time - use this time instead of animationTime
     */
    animateManual(animation, reverse, time)

    /**
     * starts a named animation
     * @param {string} name of animation
     * @param {boolean} reverse - flip the sprite
     * @param {number} time - use this time instead of animationTime
     */
    animate(name, reverse, time)

    /**
     * stops any animation
     */
    stop()

    /**
     * updates the pixel
     * @param {number} elapsed
     * @return {boolean} whether the sprite changed
     */
    update(elapsed)

    /**
     * change the sprite to a certain frame
     * @param {number} index of frame
     */
    frame(index)

pixel-sheet.js

/**
 * sheet of pixels
 * @param {object[]} map
 * @param {string} map.name
 * @param {number} map.x
 * @param {number} map.y
 * @param {number} map.width
 * @param {number} map.height
 * @param {array} data - original data set to pull pixel from
 * @param {RenderSheet} sheet
 */
module.exports = function PixelSheet(map, data, sheet)

pixelart.js

    /**
     * draw and fill rectangle
     * @param {number} x1 - x
     * @param {number} y2 - y
     * @param {number} radius - radius
     * @param {string} color
     * @param {CanvasRenderingContext2D} [c]
     */
    rectFill: function (x1, y1, w, h, color, c)

    /**
     * draw circle
     * from https://en.wikipedia.org/wiki/Midpoint_circle_algorithm
     * @param {number} x0 - x-center
     * @param {number} y0 - y-center
     * @param {number} radius - radius
     * @param {string} color
     * @param {CanvasRenderingContext2D} [c]
     */
    circle: function (x0, y0, radius, color, c)

    /**
     * draw arc
     * @param {number} x0 - x-start
     * @param {number} y0 - y-start
     * @param {number} radius - radius
     * @param {number} start angle (radians)
     * @param {number} end angle (radians)
     * @param {string} color
     * @param {CanvasRenderingContext2D} [c]
     */
    arc: function (x0, y0, radius, start, end, color, c)

    /**
     * draw and fill circle
     * @param {number} x0 - x-center
     * @param {number} y0 - y-center
     * @param {number} radius - radius
     * @param {string} color
     * @param {CanvasRenderingContext2D} [c]
     */
    circleFill: function (x0, y0, radius, color, c)

    /**
     * draw ellipse
     * from http://cfetch.blogspot.tw/2014/01/wap-to-draw-ellipse-using-midpoint.html
     * @param {number} xc - x-center
     * @param {number} yc - y-center
     * @param {*} rx - radius x-axis
     * @param {*} ry - radius y-axis
     * @param {string} color
     * @param {CanvasRenderingContext2D} [c]
     */
    ellipse(xc, yc, rx, ry, color, c)

    /**
     * draw and fill ellipse
     * @param {number} xc - x-center
     * @param {number} yc - y-center
     * @param {number} rx - radius x-axis
     * @param {number} ry - radius y-axis
     * @param {string} color
     * @param {CanvasRenderingContext2D} [c]
     */
    ellipseFill(xc, yc, rx, ry, color, c)

    /**
     * draw and fill polygon
     * @param {number[]} vertices
     * @param {string} color
     * @param {CanvasRenderingContext2D} [c]
     */
    polygonFill: function (vertices, color, c)

    /**
     * gets data for use with yy-pixel.Pixel file format
     * @param {number} x0 - starting point in canvas
     * @param {number} y0
     * @param {number} width
     * @param {number} height
     * @param {HTMLContext} c
     */
    getPixels: function (x0, y0, width, height, c)

license

MIT License
(c) 2017 YOPEY YOPEY LLC by David Figatner

About

Javascript library to generate pixel art and animated scenes

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.