JSPM

scratch-render

2.0.208
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3326
  • Score
    100M100P100Q126095F
  • License AGPL-3.0-only

WebGL Renderer for Scratch 3.0

Package Exports

    Readme

    scratch-render

    WebGL-based rendering engine for Scratch 3.0

    CircleCI

    Greenkeeper badge

    Installation

    npm install https://github.com/scratchfoundation/scratch-render.git

    Setup

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Scratch WebGL rendering demo</title>
        </head>
    
        <body>
            <canvas id="myStage"></canvas>
            <canvas id="myDebug"></canvas>
        </body>
    </html>
    var canvas = document.getElementById('myStage');
    var debug = document.getElementById('myDebug');
    
    // Instantiate the renderer
    var renderer = new require('scratch-render')(canvas);
    
    // Connect to debug canvas
    renderer.setDebugCanvas(debug);
    
    // Start drawing
    function drawStep() {
        renderer.draw();
        requestAnimationFrame(drawStep);
    }
    drawStep();
    
    // Connect to worker (see "playground" example)
    var worker = new Worker('worker.js');
    renderer.connectWorker(worker);

    Standalone Build

    npm run build
    <script src="/path/to/render.js"></script>
    <script>
        var renderer = new window.RenderWebGLLocal();
        // do things
    </script>

    Testing

    npm test

    We provide Scratch free of charge, and want to keep it that way! Please consider making a donation to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!

    Committing

    This project uses semantic release to ensure version bumps follow semver so that projects depending on it don't break unexpectedly.

    In order to automatically determine version updates, semantic release expects commit messages to follow the conventional-changelog specification.

    You can use the commitizen CLI to make commits formatted in this way:

    npm install -g commitizen@latest cz-conventional-changelog@latest

    Now you're ready to make commits using git cz.