UNPKG

1.68 kBMarkdownView Raw
1## scratch-render
2#### WebGL-based rendering engine for Scratch 3.0
3
4[![Build Status](https://travis-ci.org/LLK/scratch-render.svg?branch=develop)](https://travis-ci.org/LLK/scratch-render)
5[![Greenkeeper badge](https://badges.greenkeeper.io/LLK/scratch-render.svg)](https://greenkeeper.io/)
6
7## Installation
8```bash
9npm install https://github.com/LLK/scratch-render.git
10```
11
12## Setup
13```html
14<!DOCTYPE html>
15<html lang="en">
16 <head>
17 <meta charset="UTF-8">
18 <title>Scratch WebGL rendering demo</title>
19 </head>
20
21 <body>
22 <canvas id="myStage"></canvas>
23 <canvas id="myDebug"></canvas>
24 </body>
25</html>
26```
27
28```js
29var canvas = document.getElementById('myStage');
30var debug = document.getElementById('myDebug');
31
32// Instantiate the renderer
33var renderer = new require('scratch-render')(canvas);
34
35// Connect to debug canvas
36renderer.setDebugCanvas(debug);
37
38// Start drawing
39function drawStep() {
40 renderer.draw();
41 requestAnimationFrame(drawStep);
42}
43drawStep();
44
45// Connect to worker (see "playground" example)
46var worker = new Worker('worker.js');
47renderer.connectWorker(worker);
48```
49
50## Standalone Build
51```bash
52npm run build
53```
54
55```html
56<script src="/path/to/render.js"></script>
57<script>
58 var renderer = new window.RenderWebGLLocal();
59 // do things
60</script>
61```
62
63## Testing
64```bash
65npm test
66```
67
68## Donate
69We provide [Scratch](https://scratch.mit.edu) free of charge, and want to keep it that way! Please consider making a [donation](https://secure.donationpay.org/scratchfoundation/) to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!