scratch-render/README.md

## scratch-render
#### WebGL-based rendering engine for Scratch 3.0

[![Build Status](https://travis-ci.org/LLK/scratch-render.svg?branch=develop)](https://travis-ci.org/LLK/scratch-render)
[![Greenkeeper badge](https://badges.greenkeeper.io/LLK/scratch-render.svg)](https://greenkeeper.io/)

## Installation
```bash
npm install https://github.com/LLK/scratch-render.git
```

## Setup
```html
<!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>
```

```js
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
```bash
npm run build
```

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

## Testing
```bash
npm test
```

## Donate
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!
Update documentation in README 2016-08-08 14:23:25 -04:00			`## scratch-render`
			`#### WebGL-based rendering engine for Scratch 3.0`
Establish initial structure, create demo.html So far this does nothing but clear the screen to magenta, but it's a start. 2016-05-13 10:48:45 -07:00
Update documentation in README 2016-08-08 14:23:25 -04:00			`[![Build Status](https://travis-ci.org/LLK/scratch-render.svg?branch=develop)](https://travis-ci.org/LLK/scratch-render)`
docs(readme): clean up badges 2017-02-10 11:35:18 -08:00			`[![Greenkeeper badge](https://badges.greenkeeper.io/LLK/scratch-render.svg)](https://greenkeeper.io/)`
Establish initial structure, create demo.html So far this does nothing but clear the screen to magenta, but it's a start. 2016-05-13 10:48:45 -07:00
			`## Installation`
			```bash
Update documentation in README 2016-08-08 14:23:25 -04:00			`npm install https://github.com/LLK/scratch-render.git`
Establish initial structure, create demo.html So far this does nothing but clear the screen to magenta, but it's a start. 2016-05-13 10:48:45 -07:00			```

			`## Setup`
Update documentation in README 2016-08-08 14:23:25 -04:00			```html
			`<!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>`
			```

			```js
			`var canvas = document.getElementById('myStage');`
Fixed the example in README.md I made the edit without testing, please review the change if it makes sense to you, thank you. 2017-04-10 12:58:06 +08:00			`var debug = document.getElementById('myDebug');`
Update documentation in README 2016-08-08 14:23:25 -04:00
			`// Instantiate the renderer`
			`var renderer = new require('scratch-render')(canvas);`

			`// Connect to debug canvas`
Fixed the example in README.md I made the edit without testing, please review the change if it makes sense to you, thank you. 2017-04-10 12:58:06 +08:00			`renderer.setDebugCanvas(debug);`
Update documentation in README 2016-08-08 14:23:25 -04:00
			`// Start drawing`
			`function drawStep() {`
			`renderer.draw();`
			`requestAnimationFrame(drawStep);`
			`}`
			`drawStep();`

			`// Connect to worker (see "playground" example)`
			`var worker = new Worker('worker.js');`
			`renderer.connectWorker(worker);`
			```
Establish initial structure, create demo.html So far this does nothing but clear the screen to magenta, but it's a start. 2016-05-13 10:48:45 -07:00
			`## Standalone Build`
			```bash
Replace Makefile with npm scripts Allows Windows users to run what's currently in the Makefile 2016-10-17 09:56:27 -04:00			`npm run build`
Establish initial structure, create demo.html So far this does nothing but clear the screen to magenta, but it's a start. 2016-05-13 10:48:45 -07:00			```

			```html
Update documentation in README 2016-08-08 14:23:25 -04:00			`<script src="/path/to/render.js"></script>`
Establish initial structure, create demo.html So far this does nothing but clear the screen to magenta, but it's a start. 2016-05-13 10:48:45 -07:00			`<script>`
Update documentation in README 2016-08-08 14:23:25 -04:00			`var renderer = new window.RenderWebGLLocal();`
Establish initial structure, create demo.html So far this does nothing but clear the screen to magenta, but it's a start. 2016-05-13 10:48:45 -07:00			`// do things`
			`</script>`
			```

			`## Testing`
			```bash
Replace Makefile with npm scripts Allows Windows users to run what's currently in the Makefile 2016-10-17 09:56:27 -04:00			`npm test`
Establish initial structure, create demo.html So far this does nothing but clear the screen to magenta, but it's a start. 2016-05-13 10:48:45 -07:00			```

Update documentation in README 2016-08-08 14:23:25 -04:00			`## Donate`
			`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!`