https://github.com/davidfig/rendersheet

renders a canvas spritesheet for use with pixi.js
https://github.com/davidfig/rendersheet

Last synced: 24 days ago
JSON representation

renders a canvas spritesheet for use with pixi.js

• Host: GitHub
• URL: https://github.com/davidfig/rendersheet
• Owner: davidfig
• License: mit
• Created: 2016-07-04T13:16:17.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2022-12-04T23:46:27.000Z (over 2 years ago)
• Last Synced: 2025-03-28T11:51:08.552Z (about 1 month ago)
• Language: JavaScript
• Size: 2.91 MB
• Stars: 11
• Watchers: 1
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## rendersheet.js

Generate on-the-fly spritesheets for pixi.js

## Rationale

I needed a way to generate spritesheets based on canvas drawings and/or images. This allows me to resize the drawings based on different resolutions. For canvas drawings, you pass the rendersheet two functions: a drawing function and a measure function.

## Code Example

    // set up rendersheet

    var sheet = new RenderSheet();

    // draw triangle textures on rendersheet

    sheet.add('triangle', triangleDraw, triangleMeasure, {size: 50, 'red'});

    // image texture on rendersheet

    sheet.addImage('image', 'images/test.png');

    // render the sheet

    sheet.render();

    // create a PIXI.Sprite using the rendersheet

    var sprite = stage.addChild(sheet.get('triangle'));

    // use a PIXI.Texture from the rendershet

    var image = stage.addChild(new PIXI.Sprite(sheet.getTexture('image')));

    // drawing function to generate the canvas triangle

    function triangleDraw(c, params)

    {

        var size = params.size;

        var half = params.size / 2;

        c.beginPath();

        c.fillStyle = params.color;

        c.moveTo(half, 0);

        c.lineTo(0, size);

        c.lineTo(size, size);

        c.closePath();

        c.fill();

    }

    // measure function to provide dimensions for canvas triangle

    function triangleMeasure(c, params)

    {

        return { width: params.size, height: params.size };

    }

## Installation

    npm i yy-rendersheet

## Live Example

https://davidfig.github.io/rendersheet/

## API Documentation

https://davidfig.github.io/rendersheet/jsdoc

## license  

MIT License  

(c) 2019 [YOPEY YOPEY LLC](https://yopeyopey.com/) by [David Figatner](https://twitter.com/yopey_yopey/)