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
|
9 | npm 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
|
29 | var canvas = document.getElementById('myStage');
|
30 | var debug = document.getElementById('myDebug');
|
31 |
|
32 | // Instantiate the renderer
|
33 | var renderer = new require('scratch-render')(canvas);
|
34 |
|
35 | // Connect to debug canvas
|
36 | renderer.setDebugCanvas(debug);
|
37 |
|
38 | // Start drawing
|
39 | function drawStep() {
|
40 | renderer.draw();
|
41 | requestAnimationFrame(drawStep);
|
42 | }
|
43 | drawStep();
|
44 |
|
45 | // Connect to worker (see "playground" example)
|
46 | var worker = new Worker('worker.js');
|
47 | renderer.connectWorker(worker);
|
48 | ```
|
49 |
|
50 | ## Standalone Build
|
51 | ```bash
|
52 | npm 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
|
65 | npm test
|
66 | ```
|
67 |
|
68 | ## Donate
|
69 | We 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!
|